Support

December 9, 2019 at 4:56 am

Hi there,

The gird template defaults to use the ‘thumbnail’ image size and your site that’s set to be 150px by 150px. There is then some CSS within the add-on to make the images 200px by 200px, so as your images are smaller than that they appear blurred.

To fix this you can either create a custom template to use in the grid view template and alter the code used to set a larger size, or add some CSS to the size like this:

.ee_grid_box_v2 img {
    height: auto;
    width: auto;
    margin: 0 25px;
}

You can add that to Appearance -> Customize -> Additional CSS.

If you prefer to create a custom template let me know and I’ll post some additional details on how.

December 9, 2019 at 3:16 pm

I used the CSS code you recommended and it made the images smaller but not necessarily clearer.

Yeah, I see what you mean, the problem is the ‘original’ thumbnail image is blurred, see this example:

Thumbnail: https://newsite.csjthewell.org/wp-content/uploads/2019/12/Imagine-This-150×150.jpg

Original: https://newsite.csjthewell.org/wp-content/uploads/2019/12/Imagine-This.jpg

This actually has nothing to do with the grid add-on other than the fact that the add-on is loading the thumbnail version of the image (which is generated by WP when you upload the image, or ‘regenerate thumbnails’)

I also changed the elastic slider thumbnail image size for the theme to 200px wide hoping that would help, but it didn’t

It won’t, not unless your theme also regenerates the thumbnails when doing so.

The images I uploaded are 200px x 200px so if the add-on uses 200×200 you would think they would be clear.

Well, no, not if your site uses 150px by 150px for ‘thumbnail’ images it wont.

The add-on will load the 150px by 150px image created by WordPress when you upload the image and then that image will be forced up to 200px by 200px.

I am using a child theme and have made adjustments to the grid view and functions php files but none reference image sizes.

So you already have a copy of espresso-grid-template.template.php in your child theme?

If so you can alter the size by altering this line:

$feature_image_url = $post->EE_Event->feature_image_url();

Which should be around line 27.

Change that to:

$feature_image_url = $post->EE_Event->feature_image_url('full');

That should load the ‘full’ image from your site, which according to the above should be the 200px by 200px file.

Does it look better then?

December 10, 2019 at 1:55 am

It depends.

What exactly is loading slowly? The grid page above?

December 10, 2019 at 10:26 am

The home page loads more slowly but especially the pages with the grid view.

As far as I can tell, your home page loads a single event, loading a single event shouldn’t cause the page to slow down at all.

What type of hosting are you using?

If I click on refresh on one of those grid pages either in my computer browser or on mobile it gets hung up.

I just checked this and it happened to me, taking over 1.2 minutes to loads styles.css and 2.2min loading another CSS file. If this was simply an issue from loading EE’s events you’d see long load times for the page itself, not assets within the page (CSS/JS files).

There’s something else happening, nothing I’m seeing points to issues with loading EE events.

In addition, the dashboard will also get hung up and will not load to the point where I have to close the browser and log back in.

When loading just /wp-admin/?

Sounds like your server simply can’t handle the requests.

I ran one of the pages through GTMetrix and got a failing grade: https://gtmetrix.com/reports/newsite.csjthewell.org/UDz4oYD4. I have found that GT Metrix will give failing grade for images that are small. All of the images I have put on the site are below 100kb. The images for the events are around 60 kb so they shouldn’t be slowing down the site themselves.

Ok, so that is using the even gird page and that page is ~5MB to download.

The Stars-Sky-Cropped.jpg image being 1MB itself and your loading ~50 events on a single page, each of those has an image and they range from 40KB to 80KB, so say around 60KB x 50 = 3MB it all starts to mount up.

I’m on a 350MB connection and it takes my browser over 6 seconds to load the page.

In short, your loading a lot of resources on that page so yes, they are going to slow the page load but that doesn’t mean it due to the EE events themselves.

They mention leveraging browser caching as a way to improve the speed.

For images etc, you could, but its something you set up on the server. All your doing there is preventing the browser from redownloading the images on the next page view, it will need to do the exact same thing when you first open the page.

https://kinsta.com/blog/leverage-browser-caching/

I just know that the site is considerably slower and touchy now that the events are up.

I think you’re noticing it more simply because you now loading more events rather than the events themselves being the issue.

As an example, I am in Firefox and waited for over 1 minute for the dashboard to load. When it did, it was not in HTML text but just a list of links. I had to click refresh and then wait another minute for it to load properly.

When you say ‘the dashboard’ which specific page? Everywhere?

Finally, I am building the site in a subdomain and I’m not sure if that is impacting the loading speed i.e. will it be faster once the subdomain overwrites the main domain.

That shouldn’t make any difference at all.

So far, it looks like you need a better server and to either add some caching for pages like the grid output so that all of those events don’t need to be loaded on each and every request or load few events on single pages.

December 10, 2019 at 1:32 pm

Not with the current version, no.

You would need to load the events on separate pages and link them as it stands.