Event_Embed (Parte Tres)

[Glenn]

Hello,

In previous topic https://theeventscalendar.com/support/forums/topic/event_embed/ it was mentioned that this feature would be included in the 4.2 release.

I can’t see any mention of it in the release notes. Can you point me in the correct direction please.

Thanks.

Glenn.

[George]

Hey @Glenn!

I will check our 4.2 release notes to make sure this is in there—it’s meant to be, so if it was indeed left out, it was a mistake!

Real sorry about that. To use the embed features, check out this knowledgebase guide for a simple tutorial: https://theeventscalendar.com/knowledgebase/inserting-calendar-content-post-page-content/

Check out the “Single Event” section down at the bottom, and try it out! 😀

Cheers,
George

[Glenn]

Hi George,

Thanks for the reply. I’m not too sure this is what I am looking for.

For events that are on EVERY DAY and run for a LONG time I add them to the Category “LongRun” and they are EXCLUDED from the main photo view and included in a widget that only shows “LongRun”.

As it is at the moment using the Event Rocket tag [event_embed categories = "LongRun" limit=7] it works exactly as I like it. With photos! 🙂

Using your example I think it is more for adding specific events (one at a time) and it would need to be maintained to achieve the outcome I am getting with the Event Rocket solution. Let me know if my assumption is incorrect.

[tribe_events_list categories = "LongRun" limit=7] Is close but doesn’t include the images.

Thoughts?

Glenn.

[George]

Hey Glenn,

It is true that the tribe_events_list shortcode does not include photos.

At this time, there is unfortunately no way to embed the photo view. 🙁

Officially-support event embedding, at this time, does indeed only refer to one event. Then there are the shortcodes and widgets for various “list” and “month”-style views, but there is no photo view at this time.

---

One Solution

To get photos in the list view shortcode/widget output, you would have to make a customized version of a default template. This process is covered in depth in this themer’s guide, so I suggest you read this for starters ? https://theeventscalendar.com/knowledgebase/themers-guide/

A summarized version of how to do this, though, is as follows:

First, make a template file in your theme with this directory and file structure:

[your-theme]/tribe-events/pro/widgets/modules/single-event.php

☝️ That is indeed a lot of extra nested folders you have to make just to then add one file, but it’s correct and unfortunately the only way to modify the tribe_events_list output at this time.

Once you have this file created in your theme, copy the contents of the original file from inside Events Calendar Pro, and then add echo tribe_event_featured_image() wherever you want the image to appear.

---

A Simpler Solution

There is an alternative approach to adding the featured images that is much easier. It provides less control over the placement of the image, but I hope this helps if you are interested in a simpler, faster option.

Instead of all of the steps described above, simply head to your theme’s functions.php file and add a bit of code there like this:


add_action( 'tribe_events_list_widget_after_the_event_title', 'tribe_add_featured_image_to_list_widget' );

function tribe_add_featured_image_to_list_widget() {
echo tribe_event_featured_image( get_the_ID(), 'full' );
}


---

We cannot help with code customizing, so you will have to take the reins from here and tinker around with stuff a bit—but I hope this information helps!

— George

[Glenn]

George,

Thanks for the reply.

The “Simpler Solution” had some side effects. Pictures were added to the Event Calendar widget which wasn’t ideal.

I’m OK to try and modify the template but I am confused as to what I am changing (as in what file I want to change). Also I would want to make a unique instance of it so I can call it only for the area I want it to appear – and not have adverse effects in other areas.

So basically what I am after is the Photo View which can be placed in the widget area. It will include the Image, Title, date/time and reoccurrence details, description limited to X characters with link to article. IE – exactly what Event Rocket is doing. 🙂

Is there a way I can pull this single procedure from Event rocket to live as a stand-alone file(s)???

Or is there another way I can achieve this?

Thanks!

Glenn.

[George]

Hey Glenn,

This is unfortunately not possible at this time:

So basically what I am after is the Photo View which can be placed in the widget area

☝️Well, this is “possible” in theory, but is a very extensive customization. The methods I shared above are only ways to add photos to the existing widget types; the list widget, namely.

When it comes to Event Rocket, this plugin is not an official plugin we make and it is also not actively maintained anymore. It is not possible to pull single files out of Event Rocket into our own plugins for the effect you want, unfortunately.

The only way to pull off what you describe is to hand-build a new widget from scratch, or to hire someone else to build that widget for you. We have a list of great developers here, if you’re interested → http://m.tri.be/18k1 (and we have no affiliation with any of these folks–they’re simply some well-respected names in the community that we’ve compiled).

Sorry to disappoint, Glenn!

George

[Glenn]

For the readers at home that might be looking for something similar.

I think a recent update broke the functionality of Event Rocket. So sadly now I must uninstall it. 🙁 It served me well…

This meant I needed to fast-track a replacement solution. Turns out it isn’t really that hard. 🙂

Following this page https://theeventscalendar.com/knowledgebase/add-event-content-to-an-event-widget/ (Who would have thought that the knowledge base has some great information???) I created the list-widget.php file in the right location in my child theme.

Just after the lines:

		<div class="<?php tribe_events_event_classes() ?>">
			<?php tribe_get_template_part( 'pro/widgets/modules/single-event', null, $instance ) ?>

I added:

			<?the_post_thumbnail( 'medium' ); ?>
			<?php the_excerpt(); ?>

And it seemed to work out OK. Let me know if this is in fact a huge mistake.

The only thing that bugs me now is the divide line is in the wrong place. Any hints on how I can move it down to below the excerpt would be appreciated. 🙂

Regards,

Glenn.

[George]

Thanks for sharing this! 😀

Can you share a link to a page on your site where the “divide line being in the wrong place” issue can be seen firsthand? I’ll take a look and recommend what I can.

Cheers,
George

[Glenn]

George,

It is on the main page in the right column named “Stage, Screen and Exhibitions” http://onin.melbourne

See attached screen capture.

Regards,

Glenn.

[George]

Hey Glenn,

Thanks for pointing this out. We cannot help with code customizations or design tweaks, so you’ll have to take the reins from here, but here’s some CSS that should help. Try pasting this into the bottom of your theme’s style.css file:


.tribe-mini-calendar-event {
border-bottom: none !important;
border-top: 1px dotted #2f2f2f !important;
}


If you need to write any more custom CSS on your site, definitely check out a [free!] tool like Firebug if you use FireFox, or the Developer Tools for either Safari or Chrome. They have “Inspector” tools that let you zoom right over the element whose styles you want to change—very helpful!

Best of luck with your site,
George

[Glenn]

Thx George,

I can live with your suggestion. (for now! 😛 )

Thx for your assistance, I guess we can call this one solved.

Glenn.

[George]

Hey Glenn,

Can you clarify what you mean? Does the CSS I recommended fix the border placement?

— George

[Glenn]

George,

Yes it does. But it puts a line at the top of each cell, which ideally I would want it to miss the first cell, but it will only do my head in as no one else will notice.

Thanks for the help.

Glenn.

[George]

Hey @Glenn,

You can hide that top border on the first event by adding this additional line of CSS:


.widget.tribe-events-adv-list-widget .tribe-mini-calendar-event:first-of-type {
border-top: none !important;
}

Cheers,
George

[Glenn]

Hi George,

Thanks for the message. I think in this case they are possibly all “First”. When I include the code it removes all the lines in the widget.

Not to worry – As I mentioned I am sure I am the only one who notices it so I’m happy to leave it as is.

Glenn.

[Author]

Posts