
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:
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:
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:
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.
Hi Sallie,
Very nice and useful tips for me. I’d be very grateful if you could send me your altered template files..
Hi Sallie,
very nice work on the Events Calendar Pro modifications.
If possible please send me the altered template files.
Thanks!
They’re on their way.
I love the look this gives the layout and would appreciate a copy of your template files.
Thank You.
This was exactly what I was looking for! I would be really grateful if you could send me your files. Thanks :)
I’ll do that. I need to update some of these tutorials because of the new TEC releases, but I believe this one worked without any changes.
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.
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.
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?
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.
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!
Hello,
Looks great. Please send me the template files when you get a chance.
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
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
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
Hey, great work. I’d love to get a copy of the files too please. :)
I’ll try to get them to you later today. I’ve been down for a few days with a sinus infection.
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
Hi there,
Thank you for the above! Could you please send me the files too!
Cheers!
Also a quick question. Is there any easy way to re-size the height of an image to a specific height in the photo view? I’m running into the problem of having variable lengths of images and wanted to see if there’s a way to crop them to a predefined height.
Cheers.
I have another tutorial on setting a custom image size for events here: https://www.wpfangirl.com/2015/defining-event-image-size-in-the-events-calendar-by-modern-tribe/
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?
Can you send me the files for this too?
Hi Sallie,
You are an amazing dev.
Can I have these files please?
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.
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
Can I please get those files? Thanks!
Hi:
Thanks for your help. Would you be so kind as to send the files?
Cheers
Hello Sallie,
Thank you for the amazing blog post.
Can you send me the files please?
Ahoy!
Would love that template file! I too was looking for this solution today for a client :)
Thank you!
Kristen
Hi,
Would love to get those template files too.
Nice work!!
Bryan
All my Events Calendar files are now up on GitHub: https://github.com/wpfangirl/tribe-events. I’ll likely be updating that grid view with flexbox soon, but since I’m also busy with a major client project, it might not be THAT soon.
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
I’ll have to take a look at the code for that.
Cool if you have time :)
One other thing where did you change the CSS
“To make them exactly equal, I had to hunt down the appropriate CSS and make some modifications. ”
I can not seem to get mine to be all the same height?
You can find all my Events Calendar code on GitHub now. I’m thinking of rewriting this one in Flexbox, as I did the widget, because it will automatically make all the items the same height.
It looks great. I would really like it tif you could send me your altered template files.
My Events Calendar files are available on GitHub at https://github.com/wpfangirl/tribe-events
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!
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!
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 defaulth2
has a large top margin, which you then may also need to adjust. (Oh, the joys of CSS.)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
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.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?
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.
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!
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.
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
andloop.php
templates from/tribe-events/pro/photo/
.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 .
The appropriate CSS files are in my
tribe-events
folder on GitHub. Have a look at the Events Calendar Themer’s Guide for more help.thanks for your fast reply. So, i need to create a new folder in my theme folder called tribe-events and put my files into ? like to put Do have i to do something more? I really need your help to make these changes. I’m not so good about coding and i’m really getting lost. I tried to follow your tutorials but nothing change..
Download the folder from GitHub as a .zip file. Unzip it. Copy the entire
tribe-events
folder into your theme folder via FTP.the css worked but i could not have the same pictures size in photoview. Could you help me with this?
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.
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
Hi, Craig. You can find my updated files on GitHub.
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.”
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?
I would expect you to get an
undefined
error if you use the default-event.php file with thegenesis()
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.
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
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.
Hi Sallie,
your post helped me alot, but i am not able to figure out problem in my website. the event calendar is always showing very smaller image. i have my link here, so you can have a look and try to tell me whats the problem in that. http://trettiseks.staging.wpengine.com/detskjer/photo/
Thanks in advance
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%; }
.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.
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.