thumbnail image in week view widget – make it link to event and not `/`…

[Mike DiNardo]

Hi,
We added thumbnails to the output of the week view following the directions in the themers-guide and that works great; but we need to link the image to the event, the way the heading does. How would we do that?

So far, we’ve tried copying these two functions from general.php and link.php into our functions.php (changing the names to avoid conflict…)

function tribe_event_featured_image( $post_id = null, $size = 'full', $link = true ) {
if ( is_null( $post_id ) ) {
$post_id = get_the_ID();
}

/**
* Provides an opportunity to modify the featured image size.
*
* @param string $size
* @param int $post_id
*/
$image_html = get_the_post_thumbnail( $post_id, apply_filters( 'tribe_event_featured_image_size', $size, $post_id ) );
$featured_image = '';

/**
* Controls whether the featured image should be wrapped in a link
* or not.
*
* @param bool $link
*/
if ( ! empty( $image_html ) && apply_filters( 'tribe_event_featured_image_link', $link ) ) {
$featured_image .= '<div class="tribe-events-event-image">' . $image_html . '</div>';
} elseif ( ! empty( $image_html ) ) {
$featured_image .= '<div class="tribe-events-event-image">' . $image_html . '</div>';
}

/**
* Provides an opportunity to modify the featured image HTML.
*
* @param string $featured_image
* @param int $post_id
* @param string $size
*/
return apply_filters( 'tribe_event_featured_image', $featured_image, $post_id, $size );
}

function tribe_get_event_link( $postId = null, $full_link = false ) {
$url = Tribe__Events__Main::instance()->getLink( 'single', $postId );

if ( '' != get_option( 'permalink_structure' ) ) $url = trailingslashit( $url );

if ( $full_link ) {
$title_args = array( 'post' => $postId, 'echo' => false );
$name = get_the_title( $postId );
$attr_title = the_title_attribute( $title_args );
$link = ! empty( $url ) && ! empty( $name ) ? '' . $name . '' : false;
} else {
$link = $url;
}

return apply_filters( 'tribe_get_event_link', $link, $postId, $full_link, $url );

IN OUR FUNCTIONS.PHP FILE WE HAVE:

In our functions file we have:

function iw_tribe_get_event_link( $postId = null, $full_link = true ) {

$url = Tribe__Events__Main::instance()->getLink( 'single', $postId );

if ( '' != get_option( 'permalink_structure' ) ) $url = trailingslashit( $url );

if ( $full_link ) {
$title_args = array( 'post' => $postId, 'echo' => false );
$name = get_the_title( $postId );
$attr_title = the_title_attribute( $title_args );
$link = ! empty( $url ) && ! empty( $name ) ? '' . $name . '' : false;
} else {
$link = $url;
}

return apply_filters( 'tribe_get_event_link', $link, $postId, $full_link, $url );
}

function iw_tribe_event_featured_image( $post_id = null, $size = 'full', $link = true ) {
if ( is_null( $post_id ) ) {
$post_id = get_the_ID();
}

/**
* Provides an opportunity to modify the featured image size.
*
* @param string $size
* @param int $post_id
*/
$image_html = get_the_post_thumbnail( $post_id, apply_filters( 'tribe_event_featured_image_size', $size, $post_id ) );
$featured_image = '';

/**
* Controls whether the featured image should be wrapped in a link
* or not.
*
* @param bool $link
*/
if ( ! empty( $image_html ) && apply_filters( 'tribe_event_featured_image_link', $link ) ) {
$featured_image .= '<div class="tribe-events-event-image">' . $image_html . '</div>';
} elseif ( ! empty( $image_html ) ) {
$featured_image .= '<div class="tribe-events-event-image">' . $image_html . '<br>'.$link.'</div>';
}

/**
* Provides an opportunity to modify the featured image HTML.
*
* @param string $featured_image
* @param int $post_id
* @param string $size
*/
return apply_filters( 'tribe_event_featured_image', $featured_image, $post_id, $size );
}

And in within our theme we have, in single-event.php:

<div id="tribe-events-event-<?php echo esc_attr( $event->ID ); ?>" class="<?php tribe_events_event_classes( $event->ID ) ?> tribe-this-week-event" >

ID ) ); ?>" rel="bookmark">
<?php
echo iw_tribe_event_featured_image($event->ID, 'thumbnail');
?>

ID ) ); ?>" rel="bookmark"><?php echo esc_html( $event->post_title ); ?>

<div class="duration">
<?php echo tribe_events_event_schedule_details( $event->ID ) ?>

</div>

<div class="fn org tribe-venue">
<?php echo tribe_get_venue_link( $event->ID ); ?>
</div>

</div>

[Nico]

Hey Chris,

Thanks for getting in touch with us! I’ll help you getting this right 🙂

Can you please send the code of the template override? I don’t think it’s necessary to copy over the functions to the functions.php file, it should be easier to do this.

Send me the override file (attached) or the code (be sure to let me know about the file name and path) and I’ll add it to my test site, hence try to link the image.

Best,
Nico

[Mike DiNardo]

Hi Nico,

We’re trying to make the edits locally and linked to the live site so you could at least see what we have and what we want to do. On the home page of http://theirvingtonwoods.org, you’ll see the week view of the events calendar. If you click on the image, it links the home page so the page jumps to the top. Instead, we’d like the thumbnail to link to the respective event detail page.

On our local environment, we added echo tribe_event_featured_image($event->ID, ‘thumbnail’, false); so at least the image wouldn’t link to the home page.

In trying to make it work on localhost, we tried adding these two override functions:

function iw_tribe_get_event_link( $postId = null, $full_link = true ) {

$url = Tribe__Events__Main::instance()->getLink( ‘single’, $postId );

if ( ” != get_option( ‘permalink_structure’ ) ) $url = trailingslashit( $url );

if ( $full_link ) {
$title_args = array( ‘post’ => $postId, ‘echo’ => false );
$name = get_the_title( $postId );
$attr_title = the_title_attribute( $title_args );
$link = ! empty( $url ) && ! empty( $name ) ? ‘‘ . $name . ‘‘ : false;
} else {
$link = $url;
}

return apply_filters( ‘tribe_get_event_link’, $link, $postId, $full_link, $url );
}

function iw_tribe_event_featured_image( $post_id = null, $size = ‘full’, $link = true ) {
if ( is_null( $post_id ) ) {
$post_id = get_the_ID();
}

/**
* Provides an opportunity to modify the featured image size.
*
* @param string $size
* @param int $post_id
*/
$image_html = get_the_post_thumbnail( $post_id, apply_filters( ‘tribe_event_featured_image_size’, $size, $post_id ) );
$featured_image = ”;

/**
* Controls whether the featured image should be wrapped in a link
* or not.
*
* @param bool $link
*/
if ( ! empty( $image_html ) && apply_filters( ‘tribe_event_featured_image_link’, $link ) ) {
$featured_image .= ‘<div class=”tribe-events-event-image”>ID )).'”>’ . $image_html . ‘</div>’;
} elseif ( ! empty( $image_html ) ) {
$featured_image .= ‘<div class=”tribe-events-event-image”>’ . $image_html . ‘<br>’.$link.'</div>’;
}

/**
* Provides an opportunity to modify the featured image HTML.
*
* @param string $featured_image
* @param int $post_id
* @param string $size
*/
return apply_filters( ‘tribe_event_featured_image’, $featured_image, $post_id, $size );
}

Is there a simple way to do (pseudo code):

link; ?>”>
thumbnail_img; ?>” />

[Nico]

Thanks for the follow-up Chris!

I think there must be a simple way of doing this. When I tested it on my local install just adding:

<?php echo tribe_event_featured_image($event->ID, 'thumbnail', true); ?>

To the week view ‘single-event.php’ override works as expected. I’m wondering if you can check if this works well when yo browse Week view in the calendar as opposed when this is viewed in the homepage. Also can you please share the exact same code you are using to get week view to show in the homepage? I’ll try to reproduce this locally hence find a fix 🙂

Please let me know about it,
Best,
Nico

[Mike DiNardo]

I finally figured it out on my own with what I think is a counter-intuitive approach:

`echo ‘<a href=”‘ . esc_url( tribe_get_event_link( $event->ID ) ) . ‘”>’ .
tribe_event_featured_image($event->ID, ‘thumbnail’, false) . ‘</a>’;`

I had to first set the link parameter to “false” so it wouldn’t link to wherever Events Calendar links to in its own function call (there’s obviously a problem there). Then I just wrapped the image in the same link that EC wraps the

tag in…

[Nico]

Stocked to hear Chris! Good job with it 🙂

I’ll go ahead and close out this thread, but if you need help with anything else please don’t hesitate to create a new one and we will be happy to assist you.

Best,
Nico

[Author]

Posts