Events Calendar + VC Tables

[Amber]

I’m using EC with Visual Composer and VC Tables. All appears to be working fine with the exception of the EC popup that appears when hovering over an event.

The table layout inserts %20 where normal blank spaces between words would be. I’m assuming this is because it’s a shortcode. Is there any way to modify that popup so that it doesn’t display %20. Ideally it would be nice if it showed the entire table but I’d settle for just the blank spaces back.

Example URL: http://sylvanlakehockeycamp.com/events/2016-07/

[George]

Hey @Amber,

I’m sorry to hear about these issues! What you’re trying to do might not be possible at this time for two reasons: we do not have any specially-coded support for VC Tables, and the content for tooltips is shared via JSON, which does not allow for certain types for characters and content.

Can you share what some of the table content is, or what some of the shortcodes are that generate it?

I will try to write a snippet of code that will at least, as you mention, replace the %20 characters with real blank spaces. That may be possible and I will try to do that! 🙂

Thanks,
George

[Amber]

I George,

Thanks for the reply. The content in the tables are basically time schedules. (ie.e wake-up: 7:00 – 8:00 am, classroom: 9:00 – 4:00 pm)

The shortcode looks like this (sample from one of the tables):

[vc_table allow_html="1"],[b;align-center]Group%20A,[b;align-center]Group%20B,[b;align-center]Group%20C|[b]Arrival%20Time,[align-center]12%3A15%20%E2%80%93%201%3A00%20pm,[align-center]1%3A45%20%E2%80%93%202%3A30%20pm,[align-center]3%3A15%20%E2%80%93%204%3A00%20pm|[b]Parent%2FStudent%20Meeting,[align-center]1%3A00%20%E2%80%93%201%3A15%20pm,[align-center]2%3A30%20%E2%80%93%202%3A45%20pm,[align-center]4%3A00%20%E2%80%93%204%3A15%20pm|[b]Get%20Suited%20Up,[align-center]1%3A15%20%E2%80%93%201%3A45%20pm,[align-center]2%3A45%20%E2%80%93%203%3A15%20pm,[align-center]4%3A15%20%E2%80%93%204%3A45%20pm|[b]On-Ice,[align-center]1%3A45%20%E2%80%93%203%3A00%20pm,[align-center]3%3A15%20%E2%80%93%204%3A30%20pm,[align-center]4%3A45%20%E2%80%93%206%3A00%20pm[/vc_table]

Even though the table shows %20 etc. when not viewed with visual composer, it doesn’t project that way on VC enabled pages. ECP appears to just grab all the text it can and that also includes the %20.

If you manage to make a snippet that fixes that would be amazing. 🙂

Cheers,
~ Amber

• This reply was modified 10 years, 1 month ago by Amber.
• This reply was modified 10 years, 1 month ago by Amber.

[George]

Hey Amber,

Thanks for sharing this—I’ve put something together that might help. Try adding the following snippet of code to your theme’s functions.php file:


add_filter( 'tribe_events_template_data_array', 'tribe_urldecode_tooltip_excerpts', 30, 3 );

function tribe_urldecode_tooltip_excerpts( $json, $event, $additional ) {

if ( isset( $json['excerpt'] ) ) {
$json['excerpt'] = urldecode( $json['excerpt'] );
}

return $json;
}


[Amber]

Hi George,

You da man! That cleared up the %20 errors.

I have a few more questions, hope you don’t mind.

1. Do you know if it’s possible to allow <strong></strong> to display in that excerpt popup as well? It would be nice if my bolded text carried over.
2. In that hover window, if you don’t define an excerpt via the excerpt meta box on the edit event page it just grabs the first bit of text it sees. It then just cuts it off with no ellipsis to indicate to click to continue reading. Is that something that’s possible to add?
3. If I want to move the tribe-events-event-thumb in that popup is there a specific template that is controlling this, or should I just use CSS?
4. Is there a setting that I missed that stops the feature image from cropping in that pop-up window? Right now it’s cropping to 150 x 150 I don’t want it to crop at all.

Cheers!

[George]

Hey Amber,

Glad to hear it! In regards to your other questions, allowing strong tags and pretty much any other HTML is not possible at this time. 🙁

For moving the tribe-events-event-thumb, using CSS is your best option—whenyou need to write 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. Super helpful.

As for controlling the image cropping, those is handled in your media browser when you upload the image most of the time, though there could also be some additional cropping to thumbnails being applied from your theme or other plugins. You might be able to help mitigate the output of this by using CSS.

---

Now, the only question I haven’t addressed is your second one—I am going to write a code snippet for this, but wanted to share the other answers in the meantime. Stay tuned!

— George

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts