Image column sizing incorrect

  • Resolved RachelR

    (@rrodda75)


    3 years, 2 months ago

    Hi there,
    I use shortcodes in my tables to link to Amazon images, but for some reason the image column is not displaying normally (and this is a new problem).

    The image shortcode column is taking up a lot of width across the page and the other columns are smaller and the table is not resizing to the fit on desktop and it takes up most of the screen on mobile.

    I have horizontal scroll switched on for the table.

    This is a new issue and did not occur previously with image shortcodes in my tables using a different plugin. Sometimes it does resize, but often it doesn’t.

    Do you know what might be causing the issue?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    I’m not really sure but my guess is that this is related to the lazy-loading image feature of WordPress. Due to that, images are only loaded once they are needed (visible) on the screen, but TablePress already needs to calculate the column width before that.
    To maybe reduce these calculations, you could use a slighlty different approach for horizontal scrolling (one that does not use JavaScript, but only CSS – which is feasible in your case, as you are not using the other JavaScript features with this table). For that, please uncheck the “Use DataTables” checkbox on the “Edit” screen of this table and then employ the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ on the page.
    If that also does not yet help, we might have to set a column width for the first column, with CSS code.

    Regards,
    Tobias

    Thread Starter RachelR

    (@rrodda75)

    I’ve just noticed that when I view the article when I am logged in to WordPress, it displays correctly. But when I use a different browser, and am not logged in to the site, it displays incorrectly.
    Would this still point to an issue with lazy loading or possibly caching?

    Thread Starter RachelR

    (@rrodda75)

    I’ve applied the plugin (I already had it, but just not activated), and I’m not sure it makes a difference – the image still starts wide then does shrink back down, but it is doing the same thing now on other posts – so it is perhaps a lazy loading issue.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, this seems to be related to lazy-loading indeed. Once I scroll the table into view, all images are loaded, and the column shrinks immediately.
    The table looks fine then.

    To maybe reduce that shrink effect, you could try setting a column width on the column. For that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-28 .column-1 {
  width: 91px;
}

    Regards,
    Tobias

    Thread Starter RachelR

    (@rrodda75)

    Thanks Tobias – for now I have excluded amazon images from lazy loading in WP Rocket and that seems to have fixed the issue. Closing this off – thanks for your help.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    great! Good to hear that you found a workaround!

    Best wishes,
    Tobias
    ?
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Image column sizing incorrect’ is closed to new replies.