- This topic has 10 replies, 3 voices, and was last updated 9 months ago by
David.
-
AuthorPosts
-
September 9, 2019 at 8:43 pm #1005365
Kim
Hi, I have some basic question concerning images:
1. Should I change the image sizes within the WordPress Media Settings (they are set to the default ones at the moment)? If yes to what sizes?
2. What should be the maximum width for Hero Images at upload?Many thanks in advance!
September 10, 2019 at 4:11 am #1005571David
StaffCustomer SupportHi there,
these are the basic rules i generally apply:
1. Original Image should be large enough for Hero Images:
Full Width then 1920px usually suffices as it covers the largest commonly used device screen.
Contained Width then use the Container Width set in the Customizer.2. Large size
For a 1200px container then 1200px will do.
If the site uses side bars throughout of 25% that leaves the content at 800px. So 800px will do.3. Medium size
Generally used in Columns, Blog grid. So divide up your container by the commonly used number of columns.
e.g 1200px site, 3 columns on desktop. So 400px covers it. It also covers the larger size mobiles when the columns stack.
On tablet the columns also stack to 1 column so thats around 768px, which will be covered by the Large size of 800px.4. Thumbnail – generally leave this as 150px.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 10, 2019 at 8:27 pm #1006352Kim
Awesome π Thanks!
September 10, 2019 at 8:47 pm #1006362Kim
Hi David, sorry to bother you again. If I use sidebars only in the blog with a 1200px container, should I set large media to 800px or 1200px then?
BR!
September 11, 2019 at 2:51 am #1006549David
StaffCustomer SupportYes you can. The issue that creates is on your pages where you may have a 1200px wide image it will use the original full size image. But you can add new media sizes.
Add this PHP snippet:
add_action( 'after_setup_theme', function() { add_image_size( 'container-width', 1200 ); } );
And then use the Regenerate Thumbnails plugin to update any existing media. It will now add a new size so example:
Original: 1920px
Container Width: 1200px
Large: 800px
Medium: 400pxDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 11, 2019 at 7:26 pm #1007269Kim
Hi David,
thanks a lot. Super helpful π
Do you have any recommendations for Woocommerce images?
September 12, 2019 at 1:27 am #1007392David
StaffCustomer SupportBased on the 1200px example:
Thumbs: 400px – good for 3 column desktop and 1 column mobile.
Main: 600 – 800px – based upon Product Image Area Width set in the Customizer, default is 50% ( 600px )
Original: Double whatever main is if you want x2 zoom in your gallery ligthbox.Main thing with Woo is making sure all original images have the same aspect ratio. Preferably square images.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 13, 2019 at 10:56 pm #1009106Kim
Great! Thank you so much! π
September 14, 2019 at 4:44 am #1009226David
StaffCustomer SupportGlad to be of help.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 21, 2020 at 2:06 am #1247590Matthias
dumb question – but by 1200px – what does that mean for the media settings exactly?
1200×1200 ? As there are width and heigth to enter. This would be squared though. Or can i somehow make one value adjust in the same ratio? so e.g. a 2400×1200 becomes 1200×600 -> and not 1200×1200.Sorry – i don’t get those settings and the answer seems to be to trivial to be found in articles when i search π
April 21, 2020 at 4:55 am #1247737David
StaffCustomer SupportHi there,
the sizes you define for the medium and large thumbnails are the max-height and max-width.
Unlike the Thumbnail size these DO NOT crop the image. Instead they respect the aspect ratio of your original image.Example:
You upload an original landscape image of 2400px x 1200px
That original image has an aspect ratio of 50%.
You have set your Large image to max-width: 1200px and max-height: 1200px.
The large version of your image will be displayed as 1200px x 600px.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.