Thumnail Image Size in List View

[bsc2172]

We have recently installed the Events Calendar Pro on our website.
http://www.booksigningcentral.com/events/upcoming/?tribeHideRecurrence=1
On the calendar page, when in “VIEW AS LIST” (or any other view for that matter), how do we make the thumbnail images to have a max height of 200 pixels. Right now they are too large against the excerpt text. Thank you in advance.

[Barry]

Great question!

There are a few ways you might tackle this and it is worth considering if you would rather squash the image and lose the aspect ratio (which might give it a slightly odd appearance), scale it down (which would mean the width would vary for each image of a different size) or hard crop it (and thus potentially lose parts of the image).

Whichever approach works best for you, know that our own post thumbnail/featured image implementation really just builds on that already offered by WordPress.

With that in mind, our Themer’s Guide is a great starting point as it describes the basics of overriding and customizing templates. The list/single-event.php template is likely to be of particular interest here, especially this line of code from within it:

<?php echo tribe_event_featured_image( null, 'medium' ) ?>

Note the second parameter which is used to specify the ideal size. This can be changed and you can also register completely new sizes for WordPress to use – or alter existing sizes by changing the target dimensions – details here and here. Beyond that, you could potentially also do this via CSS with rules like:

.tribe-events-event-image img { height: 200px !important }

(Which you might place inside a custom tribe-events.css stylesheet … again, details of setting this up are in the Themer’s Guide 🙂 )

I hope that helps!

[bsc2172]

Where is the custom tribe-events.css file? Can’t find it.

[bsc2172]

Or , what should we change the following to, to make the thumbnail images be 200 in height without any cropping?

<?php echo tribe_event_featured_image( null, ‘medium’ ) ?>

[bsc2172]

Why is there not an option inside this plugin that we purchased for $65. It seems we pay 65 for this Events Calendar, now we have to pay someone who knows coding how to fix it and to make it display properly on our website.

[Barry]

Where is the custom tribe-events.css file? Can’t find it.

You would need to create it as covered in the Themer’s Guide (and it looks like you have now done so – glad you got there 🙂 ).

Or , what should we change the following to, to make the thumbnail images be 200 in height without any cropping?

<?php echo tribe_event_featured_image( null, ‘medium’ ) ?>

Well, if you want to follow this approach then you would need to follow the steps detailed in my last reply (about changing the registered featured image sizes, or creating a new size and using that). Do bear in mind though that you might then need to adjust or remove some or all of your custom tribe-events.css rules if you decide to follow this approach.

Why is there not an option inside this plugin that we purchased for $65. It seems we pay 65 for this Events Calendar, now we have to pay someone who knows coding how to fix it and to make it display properly on our website.

I’m sorry you’re having a hard time here – that’s not our goal. However, there are already a wide range of options and settings and the reality is it simply isn’t practical to add a setting for every possible item that site owners might wish to customize (and, of course, that would lead to a highly complex and confusing admin environment).

I do think it’s a little unfair to suggest it doesn’t display properly if you don’t pay someone who knows coding to ‘fix’ it. Out of the box the presentation is generally well received (we see a lot of sites, including some by very technical devs/designers, and few have changed the default views substantially) and we’ve made some reasonable assumptions such as using the medium featured image size in list view that work in most cases.

That may not be the perfect fit you need here but at the same time if you want to take things to the next level, as it were, then yes – you do need to spend a little time researching how things work and making some (usually minor) code tweaks.

I hope that clarifies things (and as I don’t think there is too much more we can offer here I’ll go ahead and close this thread).

[Author]

Posts