featured image

[Arnie]

Hey, my goal is to get the featured image to show up across the top of an event page (instead of where it currently is — below the title). I can’t figure out which is the template that needs to be modified? Is there an easy way to make this change?

[Geoff]

Hey Arnie and welcome back to the forums. 🙂

Good question. Yeah, that’s totally doable with a template override. You can read more on this in our Themer’s Guide, but it basically boils down to this:

• Make a copy of the single-event.php template. It is located at /wp-content/plugins/the-events-calendar/src/views/single-event.php.
• Make a new folder in your theme or child theme called tribe-events
• Drop the copied single-event.php template into that folder

Now that the template is in your theme, you can modify it to suit your needs. In this case, you can grab the code for the featured image and place it above the title.

Will this work for you? Please let me know. 🙂

Cheers!
Geoff

[Arnie]

When I did that I lost the meta box on the left side of the page. I’d like to keep that but have the featured images stretch across the top of the entire event page — metabox and title.

[Geoff]

Hi Arnie,

It’s very possible that there will be some CSS work to do once the markup for the template has been customized. I’m not exactly sure why the meta box would be be lost if the featured image code was the only thing to change in the template.

I see you are using the Enfold theme. I do know that it includes a number of customizations to The Events Calendar that are different than what our plugin ships with right out of the box.

Just to confirm, was there already a tribe-events folder in your theme when you followed the steps from my previous reply?

Thanks!
Geoff

[Arnie]

I created the folder myself.

[Geoff]

Hi Arnie,

When I did that I lost the meta box on the left side of the page.

Is there any possibility of having a link to your site where I can see the page template changes? The calendar’s meta box is below the event content by default and there is no left side/sidebar (example). I’m hoping an example where I can see those changes will give me an idea of what the template override did and compare them to default.

Thanks so much!
Geoff

[Arnie]

Here’s a link to the updated event page – https://www.jewishexperience.org/event/conversations-with-rabbi-mark-wildes-2/2016-06-20/

Below is the modified code for single_event. As you can see, the meta box is at the bottom.

<?php
/**
* Single Event Template
* A single event. This displays the event title, description, meta, and
* optionally, the Google map for the event.
*
* Override this template in your own theme by creating a file at [your-theme]/tribe-events/single-event.php
*
* @package TribeEventsCalendar
*
*/

if ( ! defined( ‘ABSPATH’ ) ) {
die( ‘-1’ );
}

$events_label_singular = tribe_get_event_label_singular();
$events_label_plural = tribe_get_event_label_plural();

$event_id = get_the_ID();

?>

<div id=”tribe-events-content” class=”tribe-events-single”>

<p class=”tribe-events-back”>
“> <?php printf( ‘« ‘ . esc_html__( ‘All %s’, ‘the-events-calendar’ ), $events_label_plural ); ?>
</p>

<!– Notices –>
<?php tribe_the_notices() ?>

<?php echo tribe_event_featured_image( $event_id, ‘full’, false ); ?>

<?php the_title( ‘

‘, ‘

‘ ); ?>

<div class=”tribe-events-schedule tribe-clearfix”>
<?php echo tribe_events_event_schedule_details( $event_id, ‘

‘, ‘

‘ ); ?>
<?php if ( tribe_get_cost() ) : ?>
<span class=”tribe-events-divider”>|</span>
<span class=”tribe-events-cost”><?php echo tribe_get_cost( null, true ) ?></span>
<?php endif; ?>
</div>

<!– Event header –>
<div id=”tribe-events-header” <?php tribe_events_the_header_attributes() ?>>
<!– Navigation –>

<?php printf( esc_html__( ‘%s Navigation’, ‘the-events-calendar’ ), $events_label_singular ); ?>

<ul class=”tribe-events-sub-nav”>
<li class=”tribe-events-nav-previous”><?php tribe_the_prev_event_link( ‘<span>«</span> %title%’ ) ?>
<li class=”tribe-events-nav-next”><?php tribe_the_next_event_link( ‘%title% <span>»</span>’ ) ?>

<!– .tribe-events-sub-nav –>
</div>
<!– #tribe-events-header –>

<?php while ( have_posts() ) : the_post(); ?>
<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<!– Event featured image, but exclude link –>
<!–?php echo tribe_event_featured_image( $event_id, ‘full’, false ); ?–>

<!– Event content –>
<?php do_action( ‘tribe_events_single_event_before_the_content’ ) ?>
<div class=”tribe-events-single-event-description tribe-events-content”>
<?php the_content(); ?>
</div>
<!– .tribe-events-single-event-description –>
<?php do_action( ‘tribe_events_single_event_after_the_content’ ) ?>

<!– Event meta –>
<?php do_action( ‘tribe_events_single_event_before_the_meta’ ) ?>
<?php tribe_get_template_part( ‘modules/meta’ ); ?>
<?php do_action( ‘tribe_events_single_event_after_the_meta’ ) ?>
</div> <!– #post-x –>
<?php if ( get_post_type() == Tribe__Events__Main::POSTTYPE && tribe_get_option( ‘showComments’, false ) ) comments_template() ?>
<?php endwhile; ?>

<!– Event footer –>
<div id=”tribe-events-footer”>
<!– Navigation –>

<?php printf( esc_html__( ‘%s Navigation’, ‘the-events-calendar’ ), $events_label_singular ); ?>

<ul class=”tribe-events-sub-nav”>
<li class=”tribe-events-nav-previous”><?php tribe_the_prev_event_link( ‘<span>«</span> %title%’ ) ?>
<li class=”tribe-events-nav-next”><?php tribe_the_next_event_link( ‘%title% <span>»</span>’ ) ?>

<!– .tribe-events-sub-nav –>
</div>
<!– #tribe-events-footer –>

</div><!– #tribe-events-content –>

[Geoff]

Thanks, Arnie! This is super helpful.

I was able to get the image above the title (screenshot) using this for the template override:

https://gist.github.com/geoffgraham/01d926843fade6d733aa17ba643329b9

Does that work for you as well? Please let me know.

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