WP Fangirl

WordPress Consultant Sallie Goetsch

Change Photo View in Events Calendar Pro to Equal-Height Grid with Venue & Location

by 65 Comments

This entry is part 2 of 13 in the series Modern Tribe Tutorials
KiaMiller.com upcoming events page with equal-height grid

After the 4.4.3 update to Events Calendar Pro, my custom photo view broke. The problem turned out to be outdated (and redundant) content.php and loop.php files in my /tribe-events/pro/photo/ folder. I have now updated my GitHub repository for the /tribe-events/ folder and the code there is working as of March 11, 2017.

When I built KiaMiller.com, one of the reasons I urged Kia to buy Events Calendar Pro was the photo view for the main events calendar. It’s attractive and allows the visitor to see numerous events at once.  (Modern Tribe describes it as “a fun grid that showcases featured images for your events.”)

The photo view shows the event featured image, title, and dates, along with the post excerpt in a Masonry grid. Kia Miller’s main event page looked like this when I built it:

KiaMiller.com events page with standard Events Calendar Pro photo view

It was not possible to take a screenshot without cutting off some of the content, because not all the excerpts are the same length. You might be able to avoid that problem by using auto-excerpts that cut the text off arbitrarily after a certain number of characters, but you still have the problem that recurring events will show an extra line under the date, as you can see in the entry for the Kundalini Yoga and Raw Juice Cleanse.

This morning Kia told me that she preferred the look of the event listings on the home page, which use my modified Events Calendar List Widget:

featured events widget on the home page of KiaMiller.com

The Events Calendar and Events Calendar Pro use multiple templates to display each view, and also multiple templates for the widget. I dug into their Themer’s Guide, copied the relevant template files to the /tribe-events/ folder in my theme directory, and found it was relatively easy to comment out the lines that display the excerpt. (Templates for the photo view live in /views/pro/photo/ in the Events Calendar Pro plugin directory and you should copy them to /tribe-events/pro/photo/ in your theme directory before editing them.)

Here are the lines you need to remove from single-event.php (not the main one, the one in that pro/photo/ directory):

<div class="tribe-events-list-photo-description tribe-events-content entry-summary description">
  <?php echo tribe_events_get_the_excerpt() ?>
</div>

That gave me a good start: despite the different title lengths, the event blocks were much closer in height. To make them exactly equal, I had to hunt down the appropriate CSS and make some modifications. I added the media queries after I saw how squeezed-looking the display was in smaller browser widths.

#tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
    float: left;
    width: 29.2%;
    height:320px;
    margin: 0 4% 30px 0;
    padding: 0;
    border-bottom: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@media only screen and (max-width: 1024px) {
  #tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
    width: 44%;
  }
}
@media only screen and (max-width: 600px) {
  #tribe-events-photo-events .type-tribe_events.tribe-events-photo-event {
    float: none;
    width: 100%;
    height:100%;
  }
}

Yes, I know the CSS doesn’t look the same as in the other example. If I use the CSS highlighter the media query entries look funny.

I also made a change to the font for the titles, as I had done with the widget:

h2.tribe-events-list-event-title,
h2.tribe-events-list-event-title a {
  	font-family: 'Open Sans Condensed,' 'Lato', Helvetica, sans-serif;
	font-size : 18px;
	font-weight:bold;
	line-height:24px;
	margin-top: 0;
	margin-bottom: 10px;
	padding:0;
}

Finally, I added some code to the single-event.php file in order to display the venue and location instead of the excerpt. I copied the code that I found in the /widgets/modules/single-event.php file and modified it until it worked:

<div class="vcard adr location">
  <?php if ( tribe_get_venue() != '' ): ?>
    <span class="fn org tribe-venue">
    <?php echo tribe_get_venue_link(); ?>
    </span><br />
  <?php endif ?>
  <?php if ( tribe_get_city() != '' ): ?>
    <span class="locality"><?php echo tribe_get_city(); ?>, </span>
  <?php endif ?>
  <?php if ( tribe_get_region() != '' ): ?>
    <span class="region"><?php echo tribe_get_region(); ?>, </span>
  <?php endif ?>
  <?php if ( tribe_get_country() != '' ): ?>
    <span class="country-name"><?php echo tribe_get_country(); ?></span>
  <?php endif ?>
</div>

That resulted in the following grid:

KiaMiller.com upcoming events page with equal-height grid

I could tinker with the CSS a little more so that the wrap background color is also set to a fixed height, but I’m not sure that would actually look better. If you want to watch to see how it evolves, visit https://www.kiamiller.com/events/.

I’ll be happy to send you my altered template files if you’re interested—assuming you’re already an Events Calendar Pro user, since they won’t do you much good otherwise.

You can find the code on GitHub. Note that you may need to update some of the classes depending on your theme.

Get the Code

Modern Tribe Tutorials Series Navigation<< Previous PostNext Post >>

Related Items

Reader Interactions

Comments

  1. Didik says

    Hi Sallie,
    Very nice and useful tips for me. I’d be very grateful if you could send me your altered template files..

    Reply

  2. Dan says

    Hi Sallie,
    very nice work on the Events Calendar Pro modifications.
    If possible please send me the altered template files.
    Thanks!

    Reply

  3. Robert says

    I love the look this gives the layout and would appreciate a copy of your template files.

    Thank You.

    Reply

  4. Spud Marshall says

    This was exactly what I was looking for! I would be really grateful if you could send me your files. Thanks :)

    Reply

  5. john paul says

    great tutorial. I m creating a website for a local cookery school and I think they will love this view. Could you send me the templates please. Thank you.

    Reply

    • Sallie Goetsch says

      Whew! I think that either Modern Tribe needs to add an equal-heights grid view to its pro version, or I need to put it all up on GitHub. I will certainly send you my files, but it may take a day or two, as I have to be away most of today.

      Reply

      • john paul says

        Hi, I agree… I also note that you managed to get you images to the same size every event..whereas in the plug in photo view, they can appear all different sizes. Did you fix this with the code you wrote here? or was that achieved some other way?

        Reply

        • Sallie Goetsch says

          I just created a standard image size for all the featured images in the events (in this case, 1200×600). If you use the same size image on each event, then they will show up the same in the photo view. The grid looks better with images of equal size; the masonry layout looks better with images in different sizes.

          Reply

  6. Nico says

    Epic job on the modifications. I’m using Event Calendar Pro and and would love to have your template files to reproduce what you did. Thank you, my friend!

    Reply

  8. Phil says

    Hi Sallie,

    I’d appreciate a copy of the files when you have a minute, if you’re not totally fed-up of sending the darn things out!

    Thanks,
    Phil

    Reply

  9. Jon says

    Hi Sallie,

    Can you send me over the templates please? I can see if they’ll work with the latest version of the plug in – great work by the way!

    Jon

    Reply

  10. Henning says

    Hi Sallie,

    that’s exactly what I was looking for. It would be very nice if you would send me your templates too.

    Thank you in advance.
    Henning

    Reply

  12. Bryan Gibson says

    Hi Sallie
    Thanks so much for sharing this information and doing the hard yards! Just what I’m looking for. Would really appreciate if you would be kind enough to send me the files.
    Thanks in advance.
    Kind regards,
    Bryan

    Reply

  14. Josh says

    Thanks a ton for your post! I’ve just started using WP and recently was introduced to Modern Tribe. What you’ve done is exactly what I’m hoping to do. Would you mind sending me the template as well?

    Reply

  17. Lance says

    What CSS did you change? You didn’t say what file to go into. I am having big problems with this plugin, so any help would be appreciated. In mobile view on my site I cannot get the picture to display properly and fill up the whole box that the specific event sits in. See here: http://www.wavac.com/events

    If you look on a mobile device you will see what I mean. I just can’t find the CSS file where I can edit anything for this “Photo View”. Thanks for any insight.

    Reply

    • Sallie Goetsch says

      Hi, Lance. So sorry for taking such a long time to answer this. I’ve now put all my /tribe-events/ files, including the CSS files, onto GitHub so you can look at them. I looked at your site and it seems okay on mobile to me, so I suspect you figured something else out elsewhere.
      Get the Files

      Reply

  23. Ryan says

    I absolutly love this customization! It is exactly what i wanted the original program to do.

    One question… Do you know how I can remove the

    Recurring Event (See all)

    From the description?

    Thank you and have a great day!!

    Ryan

    Reply

  25. Luis says

    Hey Sallie,

    I really love the work you did with your customization for the photo view :) This is why I would like to apply that appereance to the website of my company, but somehow its not working…

    I’m not really into coding and everything, but as far as I read myself through, I uploaded everything correctly to the folder “wordpress/wp-content/themes/Luis/tribe-events”.

    Do I still have to activate the new template somehow?

    I’m sorry for asking silly questions, but my brain is exploding after reading so many tutorials :D

    Thank you so much for your help!

    Reply

  26. Luis says

    Hey Sallie,

    I finally managed to set up your photo view, and it’s really awesome.

    But still I have some question:

    If you visit my company’s site “http://wordpress.p255853.webspaceconfig.de/” you will see, that there is no space between the event title and the picture…
    Where and how can I change that? And also where can I change the color of the hovers?

    Thanks so much for any time you can spare!

    Reply

    • Sallie Goetsch says

      Hi, Luis.

      Sorry not to respond sooner, but my Internet is out and Comcast can’t get here to fix it until Tuesday, so I’m stuck trying to work on slow public Wi-Fi.

      To find out what’s affecting your design, you’ll need to make use of your browser’s inspection tools. If you right-click the area and select “Inspect Element”, you’ll find out what CSS rules are being applied to it. Then you can modify them.

      In this case, what you want to do is override the code from .tribe-events-list .tribe-events-event-image, which is in the tribe-events-full.min.css file, and change it so the image is not inline or floated. If you switch to the code below, you’ll have lots of space before your heading, because the default h2 has a large top margin, which you then may also need to adjust. (Oh, the joys of CSS.)

      .tribe-events-list .tribe-events-event-image {
    display: block;
    float: none;
    margin: 0;
}
      Reply

      • Luis says

        Hey Sallie,

        thanks for your supply and your time! I hope you get your Internet fixed soon :/

        Unfortunately things are still not really working… I have to admit that I’m a little confused, but I tried to follow your lead.

        I did the following:

        1st try: I modified the file tribe-events-full.min.css to the values you showed up – without any effects… This file was located in the standard events calendar folder.

        2nd try: I entered the events calendar pro folder and downloaded the tribe-events-pro-full.min.css file, following the link which the inspection tool showed me (http://wordpress.p255853.webspaceconfig.de/wp-content/plugins/events-calendar-pro/src/resources/css/tribe-events-pro-full.min.css?ver=4.4.1), to than make a copy and modify it.

        I reduced the line-height to 0.9 and I also added a margin-top with 180px. I chose those values by trying out with the amazing inspection tool, I never knew about, seeing the results.

        Strange is, that I didn’t finde the code .tribe-events-list .tribe-events-event-image within the pro file…

        Anyway I uploaded it to find out, that after using the inspection tool again, the values are still the same, even though the uploaded file contains the modified values… I’m really confused now :D

        Love to hear from you!

        I hardly now a little about css and so on, so in your eyes it might be a little silly and confusing, but still any help is appreciated ;)

        Greetings from Germany!

        Luis

        Reply

        • Sallie Goetsch says

          Hi, Luis. You might want to look at Lynda.com or Treehouse for an introductory course on CSS. It would help make things easier–though it would not necessarily make finding your way through the maze of The Events Calendar’s stylesheets easier.

          You could try modifying the styles specified in the Customizer’s Additional CSS module, to see whether that would overwrite what the plugin generates. (It depends on which stylesheet loads last. The last stylesheet to load is always the one that gets used.) I suspect you may need to make these changes in /tribe-events/pro/tribe-events-pro.css or your /tribe-events/pro/widget-calendar.css. You should have both files if you copied what I have up on GitHub. As for the logic of what gets changed in which of those files, you have to ask the people at Modern Tribe. But they do have a Themer’s Guide that does tell you which files you need to create to modify what. Mostly.

          Reply

          • Luis says

            Hey Sallie,

            thank you for your time. I already read the themer’s guide and I worked the problem out with the titles.

            But now, I don’t know why, somehow the widget is been shown vertical and not anymore horizontal… I just changed the margin-top, but didn’t make any other changes to the code…

            The only thing I did today was updating the plugins events calendar and events calendar pro…

            Could you help me out?

          • Sallie Goetsch says

            First, check to make sure that the CSS you added is not being overwritten by something else. If you put it into its own /tribe-events/ folder in your theme folder, it should be okay, but if you edited any of the actual CSS in your events calendar plugin folder, it would get overwritten by an update, and not be there anymore.

            More help than that gets to be consulting, and I charge $125/hr for that.

          • Luis says

            Hello Sallie,

            there seems to be a general conflict with using the photo view from Events Calendar Pro, since they have released the new update.

            I’m in contact with the Events Calendar Pro developer team and it could propably be, that somehow your awesome theme files aren’t anymore 100% compatible with the new update 4.4.2 which would explain why I’m having such strange problems.

            Maybe you’ll have some time to actualize your awesome work for the people interested in you great work!

            Also at this point I just want to thank you for all the time you have already taken for all of us!

          • Sallie Goetsch says

            It’s still working on the site I first built it on, BUT I want to re-do it with either Flexbox or the new CSS Grid. (CSS Grid isn’t widely enough supported yet, though.) When I get the chance to do that, I will post a new tutorial.

          • Sallie Goetsch says

            It turns out that I had a couple of redundant template files in my photo view folder. I’ve now updated my files on GitHub. The main thing to do is remove the content.php and loop.php templates from /tribe-events/pro/photo/.

  27. ulcay says

    hello i’m really interested about your customisation.

    I really need your help my head will explode ^^ Firstly i’ve downloaded the files and create a folder in my child theme –> tribe-events where i put your files. Secoundly, i don’t know where i can put your css code. i tried in the style.css file and with a plugin to make change directly to the css and nothing change i truly do not know what i can do.

    Could you help me with this because i’m rally getting lost with it .

    Reply

    • Sallie Goetsch says

      You need to be sure that 1) You have a hard-crop image size in the ratio you want these images to show up, 2) You specify it in the template, and 3) You regenerate thumbnails to ensure that size of image exists for your events. Oh, and of course the images you’ve added as featured images have to be bigger than the new image size you create, or they won’t get cropped when you regenerate your thumbnails. See this tutorial for more information about defining an image size for The Events Calendar.

      Reply

  29. Craig says

    Very nice work. I’m having a little trouble getting this to work on my site. Is it possible I could get the template and see if I’m doing something wrong.

    Thanks

    Reply

  30. Bridget says

    THANK YOU! Your modification looks so much better. In fact my first thought when I saw the Photo view was, “It’s cool, but I wonder how I can get that excerpt to not show.”

    Reply

  31. Marcus says

    Hello,

    i have downloaded your Files from Github and unzipped they to a Folder named tribe-events in my Theme-Folder

    Unfortunately I received a 500 error.

    Any ideas, what could be the reason?

    Reply

    • Sallie Goetsch says

      I would expect you to get an undefined error if you use the default-event.php file with the genesis() function in it but aren’t using a Genesis child theme. However, I wouldn’t offhand expect you to get a 500 error.

      If it’s the salzsau-panorama.de site that you’re using the code on, you might check the new tutorial about the widget shortcode. That example comes from a site that uses Visual Composer.

      Reply

  32. April Mucci says

    Hi Sallie,
    I’m considering switching from Time.ly to The Events Calendar Pro but one of my top “needs” is for the photo view to be a nice grid with even heights, just as you’ve created. Just want to be sure this still works even though it was posted in 2015?

    My calendar has multiple events per day and a huge variation in event photo sizes, so I have to have something that will still look clean. Current calendar at http://www.lakelandmom.com.

    (Unrelated but you have provided so much great content on The Events Calendar that you might know the answer – any way to remove the Export Events link from the bottom? I work so hard on generating calendar content and would be devastated if a competitor started using my feed)

    Thank you!!
    April

    Reply

    • Sallie Goetsch says

      Hi, April.

      The tutorial does still work, though I want to create a new implementation–really a new template entirely–that uses CSS Grid. My first few experiments with that ran into problems with the scripts that power the photo view.

      I’m sure you can remove the Export Events link, but you may need to edit templates to do it. Yes, it appears this is something people have wanted to do for a while, but this post in the forum (last entry before it’s closed) shows you what to look for.

      Reply

    • Sallie Goetsch says

      Hi, Shazia.

      There’s a CSS rule that’s meant for the list display that’s overriding your photo view for some reason. .tribe-events-list .tribe-events-loop .tribe-events-event-image is set to 30% width. Try adding a CSS rule to the customizer that says .tribe-events-list.tribe-events-photo .tribe-events-loop .tribe-events-event-image { width: 100%; }.

      Reply

  34. Patrick says

    Hi Sallie

    Thank you for the files. Its exactly what I was looking for. However, when I click on the image the events page is empty. I have pasted the web address.

    Can you help me find out why the events page does not show the clicked event?

    Thank you.

    Reply

    • Sallie Goetsch says

      When you click on which image? Do you mean the featured image on your own site? I don’t believe there’s anything in my code that should affect that. It does look as though I may need to update the files in that repo, however.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

MENU