Docs

[tparkmedia]

Hello yet again,

Searching through the forum have gotten me nowhere and now I think I’ve made changes that don’t apply to me.

I have my home page set with the Essential Grid Masonry Layout. The source are my posts. The featured images are all set to certain size which I though Masonry Layout would display but it is not. The images are blown up.

I will send my login credentials following this post.

THANK YOU SO SO MUCH

[tparkmedia]

This reply has been marked as private.

[Christian]

Hey there,

What do you mean “The featured images are all set to certain size”? I checked your images and they are low resolution that’s why it looks blown up. Please use higher resolution images. If the issue persists, try deactivate Jetpack.

Thanks.

[tparkmedia]

For example, re: “Korean Squash Porridge” post, the featured image size is 750 x 563. But the image that is displayed in a large window setting has a height of 667 pixels, which is larger than the original image. This is what I was referring to as far as “set to a certain size” and I think this is causing the images to look “blown up”.

I don’t know the width that is being displayed. With Google Developer Tool all I get is this: <div class="esg-entry-cover" style="visibility: visible; height: 667px; transform-style: flat;">

I want the image displayed to be no larger than the original image size.
And I want to keep the responsive-ness.

Thanks again.

[tparkmedia]

To clarify, large window size is from viewport size 1170, the image gets larger.

I’m using the Chrome Window Resizer tool to determine this.

[tparkmedia]

SOrry, that code is not the right one. I see the coding in Developer, but I have no idea how to change it.

My request remains the same: “I want the image displayed to be no larger than the original image size.
And I want to keep the responsive-ness.”

Sorry for the confusion.

Thanks.

[Rue Nel]

Hello There,

Thanks for updating in! I can see that you are using Jetpack plugin. You have enabled Photon module in Jetpack. This module caches your images which may have been the cause of your issue. And sometimes it has some problems loading the images. Please keep in mind that there are limitations in using Photon module. One of the limitations of photons:

No cache invalidations – currently the images are cached “forever”. 
If you want to “refresh” an image you will need to change the name of the image. 
Adding random query arguments, commonly known as cachebusters, will not work.

For further information, you can check it here: https://developer.wordpress.com/docs/photon/

For the time being, please disable Photon module and test your site again.

[tparkmedia]

Thanks for the informative response.

However, I disabled Photon module, cleared the cache and refreshed my page but it still shows the image size larger than the original image size.

So then I also deactivated Jetpack, cleared the cache again, refreshed again and still the issue remained.

Since I don’t think Jetpack is causing the issue, I’ve gone ahead and re-activated Jetpack. I’ve also re-enabled Photon module. Unless you want me to keep this deactivated for further testing, just let me know.

Any other suggestions greatly appreciated.

Thanks much!!!

[Rue Nel]

Hello There,

Thanks for updating in! I have deactivated the Photon module and test your site. please keep in mind that you have selected to display only one column for your grid. Please also take note that you did not add how wide is your grid. Most probably the width of the column is the width of the container of the grid. And since the images in the grid items is set to cover the whole column width, most likely, it will be stretched. If you want to prevent the images from being stretched out, it’s either you add some more columns or you set a maximum width of you grid.

To set a maximum width of the grid so that it will coincide with the image width and so that the images will not be stretch, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

div#esg-grid-1-1 {
    max-width: 750px;
    margin: 0 auto;
}

Feel free to change the maximum width if needed.

Hope this helps.

[tparkmedia]

Woohoo!!!

Rue Nel, you are awesome!!!!

You give very detailed and informative responses. I’m learning a lot thanks to you (and the team)! Then I don’t have to bug you guys so much. 🙂

[Rue Nel]

Hello There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[Author]

Posts