Posts table image options
The Posts Table Pro plugin comes with several options for controlling how images work in the table.
If you use the
image column in Posts Table Pro, the image will open in a lightbox when someone clicks on the image.
The lightbox uses the Photoswipe library.
The lightbox is enabled by default. If you would like to disable the lightbox feature, you can untick the option in the plugin settings page:
You can also enable or disable it for individual tables by setting the lightbox option in the shortcode:
Can I change or restyle the image lightbox?
The lightbox uses the Photoswipe library. Unfortunately there are no options to customize this (e.g. to change the lightbox background colour), and you could do this by adding some custom CSS. If you don't know how to do this, we recommend that you post a job on Codeable to find a suitable WordPress developer. We have partnered with them to provide customizations for our customers.
Linking to the single post page from the image column
If you would like the image to be clickable and take the user to the single post page, you need to disable the lightbox as described above. Once you've done this, the image column will instead link to the relevant single post page - see the links article for more details.
image_size option controls the size of the image column if you have included this column in your table.
The default image size is
70x70. You can use any standard image size (e.g. thumbnail, medium, large, etc), or one or two numbers to denote the width and height for the image.
You can either set the image size option globally on the plugin settings page, or add it directly to the shortcode for individual tables.
For example, to use the
medium image size:
[posts_table columns="image,name,description" image_size="medium"]
For a square image 50 by 50 pixels:
[posts_table columns="image,name,description" image_size="50"]
For an image 40 pixels wide by 60 pixels high:
[posts_table columns="image,name,description" image_size="40x60"]
My images are the wrong size!
Image sizing is very complex in WordPress, and can have unexpected results.
A few tips:
- Your images must be the correct proportion for your chosen image size. For example, if your images are square and you set
image_size="50x40"then the images will still appear square.
- If you’re using the built-in image sizes (e.g. thumbnail, medium or large) then you can check their sizes in Settings → Media.
- It’s possible that the width settings (see above) may be overriding your image sizes. For example, if you have set a fixed width for the image column and a specific image size then these options may conflict.
- If you’re really struggling to get your images the correct size in the table then you can resize the original image to the correct size.
The table is loading bigger images than it needs to
If you set a custom image size in the table, then WordPress will look for a registered image size that either matches this exactly, or shares the same aspect ratio.
For example, let's say that you set the post table image size to 50x100, and your site has a registered image size of 100x200 but none that matches exactly. In this case, the aspect ratio is correct so the 100x200 image will be loaded behind the scenes, and displayed at 50x100 in the table.
If there is no registered image size with the same aspect ratio then the image will be displayed as the correct size in the front end, but the full size image will be loaded in the background. This could slow down your tables.
You can use any of the following methods to prevent this from happening:
- Instead of setting a custom image size in the table, use one of the registered image sizes which are listed under Settings → Media (e.g. thumbnail or medium).
- Go to Settings → Media and edit one of your existing image sizes to match the aspect ratio of the images in the table, and then regenerate your thumbnails to update all the existing images. (Warning: This will also change any images that use this size elsewhere on your site.)
- Register an additional image size which matches the image sizes that you want to display in the table. Again, you will then need to regenerate your thumbnails to create a version of all your existing existing images in the new size.
How to remove images from the table
If you don't want to include images in the table at all, then you can delete the image column from your list of table columns. Please see the documentation about how to edit the columns in the table.