- This topic has 14 replies, 3 voices, and was last updated 4 years, 4 months ago by David.
January 29, 2019 at 3:28 pm #796049Mark
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, MarkJanuary 29, 2019 at 6:17 pm #796116TomLead DeveloperLead Developer
WordPress itself uses
srcsetto 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.comJanuary 30, 2019 at 3:20 am #796351Mark
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, MarkJanuary 30, 2019 at 4:57 am #796406DavidStaffCustomer Support
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.January 30, 2019 at 6:18 am #796464Mark
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, MarkJanuary 30, 2019 at 6:38 am #796474DavidStaffCustomer 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:
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.January 31, 2019 at 1:03 am #797356Mark
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, MarkJanuary 31, 2019 at 3:42 am #797432DavidStaffCustomer 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.January 31, 2019 at 6:05 am #797520Mark
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, MarkJanuary 31, 2019 at 9:03 am #797841DavidStaffCustomer 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.February 2, 2019 at 3:07 am #799385Mark
Thanks David, your support is greatly appreciated. Cheers, MarkFebruary 2, 2019 at 3:07 am #799386Mark
Resolved!February 2, 2019 at 3:48 am #799408DavidStaffCustomer Support
You’re welcome!February 2, 2019 at 8:12 am #799638Mark
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, MarkFebruary 2, 2019 at 8:31 am #799659DavidStaffCustomer Support
Any chance you can start a new topic where you can add a Site URL so we can take a look.
- You must be logged in to reply to this topic.