Scaled images w/srcset

  • Resolved cudak888

    (@cudak888)


    3 years, 10 months ago

    I’m presently working on a site using Modula for thumbnail-style galleries. The images in these galleries are around 1500×1000 at full size, as I want the full-size lightbox images to be as crisp as possible. An example from the site is linked here.

    However, despite having a specific thumbnail size available to accommodate the smaller gallery photos, Modula’s code keeps pulling the full-size image. The HTML for one of the images reads as follows:

    <img class="pic mwl-img lazyloaded" data-valign="middle" data-halign="center" alt="" data-full="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg" data-src="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg" data-caption="" data-source="modula" src="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg" mwl-index="1" style="inset: 0px auto auto -45.089px; width: auto; height: 180px; margin: 0px; max-width: 999em;">

    Both the data-full, data-src, and src all point to the full-size image, and there’s no srcset in sight. I also added $0.currentSrc in Chrome’s developer tools and confirmed that the images being used by Modula are the full-size 1500×1000’s being resized to 270×180 and cropped to 180×180.

    Am I missing something? Seems like a gallery plugin should definitely be using srcset for page speed improvement. Lazy loading (which is enabled only on the linked gallery, not any others on the page) improves load times a bit, but definitely not by much.

    • This topic was modified 3 years, 10 months ago by cudak888.
    • This topic was modified 3 years, 10 months ago by cudak888.

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

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi @cudak888,

    Thank you for reaching out!
    This is weird behavior – it should not use the full size image for thumbnails. Modula is designed to resize those images based on the Thumbnail Size entered in the gallery’s General Settings: https://modula.helpscoutdocs.com/article/210-thumbnail-size

    It may be an incompatibility with another plugin. Could you please install this plugin: https://www.ads-software.com/plugins/health-check/ ?
    After you install and activate the above plugin it has a Troubleshooting mode which allows you to have a vanilla WordPress session, where all plugins are disabled, and a default theme is used, but only for your user – your visitors will still see the normal website.

    Go to its troubleshoot mode and activate only this plugin and see if the same issue happens with a default WordPress theme (Twenty Twenty for example) and no other plugins.
    Please let me know how it goes!

    Regarding srcset, we are aware of this and have it on our roadmap to implement.

    Warmly,
    Mihaela

    Thread Starter cudak888

    (@cudak888)

    Dear Mihaela:

    It appears as if I erred on one point, as the thumbnail size had been set to 500 (on the particular gallery listed here). However, I’ve changed it to 240, to match up with the “gallery-240” image size I’ve generated for the site (240×0). No difference on the front end according to the Inspector or PageSpeed. Also cleared the browser cache just in case.

    I have a duplicate of the site running locally on XAMPP, so I turned off all plugins (minus Modula), created a test page with this specific gallery via shortcode (the bike page is a CPT; I didn’t want to modify Twenty Twenty for the test), set the thumbnail size to 240 on said gallery, and flipped on the Twenty Twenty theme.

    Same result – Modula is loading the full size images.

    Any ideas?

    -Kurt

    • This reply was modified 3 years, 10 months ago by cudak888.

    Hi Kurt,

    Thank you for explaining!
    I just tried this on my end and the thumbnails appear to be resized as they should according to the thumbnail size (I have set it up to 240).
    You can see the test gallery here.
    This leads us to believe it may be something that is interfering with Modula. Can you please send me a list of your plugins and the theme? And settings from Meow Lightbox and Modula please. We will try to replicate this on our end.

    In the meantime, we recommend using the lightbox from Modula if you are looking to display full size images in the lightbox and resized, smaller ones in the thumbnails. This way possible conflicts are avoided.
    Thank you for understanding!

    Warmly,
    Mihaela

    Thread Starter cudak888

    (@cudak888)

    Dear Mihaela:

    Interesting. I’m a bit tied up this week, but I’ll gladly send the list and settings in a few days.

    -Kurt

    Thread Starter cudak888

    (@cudak888)

    Dear Mihaela:

    I was going to post the list of plugins I have on the site, but I’ve been able to reproduce it on a clean WP install with only Classic Editor and Modula running.

    In order to serve the images from the “media” subdomain, I have the upload_url_path on the site set to “https://media.bikesharemuseum.com&#8221; for all the photos on the site.

    When the upload_url_path is set to said subdomain, the srcset isn’t written in the code. When no upload_url_path is defined, as default, Modula’s srcset works as intended.

    I tried this for a brief minute on the live site, and then reproduced it on my local, clean, WordPress test install w/Twenty Twenty:

    1. I uploaded six images to the test site that are also shared with my live site.
    2. I created an all-new Modula gallery with these six images, and the thumbnail size set to 150.
    3. I dumped the gallery into a clean test post, and the the 300×300 versions came up in the src as they should.
    4. I then went into …wp-admin/options.php ant set the upload_url_path to https://media.bikesharemuseum.com.
    5. Checked the inspector; src now defaults to the full-size image.

    Let me know your thoughts, and if you still want the plugin list and lightbox settings from the site, even though it seems to be independent of it. The theme, FYI, is a heavily modified version of Bootstrap v.3 Basic.

    -Kurt

    Hi Kurt!

    Thank you for explaining so thoroughly – we highly appreciate it!
    No, I will no longer be needing that extra information.
    I went ahead and opened a ticket regarding this so our dev team can investigate and fix in one of our next updates.
    You can follow the issue here: https://github.com/WPChill/modula-lite/issues/475

    Thank you again and we apologize for the trouble!

    Warmly,
    Mihaela

    Thread Starter cudak888

    (@cudak888)

    Glad to know it wasn’t me screwing up the site code again. Thank you so much!

    ??

    Thread Starter cudak888

    (@cudak888)

    Dear Mihaela:

    I’m opening this up again as I just installed 2.5.0, which indicates that the srcset problem has been fixed for alternate URL paths.

    Unfortunately, I’m still running into issues. Here’s the public version of the page running 2.5.0: https://bikesharemuseum.com/bikes/2017-ofo-fuji-ta/

    The back-end code does appear to be detecting the various sizes, unlike before:

    <img class="pic mwl-img lazyloaded" data-valign="middle" data-halign="center" alt="" data-full="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg" title="" data-src="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg" data-caption="" data-source="modula" srcset="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg 1500w, https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2-300x200.jpg 300w, https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2-768x512.jpg 768w, https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2-1200x800.jpg 1200w, https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2-240x160.jpg 240w" sizes="(max-width: 1500px) 100vw, 1500px" mwl-index="1" src="https://media.bikesharemuseum.com/06-12-2019-ofo-dallas-2.jpg" style="inset: 0px auto auto -45.089px; width: auto; height: 180px; margin: 0px; max-width: 999em;">

    According to Chrome’s inspector, $0.currentSrc is still referencing the full-size image. Note that it’s not picking up a 240×180 or 240×160 (some of these pictures are 16:9, not 4:3) sized image.

    I checked the gallery setting and noticed the Image Size was set to “Custom,” so I set it to the Gallery-240 size I referenced earlier and re-saved the gallery.

    It doesn’t stick. The image size in the settings reverts to “Custom.”

    I decided to try a new gallery instead. One using all 240×180 images. Again, Modula defaulted back to “Custom,” on the back end. However, the images didn’t even show up on the front end for me. When I checked the inspector, I found very interesting code, as follows:

    <img class="pic mwl-img" data-valign="middle" data-halign="center" alt="" data-full="https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2.jpg" title="2021-01-03-Stow-A-Bike-2" width="240" height="180" src="https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-240x180.jpg" data-src="https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-240x180.jpg" data-caption="" srcset="https://media.bikesharemuseum.com/-. 240w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-300x225.jpg 300w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-768x576.jpg 768w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-1200x900.jpg 1200w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2.jpg 1500w" sizes="(max-width: 240px) 100vw, 240px" data-mwl-img-id="2401" style="inset: 0px auto auto -29.336px; width: auto; height: 179px; margin: 0px; max-width: 999em;" mwl-index="1">

    Note the blank srcset for the 240w entry. I’ve verified there is a https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-240x180.jpg publicly accessible in the uploads directory.

    Then, if I change the gallery to use the default thumbnail size:

    <img class="pic mwl-img" data-valign="middle" data-halign="center" alt="" data-full="https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2.jpg" title="2021-01-03-Stow-A-Bike-2" width="300" height="225" src="https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-300x225.jpg" data-src="https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-300x225.jpg" data-caption="" srcset="https://media.bikesharemuseum.com/-. 300w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-768x576.jpg 768w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-1200x900.jpg 1200w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2-240x180.jpg 240w, https://media.bikesharemuseum.com/2021-01-03-Stow-A-Bike-2.jpg 1500w" sizes="(max-width: 300px) 100vw, 300px" data-mwl-img-id="2401" style="inset: 0px auto auto -29.336px; width: auto; height: 179px; margin: 0px; max-width: 999em;" mwl-index="1">

    So, if anything, even though the back end’s dropdown indicates “Custom,” the function does seem to be working at least, but the correct image file name isn’t being generated. At least, this is the case for the new, from-scratch gallery.

    Any insights as to what’s going on?

    -Kurt

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Scaled images w/srcset’ is closed to new replies.