Tablepress Responsive Images – How to get your images to re-size automatically inside of your Tablepress cells.


By default the images inside of tablepress cells will not size themselves responsively which can result in a very over-sized table width that goes outside of your box. See this sample here:

 

 

 

 

The images have blown the table way outside of the box because they aren't re-sizing.

The images have blown the table way outside of the box because they aren’t re-sizing.

First you will have to add a piece of custom CSS in the Tablepress settings

.tablepress-id-N img {
	max-width: 100%;
	height: auto;
}

Where N is the table ID number that you want the images to resize. This just tells the images to resize to 100% of the width of their cells. So as the cells get smaller the max allowable width for the images will shrink. Unfortunately this isn’t enough, you will need to place your images in the cells manually instead of using the “Insert Image” button that is provided by Tablepress.

The key to this lies in the tag that you place inside the cells when editing your tables. tablepress image button

If you use the “Insert Image” button that is provided for you in your “edit table” page you will get a piece of code that looks like this:

<img src="http://yourwebsite/wp-content/uploads/2016/04/phototitle1.jpg" alt="photodescription image_160px" width="160" height="160" class="alignnone size-full wp-image-12406" />

These images will stay static and will not re-size to have all your columns fit inside your box, even if you have set table width to 100% in the custom css using:

.tablepress-id-1 {
	width: 100% !important;
}

To get the images to re-size, instead go into a new page and insert the photos you want using the Insert>Add Media function on the “Visual” tab of the WYSIWG.

add media snip

Then go to the “Text” tab of the WYSIWG and copy this code, which will look like this:

<img class="alignnone size-full wp-image-990" src="https://ncoughlin.com/wp-content/uploads/2016/04/add-media-snip.jpg" alt="add media snip" width="483" height="448" />

Insert that code into the Tablepress cells manually and the photos will be responsive!

Responsive photos in tablepress

 

7 Comments

Add yours
    • 2
      ncoughlin

      You would want to manually set the max column width for the first column (or all of them) with some custom css for that table. You should be able to find instructions for that on the Tablepress website.

  1. 3
    Aaron

    Building on your instructions, I found an easier way was to simply add your custom css, don’t change the “N”(just leave the class as “.tablepress-id-N”, then on any table you’d like, just assign “tablepress-id-N” as a custom class. That way you’re not setting up a new css class for every table and you don’t have to jump back and forth between the editor and poll.

  2. 5
    jay

    width=”483″ height=”448″ not working, change to: style=”width:483px;height:448px”, don’t know why?

  3. 7
    maninder singh

    Don’t work for me trying many time actually i’m new in here so that’s why may be happening please let me know in more details..thanks!!

+ Leave a Comment