Support

Home Forums Event Espresso Premium Serve scaled images (2)

Serve scaled images (2)

Posted: October 1, 2018 at 9:21 pm

Viewing 16 reply threads


lupineart

October 1, 2018 at 9:21 pm

Hey Guys,

Josh replied to me on this post before: https://eventespresso.com/topic/serve-scaled-images/

I didn’t get anywhere with the developer of the theme (divi). I don’t have access to the support.

Can I share the code as Josh mentioned and see if this is something fairly easily resolved?

Thanks, Derek


Tony

  • Support Staff

October 2, 2018 at 4:23 am

Hi Derek,

You can send a copy over to support[at]eventespresso.com and we’ll take a look.

However, just to note we don’t provide support for other plugins (or themes) so whilst we are more than happy to take a look, if it’s not a simple fix or could cause further issues you will need to work with Divi’s support or a developer familiar with the theme.


lupineart

October 2, 2018 at 7:23 am

I totally understand, Tony. I emailed you. Thanks for your attempt, I really appreciate it.

Derek


Tony

  • Support Staff

October 3, 2018 at 12:49 pm

Ok, for this output: https://lupineart.com/classes/

You can fix that by copying content-espresso_events-thumbnail.php from /event-espresso-core-reg/templates/Espresso_Arabica_2014 into your themes root directory (you should probably create a child theme for these customizations).

Then change line 8 to use the thumbnail image:

if ( $featured_img = wp_get_attachment_image_src( $img_ID, 'thumbnail' )) :

You’ll then get the thumbnail on the event lists.

For the single event output, e.g: https://lupineart.com/events/pottery-wheel-practice/

You can edit the single.php template and add something like: https://gist.github.com/Pebblo/d202f048fd159b911db6a55f2eaf1f83#file-single-php-L39-L46

That should output thumbnails for EE events.


lupineart

October 3, 2018 at 2:49 pm

Wow, thanks Tony, I really appreciate that. I’ll have a go at it.

Question – what is the thumbnail size? I think I the images set at 100×200 (approx) using css. Can I indicate the size in that code instead? Or is that not a good idea?

Thanks,

Derek


lupineart

October 3, 2018 at 9:09 pm

Hi Tony,

I followed your instructions for the first part for: https://lupineart.com/classes/

First off, the file was in a different directory (maybe I didn’t grab the right one?)

/wp-content/plugins/event-espresso-core-reg/public/Espresso_Arabica_2014/content-espresso_events-thumbnail.php

Second, I made the change, but it just removed the image altogether. https://www.dropbox.com/s/rk6xcz6xoerqyxj/Screenshot%202018-10-03%2019.59.29.png?dl=0

I removed the css that was reducing the size of the feature img width to 150 in the event list (to remove from the equation), but the thumbnail still didn’t show. When deleting the content-espresso_events-thumbnail.php from the child theme directory, the feature images went back to default (quite large).

.classes-page img, .type-espresso_events img {
    max-width: 150px !important;
    float: left !important;
    margin: 0 20px 0 0 !important;
}

What do you think?

Thanks,

Derek


Tony

  • Support Staff

October 4, 2018 at 4:56 am

First off, the file was in a different directory (maybe I didn’t grab the right one?)

No, thas the correct file, my apologies.

Second, I made the change, but it just removed the image altogether.

Hmm, strange. I’m using that file on a site with your theme and it works.

These are the files I’m using: http://take.ms/y12Hb

If you place those in your child theme does it work then?


lupineart

October 4, 2018 at 12:59 pm

Hey Tony,

I placed your file in the child theme directory and that seemed to work just fine, so I must have done something wrong first time around. Thank-you.

2 questions relating to this:

1 – Can we change the thumbnail size of that event list feature images (and individual event pages) only to 150×100 with css or something easy?

2 – Do you have a suggest on how to better display the images/classes on mobile? See s/s here: https://www.dropbox.com/s/2zl925ineup563h/Mobile%20-%20class%20listings.jpeg?dl=0

If these are beyond you scope, it’s all good, I’ll figure it out eventually.

Thanks so much…

Derek


Tony

  • Support Staff

October 5, 2018 at 7:46 am

Question – what is the thumbnail size? I think I the images set at 100×200 (approx) using css. Can I indicate the size in that code instead? Or is that not a good idea?

Default thumbnail size is 150×150 but themes/plugins can override the sizes.

The size set by your CSS is max-width: 150px (height will automatically calculate) and that’s the same size your image is loading at (which is ideal).

You can change the size using CSS, making images smaller is fine, making them bigger can cause them to look grainy.

1 – Can we change the thumbnail size of that event list feature images (and individual event pages) only to 150×100 with css or something easy?

You can, but 150×100 is going to squash the image a litte, may I ask why you want that specific size?

2 – Do you have a suggest on how to better display the images/classes on mobile? See s/s here: https://www.dropbox.com/s/2zl925ineup563h/Mobile%20-%20class%20listings.jpeg?dl=0

It is outside the scope of support, but I can point you in the right direction. You’re custom CSS is doing that and because its using !important is hard to override. Right now you have this:

.classes-page img, .type-espresso_events img {
    max-width: 150px !important;
    float: left !important;
    margin: 0 20px 0 0 !important;
}

Change that to:

.classes-page img, .type-espresso_events img {
    max-width: 150px;
    float: left;
    margin: 0 20px 0 0;
}

So its not !important anymore and won’t override all other CSS styles applied regardless of specificity.

Then add something like this:

@media only screen and (max-width: 480px) {
    .classes-page img, .type-espresso_events img {
        float: none;
    }
}

Which is a media query to stop the img being floated on smaller screens (the text will then display below).


lupineart

October 5, 2018 at 10:05 am

Thanks a million man, I really appreciate it. This is fantastic. Page load speed just clocked 1.6sec, way down from the 4-6sec it usually does. And the full sized images are being pulled when sharing (fb, txt, etc.).

Thanks Tony…


lupineart

October 5, 2018 at 10:06 am

Oh – I and I was interested in the 100×150 only because all of my feature images are 1200×800 so wanted to keep the same aspect ratio…


Tony

  • Support Staff

October 5, 2018 at 10:13 am

You’re most welcome, I’m glad it helped 🙂

WRT the image dimensions, your thumbnails have likely already been cropped to fit 150×150 anyway.

For example:
https://lupineart.com/wp-content/uploads/2018/07/Clay-mugs.jpg
https://lupineart.com/wp-content/uploads/2018/07/Clay-mugs-150×150.jpg


lupineart

October 15, 2018 at 11:36 am

Hi Tony,

This is all looking great. Just one thing that changed since we did this, can you tell me how to remove the redundant title?

https://www.dropbox.com/s/ykohmzts8x07vgx/Screenshot%202018-10-15%2010.36.20.png?dl=0

Thanks,

Derek


lupineart

October 15, 2018 at 12:41 pm

Also, Tony, I uploaded a new feature image for an event and it shows like this in the media library:

https://www.dropbox.com/s/3c6h0ontrc9hazq/Screenshot%202018-10-15%2011.37.14.png?dl=0

Although it looks like everything is OK on the front-end, I’m not sure if this is going to create a mess somehow going forward. It seems to be it only appears chopped up like this in the media library. What do you think?

https://lupineart.com/events/clay-practice-bird-feeders-wall-tiles/

Thanks,

Derek


Tony

  • Support Staff

October 16, 2018 at 4:04 am

This is all looking great. Just one thing that changed since we did this, can you tell me how to remove the redundant title?

In single.php on line 43 change the_title_attribute() to the_title_attribute( 'echo=0' )

That should remove the additional title.

Also, Tony, I uploaded a new feature image for an event and it shows like this in the media library:

I don’t remember seeing anything like that before, but looking at all of the images for that upload:

https://lupineart.com/wp-content/uploads/2018/10/

They all look correct, is it only happening for that image or any image you now upload to the site?


lupineart

October 16, 2018 at 10:08 am

Thanks Tony. Title fixed per your instructions.

The image seems to be displaying in the media library just fine now, I don’t get it. Oh well, nothing seems broken!

Thanks again…


Tony

  • Support Staff

October 17, 2018 at 5:39 am

You’re most welcome.

The image may possibly have been some corrupt cache that’s now cleared, either way, I’m glad it’s working.

Viewing 16 reply threads

The support post ‘Serve scaled images (2)’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso