customising event calendar pro shortcode display

[flyingarts]

Hi folks – we’ve been using the Event Rocket shortcode plugin to handle displaying events in pages and posts. However we found out that they just recently stopped supporting it.

Now we know that Event Calendar Pro has shortcode functionality built in, but we chose Event Rocket because we could display a featured image thumbnail next to the event listing as opposed to the date.

For example this is what the events rocket shortcode looks like https://cloudup.com/cv6af7w-IBx

When we use yours – it’s really great except that it only displays the date see here http://flyingarts.org.au/using-the-events-built-in-shortcode/

1 – is there someway to show the image rather than the date to the left of the content?
2 – is there some way to show an excerpt in the shortcode?
3 – is there some way to display a ‘sorry no upcoming events’ message from the shortcode when there are no events coming up?

I look foward to your response.
Many thanks

[Geoff]

Hi @fliyingarts and welcome back to the forums. 🙂

Good question and, yes, it is possible to customize the List Widget layout. You can do that with a template override. That’s covered here in our Themer’s Guide, but basically boils down to this:

• Make a copy of the widget template. It’s located in /plugins/events-calendar-pro/src/views/pro/widgets/modules/single-event.php
• Make a new folder in your theme directory called tribe-events
• Make a new folder in that one called pro
• Make a new folder in that one called widgets
• Make one last folder in that one called modules
• Drop the copied single-event.php file in that last folder

Now that the template is in your theme, you can customize it to suit your needs. In this case, use tribe_event_featured_image() to display the featured image and tribe_events_get_the_excerpt() to display the excerpt.

Will this help you get started? Please let me know. 🙂

Cheers!
Geoff

[flyingarts]

Thanks Geoff – that file structure seems to be working. Can I just check:

the part I want to replace is this

<div class=”tribe-mini-calendar-event event-<?php esc_attr_e( $mini_cal_event_atts[‘current_post’] ); ?> <?php esc_attr_e( $mini_cal_event_atts[‘class’] ); ?>”>

I’m assuming I can use the tribe_event_featured_image() here instead, can I check – do I need to write a custom class to assign the div – or is there one already that I can use?

Cheers

[Geoff]

Hey @flyingarts!

Yeah, you may need to chop out a few existing elements in the HTML and create some classes to style things just right.

The part you referenced is creating a div with a class name based on the ID of the widget being used. Instead, I would look at replacing the chunk that creates the date icon (starting at line 25 for me) on the left side of the event and replacing that with the featured image. I believe the list-date class is already set up to be positioned to the left of the event, so you may be able to work inside that class and adjust it from there.

Cheers!
Geoff

[flyingarts]

Thanks Geoff – we’ve started making some changes but notices that it also changes the widget in the sidebar – we only want to effect the shortcode – not the sidebar widget…is this possible? At the very least to only display the excerpt for the shortcode not the sidebar widget.

Cheers

[flyingarts]

Also Geoff – further to my original message – is there a way to display a message though the shortcode when there are not events to display.

Eg; display something like ‘sorry there are no upcoming events?’

Cheers

[Geoff]

Hey @flyingarts, thanks for following up!

we’ve started making some changes but notices that it also changes the widget in the sidebar

Yeah, the shortcode is another method for calling the widget, so any changes to the template would be reflected everywhere the widget is displayed.

You could try using conditional statements to separate the customizations you make to the template from the rest of the codebase. For example, if you might look into the is_active_widget() function to look for the ID of your embedded widget and only make changes to that widget instance.

is there a way to display a message though the shortcode when there are not events to display.

Hmm, I know this is built into the widget template by default. In fact, you can see it in the widgets/list-widget.php template at Line 65. That notice should plop in there right out of the box.

Cheers!
Geoff

[Anna]

Hey Geoff,

I’m very new to this:

could you please specify what I need to do with the Function: tribe_event_featured_image once I’ve created the template?

Am I adding it somehwere? am I replacing something that’s already there? Do I need to wrap it in any other bits of code?

Thank you)

[Geoff]

Hi Anna and thanks for chiming in.

You can use that function anywhere in the template to display the featured image of an event. So, for example:

<?php echo tribe_event_featured_image(); ?>

…and that would return the featured image for the event.

Cheers!
Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts