[Resolved] Responsive Image Plugin that works with WordPress Media Library?

Home Forums Support [Resolved] Responsive Image Plugin that works with WordPress Media Library?

Home Forums Support Responsive Image Plugin that works with WordPress Media Library?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #796049
    Mark

    Hello GP Forum,

    We are looking for a good plugin that can work with WordPress Media Library and deliver fully responsive images from 5k screens down to mobile devices. Does anybody have any recommendations on a great, fast plugin?

    If possible, it would be great if this could somehow plug in/work with WordPress’s Portfolio and the ‘Featured Image’ upload window. We have set the site up to upload both thumbnail and full screen images through the ‘Featured Image’ window but forgot that the images need to be fully responsive to make them load on all platforms as quickly as possible.

    Any help greatly appreciated. Thanks, Mark

    #796116
    Tom
    Lead Developer
    Lead Developer

    WordPress itself uses srcset to display different sized images at different resolutions.

    I’m not sure how you would integrate images large enough for 5k though. There’s likely a filter you can use, but I’m not familiar enough with srcset in WP to know for sure.

    It might be worth asking over on wordpress.stackexchange.com

    #796351
    Mark

    Hi Tom,

    Thanks for your reply. I am having a look over at wordpress.stackexchange.com to see if I can find anything that might work. Thanks for directing me to them.

    Can I ask if GP has its own code for showing different size Featured Images? If so, what are the defaults and could they be customised further to allow for the 4 and 5k images?

    Also, I assume I would first need to amend WP’s ‘Media Settings’ to allow the Media Library to load larger images in the first place. The maximum size is currently set to 1024×1024 pixels.

    Any help greatly appreciated. Cheers, Mark

    #796406
    David
    Staff
    Customer Support

    Hi there,

    on uploading WP stores and creates:
    Full, Large, Medium and Thumbnail sizes. Full is the original size which the image was uploaded. The other three are the ones you set in the Settings > Media. Note any changes to these will only apply to new images uploaded, any existing images will need to be regenerated using the Regenerate Thumbnails plugin.

    GP has a featured image resizer which is in the Customizer > Layout > Blog > Featured images where you can define archive and single post sizes. But this is solely for setting a fixed size for those images.

    You may want to review whether 5k is required. For example the 5k iMac’s default display resolution is actually 2560px. File sizes can get quickly out of hand when dealing with 5k images.

    #796464
    Mark

    Hi David, Thanks for your reply.

    That was an excellent point you made about most users on 5k iMacs only using the defualt resolution which is 2560px. Whew, I have been obsessed with ensuring my site is the highest quality possible but this has reassured me that setting it to run at 2560 width is a pretty safe bet.

    Just looking at how to set the site up in the best way possible (and in case someone did view the site on a 5k screen at 5100px). Obviously I want to avoid selecting the Elementor content widths to ‘Full Width’ on things like the header and footer and any page backgrounds. I have now changed the Elementor/Settings/Style ‘Content Width’ to 2560px. If I then try and change the Elementor ‘Content Width’ to ‘Boxed’ though, the maximum size I can select is 1600 (pixels?). How do I go about setting the site up so that all pages are displaying content at 2560px width on a 2560px width screen? What I want to avoid is the header/footer & background images stretching to full width on a 5k enabled screen – which makes the site look like someone has made a mistake.

    Thanks for elaborating on how WP uploads its media files too. Would you add some additional sizes to the Settings/Media area with code/a plugin? Lets assume the full image is 2560x? (and already uploaded), should I also add 1920x?, 1680x?, 1400x to cover the other screen formats above 1024px (the default)? I could then try and add some code so that the site auto-detects screen resolutions and serves these new image sizes responsively. Are you able to help with this at all too ie providing the code to do this and where to put it?

    Lots of questions there I know but any help greatly appreciated.

    Thanks, Mark

    #796474
    David
    Staff
    Customer Support

    In Elementor – the boxed container width slider is limited to 1600px but you can type in the size you require.

    Tom provides the PHP code required to add more image sizes here:

    https://generatepress.com/forums/topic/custom-crop-for-blog-index-featured-images/#post-357876

    Regenerate Thumbnails:
    https://en-gb.wordpress.org/plugins/regenerate-thumbnails/

    Generally the base media sizes are good enough for most builds and what with mobile device resolutions being so high now its rarely needed to add lower sizes to suit them.

    The times i would consider different sizes is if i have a particular design layout, say where a lot of images are displayed at a maximum size of eg. 400px. I then would add a size to suit this need.

    I would not be overly fussed with adding image sizes for in between states. Best to design around standard sizes particularly those your audience will be using.

    #797356
    Mark

    Hi David, Thanks for your reply and recommendations. It’s all very interesting and has given me a lot to think about.

    We are using the same image sizes frequently on the site ie large thumbnails for the galleries and large images for our full screen sliders – which will all be cropped and uploaded at a particular aspect ratio/size.

    If I add some additional sizes and use the plugin suggested to regenerate thumbnails, will this also regenerate the ones already done? If so, is there anyway to get rid of these before i use the plugin so I am not doubling up on content?

    Once the above is done, do you offer any support as far as delivering these through WP/GP Responsively ie so it detects screen size and then delivers the correct file size? If so, it would be great to have the code and instructions on how to set this up.

    Thanks again for all your help.

    Cheers, Mark

    #797432
    David
    Staff
    Customer Support

    Regenerating Thumbnails will only create the new sizes you set – so no duplication.
    These extra files only add weight to the database ( no concern there unless you have thousands of images ). On the front end the image will be output with the srcset links – the most appropriate sized image will be chosen based upon the container size it sits in.

    This doesn’t apply to images that are set as background images as they are loaded as CSS, and generally these are set to Cover which means they will always scale to fit the container as the screen scales.

    #797520
    Mark

    Hi David, Thanks for your reply and confirming how regenerate thumbnails works.

    Are you saying that either WP or GP actually will work in a responsive manner ie serving images optimised for the actual display size? I did see Tom mention that “GP serves images on the fly”. was this what he was referencing.

    Thanks, Mark

    #797841
    David
    Staff
    Customer Support

    WP handles all the srcset images.

    GP Serves images on the fly, would only be related to any changes you make to Feature Image sizes in the blog settings.

    #799385
    Mark

    Thanks David, your support is greatly appreciated. Cheers, Mark

    #799386
    Mark

    Resolved!

    #799408
    David
    Staff
    Customer Support

    You’re welcome!

    #799638
    Mark

    Hi guys,

    I thought I would post this here as it is a continuation of this thread.

    Following David’s advice, we decided to optimise the site for viewing on screens up to 2560px width. David explained how to change the widths/boxes from Full Screen to 2560px.

    However, for some reason we are finding things like the header and footer are still stretching to full screen. This is a problem for us because the logo is left aligned and the menu’s are right aligned. If this is viewed on a screen above 2560px – then the logo’s and menu’s get pushed to the extreme edges of the screen making for a poor UX. Also, we are having trouble getting the blog to push to 2560px. I have changed the Elementor/Settings/Style to 2560px.

    Does anyone have any ideas why this may not be working?

    Any help greatly appreciated. Thanks, Mark

    #799659
    David
    Staff
    Customer Support

    Any chance you can start a new topic where you can add a Site URL so we can take a look.

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.