Archived topic
Image sizes on homepage too large
3 replies · Started by Laura on July 31, 2021
I am having trouble changing the container size on my homepage to match the size of the photos rather than the other way around. I do not want to resize the images to fit the aspect ratio they are currently at (369 × 308px). I want them to remain at the 600x500 that I have set them at but at the moment this means that the images are too large for the container and are causing issues with loading speed. The images are being pulled to the front page via wp-show posts if that makes a difference. Thanks
Hi there,
in the WP Show Posts list, have you set the Width and Height attributes ? If you have them can you remove them. The WP Show Posts will output the src-set images for the browser to select from.
This assumes you do have better size images that fit the requirements though.
Let me know.
I have set the height and width because that's the size I would like them to be on the homepage. Is there a better way to change these attributes so that they match the container size?
Hi there,
I have set the height and width because that’s the size I would like them to be on the homepage. Is there a better way to change these attributes so that they match the container size?
You can keep the WPSP's image height and width field empty and assign the sign through custom CSS.
Example:
/* size on desktop and small tablets */
@media(min-width:769px){
.wp-show-posts-image {
height: 200px;
width: 300px;
}
.wp-show-posts-image img {
object-fit: cover;
}
}
/* size on mobile */
@media(max-width:768px){
.wp-show-posts-image {
height: 400px;
width: 500px;
}
.wp-show-posts-image img {
object-fit: cover;
}
}After this, you can consider registering new image sizes for mobile (if the default generated sizes are inadequate), and then regenerate the image for the newly registered image sizes.
