M
MBM77
New Member
Hello everyone,
I'm very new to both wordpress and elementor in general and I've run into an issue designing my blog with elementor. I've designed several pages of my website with the posts widget, which has a variety of settings. One of those settings is image ratio, which I've changed on several pages depending on the number of posts a specific post widget is set to display. For example on my main page I have two post widgets, the first set to display two posts with an image ratio of 0.8, while the second is set to display three posts with an image ratio of 1,25.
The issue is that when the page loads, for a split second I can see the browser crop the featured post image down to the image ratio set in the elementor post widget settings. Another strange observation is that if I set the image dimensions to medium large (768x0) or medium (300x300),wordpress serves up either the 800x1200 or 683x1024 version of the image respectively. Regardless of what image size I choose in elementor, the browser still has to crop the image considerably.
My question is, how do I know exactly what size images I should be using for the various image ratios set in my different post widgets?
One thought I've had is to try and calculate the optimal height and width for each widget in the following manner:
For my first post widget displayed on my homepage showing 2 posts:
My main container width is set to 1200px and the columns cap is set to 60. This means that there are 1140/2=570 pixels available (in terms of width) for each image. If my image ratio is set to 0.8, then the ideal height for each image would be 570x.8= 456 px. So the ideal dimensions for these images would be 570x456.
Is this line of reasoning correct? If so, I assume I would have to calculate the various ideal dimensions for images in all of my post widgets.
The issue then becomes setting up wordpress to automatically generate these image sizes (either using the media image settings or modifying the functions php file according to some tutorials I've seen). As best I understand this, wordpress automatically generates additional image sizes, but it keeps the original dimensions of your picture (except for the 150x150 thumbnail),so I would need to have wordpress automatically generate the exact image sizes, thereby cropping the original uploaded picture.
Perhaps my logic on all of this is way off, like I said I'm new to this world and I only have very basic coding knowledge in html and css. Someone please enlighten me!
Here is the link to my website where you should be able to observe the issue I'm referring to: tomaslesceptic.cat
Many thanks!
Brent
I'm very new to both wordpress and elementor in general and I've run into an issue designing my blog with elementor. I've designed several pages of my website with the posts widget, which has a variety of settings. One of those settings is image ratio, which I've changed on several pages depending on the number of posts a specific post widget is set to display. For example on my main page I have two post widgets, the first set to display two posts with an image ratio of 0.8, while the second is set to display three posts with an image ratio of 1,25.
The issue is that when the page loads, for a split second I can see the browser crop the featured post image down to the image ratio set in the elementor post widget settings. Another strange observation is that if I set the image dimensions to medium large (768x0) or medium (300x300),wordpress serves up either the 800x1200 or 683x1024 version of the image respectively. Regardless of what image size I choose in elementor, the browser still has to crop the image considerably.
My question is, how do I know exactly what size images I should be using for the various image ratios set in my different post widgets?
One thought I've had is to try and calculate the optimal height and width for each widget in the following manner:
For my first post widget displayed on my homepage showing 2 posts:
My main container width is set to 1200px and the columns cap is set to 60. This means that there are 1140/2=570 pixels available (in terms of width) for each image. If my image ratio is set to 0.8, then the ideal height for each image would be 570x.8= 456 px. So the ideal dimensions for these images would be 570x456.
Is this line of reasoning correct? If so, I assume I would have to calculate the various ideal dimensions for images in all of my post widgets.
The issue then becomes setting up wordpress to automatically generate these image sizes (either using the media image settings or modifying the functions php file according to some tutorials I've seen). As best I understand this, wordpress automatically generates additional image sizes, but it keeps the original dimensions of your picture (except for the 150x150 thumbnail),so I would need to have wordpress automatically generate the exact image sizes, thereby cropping the original uploaded picture.
Perhaps my logic on all of this is way off, like I said I'm new to this world and I only have very basic coding knowledge in html and css. Someone please enlighten me!
Here is the link to my website where you should be able to observe the issue I'm referring to: tomaslesceptic.cat
Many thanks!
Brent
