Change Image height in Photo view

[allegrafalsecreek]

How can I change the Image height in photo view to make it shows the entire image not cropped?

[Geoff B.]

Good evening Michael and welcome to the Events Calendar Support forum!

Thank you for reaching out to us.
I would love to help you with this topic.

As a first step, could you please provide us with your complete system information in a private reply using the instructions found in the following link?

https://theeventscalendar.com/knowledgebase/sharing-sys-info/

The image height in the photo view will depend a lot on the theme you are using (and its CSS rules). In other words, it is a bit different on every site.

With that in mind, once I get a better look at your website, I will be able to offer better counsel on the changes to perform to achieve your goal.

Depending on the case, I will either recommend CSS or tweaking the photo view via a template override.

You might want to read our Themer’s guide to get a sense of how that works.

Hang in there!

Geoff B.

[allegrafalsecreek]

This reply is private.

[Geoff B.]

This reply is private.

[allegrafalsecreek]

Hi Geoff,
I’ve read the Themer’s Guide but it’s not very clear to me how to do that.
Could you please give me a detailed walk-through where and how to write the code for override?
Thank you!

[Geoff B.]

Good evening Michael,

Sure thing:

1. Locate the file that is responsible for what you want to change.

   In your case, you should look at the Photo view section under https://theeventscalendar.com/knowledgebase/themers-guide/#PRO

2. Make a copy of that file (in your case /wp-content/plugins/events-calendar-pro/src/views/pro/photo/single-event.php)
3. Open that file with a text editor and tweak it (in your case, find “medium” and replace it with “full”)
4. Look at the comment section at the top of that file to know where to place your edited file. In your case that is [your-theme]/tribe-events/pro/photo/single-event.php
5. Create the proper paths in your theme’s directory
6. Upload your modified file there

Let me know how that goes.

Best regards,
Geoff B.

 

[allegrafalsecreek]

Hi Geoff,
Thank you so much!
Now it is showing full image but it’s squeezed all in same height.
Is it possible to make the image container height flexible so it’s not distorted?
I want to make it exactly like the demo (https://wpshindig.com/events/photo/), shows full height image, not cropped, not distorted.

[Geoff B.]

Good afternoon Michael,

I am glad you were able to make progress.

The squeezed image is actually caused by a CSS rule in your WordPress theme.

Try adding the following CSS rule to your style.css file or in your Custom CSS metabox:

.tribe-events-photo .tribe-events-event-image {
padding-bottom: 100% !important;
}

Let me know how that goes.

Best regards,
Geoff B.

[allegrafalsecreek]

Thank you Geoff,
After adding the css, it displays the full image for those with the same width and height but the image with shorter height is stretched and the image with taller height is still squeezed. All the images are in same height still.
Is there a way to keep the ratio and display the full image? So I don’t want them to be all same height, I want it to be flexible height depends on the image size.

• This reply was modified 8 years, 4 months ago by allegrafalsecreek.

[Geoff B.]

Good evening Michael,

The simple answer to your question is most probably.
As previously stated, what is going on is that your theme is throwing a few CSS rules in the way of achieving that goal.

Could you please send me a copy of the latest version of your WordPress theme AND child theme via a link to a .zip file link (stored Dropbox or Google Drive) so that I can run some tests on my end ? I recommend a private reply for that purpose.

Please ensure you are using the latest files as found on your actual website.
This way I will get access to any updates or customizations you might have made.

I think this will be faster than our current approach provided how your theme is behaving.

Have a great day!

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts