Stop Events Manager from cropping thumbnails

Events Manager gives you a special placeholder that you can put into its templates, for inserting the event’s “featured image” into lists and single event pages. If you want to insert a thumbnail, it uses the timthumb script to create one on the fly — but it crops that thumbnail. Here’s how to use the WordPress uncropped thumbnail (or any registered image size).

We create a new custom placeholder that can be used instead of the #_EVENTIMAGE{x,y} placeholder. This is how it will look in the event list format:

{has_image}#_CUSTOMEVENTIMAGETHUMB{/has_image}

And here’s the code. Drop this into a plugin, or your theme’s functions.php file.

<?php

add_filter('em_event_output_placeholder', 'filterEventThumbnail', 10, 3);

/**
* get event image as regular WordPress thumbnail
* (or any registered WordPress image size)
* @param string $result
* @param EM_Event $EM_Event
* @param string $placeholder
* @return string
*/
function filterEventThumbnail($result, $EM_Event, $placeholder) {
    if ($placeholder == '#_CUSTOMEVENTIMAGETHUMB') {
        $imageID = get_post_thumbnail_id($EM_Event->post_id);
        if ($imageID) {
            $result = wp_get_attachment_image($imageID, 'thumbnail');
        }
    }

    return $result;
}

And job is done, edges included.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail
  • WPKat

    Thanks so much for this, it’s exactly what I was looking for, and it works! I have two follow-up questions that maybe you can help me with:

    1) I am not a PHP expert by any means. How would i modify or add to this code in order to register 2 new custom placeholders for 2 different image sizes that i’d like to use in the Events Manager formatting?

    2) If one of my placeholders is #_CUSTOMEVENTIMAGETHUMB (as in your example), how would i add a class to that image—directly? (As opposed to targeting it as an image within a parent div’s class?

    Thanks so much if you are able to hep out with this at all.

    • http://snippets.webaware.com.au/ Ross

      G’day WPKat,

      1) see this gist
      2) if you Inspect Element the image in Google Chrome, you’ll see that it already has a class — “attachment-thumb” in the case of a thumbnail-size image

      cheers,
      Ross

      • WPKat

        Hi Ross,

        Excellent – thanks so much! So i’m good with the answer to number 1, which i seem to have working with my custom image names & sizes now. Great.

        As for question 2, I am not sure if working with the auto-generated class (i.e. attachment-thumb) will work in my instance, since i will be using this custom placeholder in many situations, and don’t want to target them all with the same rules.

        How would i modify this line in my html:

        #_CUSTOMEVENTIMAGESTUDIOPAGE

        so that I can add the class ‘respo’ to it, where I would normally have the following, were it not using a placeholder:

        .respo { border:3px solid #8FBC8F;padding:3px;float:right;margin:0 0 5px 5px;}

        Do i have to add an extra parent div as markup? like:

        #_CUSTOMEVENTIMAGESTUDIOPAGE

        .respo img { border:3px solid #8FBC8F;padding:3px;float:right;margin:0 0 5px 5px;}

        I’m hoping the extra div isn’t necessary and something exists like:

        #_CUSTOMEVENTIMAGESTUDIOPAGE/>

        (although i know this last night doesn’t work—i’m juts putting it as an example.)

        Kat

        • http://snippets.webaware.com.au/ Ross

          The function wp_get_attachment_image() takes a parameter $attr where you can specify the CSS classes the image gets. Read that page for details.

  • http://www.3dtuts.com Kevin B

    I am sort of following the code above and should be able to handle adding this to me child theme functions file. But after that, I am not sure what to do with the shortcodes.

    I am running into the same problem, on the event page. While adding an image of a logo that is rectangular, it is being cropped in the center as a square image and you are only seeing the center portion of the image. (It’s taking the height of the image and only showing that much width) http://asmetv.org/?p=82 I need to see the full 3:1 aspect ratio, not a 1:1 cropped thumbnail.

    What would I need to do to insert that image into the body of the event page (it’s set as a post) so it is not cropped?

    Thanks, Kevin

    • http://snippets.webaware.com.au/ Ross McKay

      G’day Kevin, under Settings > Media in the WordPress admin, you need to untick “Crop thumbnail to exact dimensions” and regenerate your thumbnails.

      cheers,
      Ross