|
Pim Stumpel
|
March 31, 2016 at 4:06 am
Hi!
I am working on a grid view with events. Now i read some other support tickets and understand the grid originally gets the size from the Wp-thumbnails settings. However i am using a woocommerce shop on my website as well. The woocommerce shop get’s it thumbnail sizes from the wp-thumbnails settings as well.
So the problem for me is, if i change the wp-thumbnails settings for Event espresso, then my thumbnails in woocommerce will change as well (which i don’t want).
I also read that i could use css to make the EE_grid use the original size of the image and tried using:
.ee_grid_box img {
width: auto;
height: auto;
}
But when i add this code to my theme custom css, the image get’s even smaller instead of bigger. It get’s like 50x50px instead of 808x506px (which is the original size of the image and is too big of course but still, it is not working)
I can make the featured image as big as i want, so i can make it 404x253px for example ofcourse. But the code “auto” above is not working.
So i was wondering if you have any other options for me, to me sure that the Event grid just takes the size of the original image. That way i just make sure all my featured images are the same sizes when i upload them and problem solved:)
Hope you can help!
Cheers,
|
|
Tony
|
March 31, 2016 at 6:53 am
Hi Pim,
Can you link me to the page you are working on please?
If the thumbnail size is currently set to 50px by 50px then the grid template will pull the image in at that size. The CSS then applied to that image can not make it much bigger without distorting the image, so:
.ee_grid_box img {
width: auto;
height: auto;
}
Sounds like its working but its now showing the image at the ‘correct’ size it should be rather than being forced bigger by the grid view template default CSS.
One option is to load a custom template for the grid view template and set the size of the image it should load in that custom template. Do you know the size of the image you want to use?
|
|
Pim Stumpel
|
March 31, 2016 at 9:55 am
Hi!
Thank you for the quick reaction! Sounds exactly correct what you are saying. So we need to make a custom size indeed. I would like to have the grids the size of 400x250px. Could you tell me how i can load in a “custom template” or change the existing template?
Cheers,
|
|
Pim Stumpel
|
March 31, 2016 at 12:52 pm
I just found this in another topic, is this what you mean? And if so, how do i need to change the file to make sure it is saved with future updates?
The topic said to do this:
“Hi Lisa,
There is. If you look in the template file espresso-grid-template.template.php you’ll see the $feature_image_url variable set around line 26 (in the current version)
You can change it to something like this:
$feature_image_url = $post->EE_Event->feature_image_url(array(300,500));
The above change makes for an image width of 300 and a height of 500. You’ll need to adjust those values to match the image sizes you are using.
Along with that, you can add the following to your custom stylesheet to override the CSS:
.ee_grid_box img {
height:auto !important;
}”
cheers
|
|
Tony
|
March 31, 2016 at 1:18 pm
Hi Pim,
Yes that’s the change you need to make.
If you place the espresso-grid-template.template.php file within your themes root directory EE will use that template in place of the default.
If you are not using a child theme I would advise creating one to do this:
https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/
This line:
$feature_image_url = $post->EE_Event->feature_image_url(array(300,500));
feature_image_url() takes an array with width and height (in that order) so for your images you can use:
$feature_image_url = $post->EE_Event->feature_image_url( array( 400, 250 ) );
(or the other way around if portrait)
|
|
Pim Stumpel
|
April 2, 2016 at 3:30 am
Sorry for the late reply, i was traveling and now got the chance to try it out.
It worked PERFECTLY thank you!!
I changed the $feature_image_url variable set and filled in the new code, and now it looks awesome!
Thank you so much for your help!!:)
You just made my day:)
|
