Table row with images

Hello,
To begin, I want to extend my heartfelt apologies for the delayed reply,

which is due to an unexpectedly high volume of inquiries.

We truly value your patience during this period.

It seems we are able to reproduce this issue.
We made a Simple dummy Table which has three images ( each in one Column) similar to your Table, and if we make the middle Column ‘less width‘ than the others and we don’t activate “Basic Responsive” , then, in the Back-End Mobile Preview of the Simple Table, all three column widths and images render the same ( we set them as square ratio 150px by 150px).

Here is how the back-End Editor for this Simple table looks – we made the middle column have ‘a lot?less?width‘ as a test, but all the images are around 150px width and height – the middle image is not visually smaller than them.

?

?Here is how the Mobile Preview looks – it makes all the columns and images have same size (?we will also check if that is as designed, to make all columns same width for mobile screen – but at least all images are still the same):

??

But on our Front-End Page, the same ‘effect’ happens as on your Table;

The middle column which had less width – now has a much smaller image overall ( less height and width).

So it seems that on Front-End, it somehow ‘transposes’ the width with the height and ‘shrinks’ the image vertically.  The height is shrinked to only 65 px, while it was 144px in the Back-End Desktop and Mobile Previews.

2. Now, if we try the ‘opposite width effect’, to make the middle Column much wider and the side columns smaller;

we get the opposite result – now the middle image is much larger in both height and width – while the left and right column images have shrunk significantly.

It seems we have a bug.  We are passing this for further testing to our QA Team.

Thank you for pointing it out for us.

You can certainly follow our changeLog if you’d like(https://www.ads-software.com/plugins/wpdatatables/#developers), where we state any changes/new features/bug fixes during updates;

and our newsletter(https://wpdatatables.com/newsletter/), so you’re informed about new features, bug fixes, freebies, etc.

If our developers make any ‘temporary fix’ for this issue in between Updates, we will come back to share it with you.?
?

For the time being, you can use this CSS to ‘force’ a specific height and width for these images in your Table, and this is a Media Query which only activates for Mobile screen, when it is less than 480px screen width :

@media only screen and (max-width: 480px) {
    
    img.alignnone.size-square {
    width: 108px !important;
    height: 108px !important;
    }
}

Of course, you can change the width and height properties as needed.

Add this directly to the WP Page as Additional CSS, where you have this Table.

This selector targets your images which have CSS classes of?‘alignnone’ and?‘size-square’.

If you wish to have all images in your Simple table for that mobile breakpoint to have specific width and height, use this :

?

@media only screen and (max-width: 480px) {
    
    .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td img {
    width : 100px !important;
    height: 100px !important;
    }
}

We hope that helps.

Hi,

Many thanks for that explanation! I may try the fix and see what effect it has (and grow my knowledge of CSS!)

I dipped back into the admin for this table and can confirm that when the table was made the cell widths were not adjusted and that they all looked the same size (visually at least).

Hope you have success in squashing the bug!

regards
HJ

Just a follow-up…. the CSS mods you suggested as a temporary fix work very nicely, thank you.

HJ

Hello,
Thank you for confirming that the suggested CSS fix works, we are happy to hear that. ??
In regards to fixing the bug, we will do our best.
Can’t say an ETA yet, but you can follow our ChangeLog as suggested above, to keep informed about new fixes/improvements, etc.

Thanks again.
If you notice anything else, please don’t hesitate to open new Posts.

Hello again,
We are just making another follow-up since our QA Team did further testing and we can confirm that this is actually not a bug, but rather the current default behaviour of how our Simple Table’s images ‘follow’ the width of their Column.

Here are a couple of screenshots where our QA Team tested how the image will shrink simply when we edit the column width/then the image size decreases with it.
And in that case, the image size properly shows on all device previews.

?Here are some screnshots, how it looks by default, if we just add three images that are the same size and just decrease the column width on one of them.

Then, naturally, that image shrinks due to the less Column size ( in this case less width) compared to other Columns/images.

?

?

?In your specific use-case, you have tried to ‘force’ a certain image size to make them all equal even though you change the middle Column width – the Simple Table’s features are not ‘designed’ to work that way;

so the CSS i sent you can be used to ‘override’ that default behaviour as a solution.

Any CSS you add will not be changed by our Plugin Updates, so you won’t have to repeat adding it.

If you have an idea what we could try to improve this in the future, in terms of how the image ‘follows’ the size of the columns – you can leave a development suggestion and our management will take it into consideration.

Please feel free to search on our suggestions page (https://features.wpdatatables.com/), to see if someone may be already suggested this feature. If you can’t see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog if you’d like(https://www.ads-software.com/plugins/wpdatatables/#developers), where we state any changes/new features/bug fixes during updates;

and our newsletter(https://wpdatatables.com/newsletter/), so you’re informed about new features, bug fixes, freebies, etc.?

Thank you.

If you notice anything else, please don’t hesitate to open new Posts.

Kind regards.

Hi,

Many thanks for the detailed reply.

You say… : “In your specific use-case, you have tried to ‘force’ a certain image size to make them all equal even though you change the middle Column width.”

I don’t know what you mean by ‘forcing’ an image size? When I set the table up I just set a table 3 columns x 37 rows – I never set any column widths (how would you do that?), I assumed they were all equal size, and they looked equal in the admin. In fact the column widths HAVE stayed the same size, but the images in all middle columns have shrunk!

Is this because in the first row middle column the imported image was larger than the image imported in the first column? It appears the plugin has shrunk the image and not the column. But the odd thing is it has done that for ALL images placed in the middle column.

I made this table completely unaware that there was any mechanism to manually size columns or rows – is there such a mechanism?

I’m sure one solution is to manually resize all images (in Photoshop) to a standard size BEFORE placing in the table. But that’s rather long-winded!

Incidentally, the CSS fix you gave worked very nicely for the table when viewed in PORTRAIT on a mobile screen. But when the screen was rotated to LANDSCAPE view, unfortunately all the middle column images had once again shrunk in size!

It’s not a disaster by any means. And perhaps it’s about understanding more how WP DataTables handles images.

regards
HJ

Hi HJ,
Our sincere apologies for not catching your reply here right away.
Thank you for your patience.

My apology, when i inspected the HTML of your cells, it seemed that you added Custom CSS in order to have a specific width and height of each image;
but now after your clarification and when I looked closer, I realise that was just simply their default size in the cells.

In regards to how the middle image shrunk in your case;
That is because the width of your middle Column is smaller than the width of the left and right Columns.
We reproduced the same behaviour, as you saw from our examples/screenshots.

This is how our Simple Table’s handle transposing the Column width to the image size.
For any Column that has lesser width, that image is going to shrink by default to ‘compensate’ and to keep its’ aspect ratio’ .

In regards to that CSS i sent you – Yes, that is because the Media Query i made is only when the device screen width does not go over 480 pixels, so

@media only screen and (max-width: 480px) {
    
    .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td img {
    width : 100px !important;
    height: 100px !important;
    }
}

In that Media Query (breakpoint), this CSS is only being applied when the screen with is less or equal to 480px.

If you wish to try adding more Custom CSS for the image to have a different height and width for other devices, like tablets, or when someone switches their Phone to a Portrait View;
you would need to add more Media Queries and specify the Screen Width for each Device/View.
For example, our default value for Tablet Width is 1024px; so for Tablets, you can add another Media Query like :

@media only screen and (max-width: 1024px) {
    
    .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td img {
    width : 100px !important;
    height: 100px !important;
    }
}

You can also try to experiment to change from pixel value to a percentage value, and see if that works better.
Now we have reached the limit to what our Support can cover in terms of custom solutions, but I hope this could help to get you started in the right direction.

As we said earlier, if you have any suggestion how we can improve all of this, you can leave a Development Suggestion and our management along with the developers will do their best to create improvements in the future.

Thank you.

• This reply was modified 8 months, 4 weeks ago by wpDataTables.