Vertical Layout

[Malgorzata]

Hi again,

I am attaching some images to show you the problem. To make it easier, the problem is in the way the filters open up. They should open up as a left column and they do not.

Let me know please how to fix that please.

M.

[Geoff B.]

Good morning Malgorzata and welcome back!

Thank you for reaching out to us.

We are sorry that you have encountered this bug with the vertical filter bar.
I would love to help you with this topic and we apologize for the inconvenience this has caused.

The good news is that a fix is underway.
Unfortunately, I cannot commit to a release date at this point. But stay tuned, you will be contacted when the fix is released.

In the meantime, you can manually fix this with the following CSS rule:

.tribe-events-filters-vertical {
float: left;
width: 25%;
}

Let me know how that goes.

Best regards,
Geoff B.

[Malgorzata]

This solved the problem and created a new one.

The grid layout now is messed up in the Photo view (I have not checked the other views yet). Once the grid layout is fixed, how can I make the height of the events even so the layout does not get messed up? At the moment event if the filter bar is hidden, the grid layout is messed up as the events are not even height.

And I noticed one more small issue – a “span” Tag is not opened properly in some file. Which file is it and what line?

See attached…

Thx,

M.

[Geoff B.]

Good evening Malgorzata,

I am sorry that the above CSS created additional issues.
It surely was not the intention.

You have a couple of options available:

1. You can control the excerpt that gets displayed in the photo view by manually entering the Excerpt in the appropriate meta box
   
2. You can add some CSS rules to control the height automatically

.type-tribe_events.tribe-events-photo-event .tribe-events-photo-event-wrap {
height: 425px;
overflow: hidden;
}
.tribe-events-list .tribe-events-photo-event .tribe-events-event-details {
max-height: 248px;
overflow: hidden;
}

As per the span tag, I believe this might be coming from a customized view.
You might want to read our Themer’s guide to get a sense of how that works.

Basically, look for a /tribe-events/ folder in your WordPress Theme files and search for the photo/nav.php file.

Let me know how that goes.

Best regards,
Geoff B.

[George]

Hello!

I wanted to inform you that we’ve just published a series of updates to our products that fixes a number of issues.

We’ve fixed the Filter Bar layout issues reported here.

Learn more about this release—version 4.3.3—in the official release notes here → https://theeventscalendar.com/maintenance-release-events-calendar-4-3-3-event-tickets-4-3-3-premium-plugins/

Thanks for your patience while we fixed this!
George

[Malgorzata]

Geoff,

The CSS you provided helped only in such a way that the fixed height is forced. The problem with that is that now the list visible life of text looks really bad, the images are not event and so on and so on.

It would be logical to have the image ratio set to be the same, the set amt of exerpt words, etc…

The improperly set span tag was like this straight out of the box. No customisation was done at the time of this ticket being originally written.

Can you please provide me with proper amount of instructions in order to make YOUR plugin and MY SITE looking amazing.

George, none of the improvements in the new version fixed any of my issues.

Thanks,

M

[Malgorzata]

I have found the solution for the problem with the span tag.

In the file wp-content/plugins/events-calendar-pro/src/views/pro/photo/nav.php in line 25 I added a space before closing the span tag. There is an error in your file. Please have it fixed for the rest of the users.

Original code before my fix:

<a href="#" class="tribe_paged"><?php printf( __( '<span>&laquo;</span> Previous %s', 'tribe-events-calendar-pro' ), $events_label_plural ); ?></a>

Fixed code:

<a href="#" class="tribe_paged"><?php printf( __( '<span>&laquo; </span> Previous %s', 'tribe-events-calendar-pro' ), $events_label_plural ); ?></a>

Good luck to all.

M.

[Malgorzata]

I also have found the same problem through Polish Translation. I used Loco Translate to fix this. There was the main problem.

I search for Previous % and I have found

<span>&laquo;</span> Previous %s

Polish translation was wrong:

span>&laquo;</span> Poprzedni %s

Enjoy everyone.

M.

[Geoff B.]

Good afternoon Malgorzata,

Thank you for sharing your solution to the span tag issue.
What is very odd is that the original code does not trigger issues typically (both in display and translation).

Perhaps this is something specific to the Uncode theme ?

Could you please send me a copy of the latest version of your WordPress theme / child theme via a link to a .zip file link (stored Dropbox or Google Drive) so that I can run some tests on my end ? I recommend a private reply for that purpose.

Please ensure you are using the latest files as found on your actual website.
This way I will get access to any updates or customizations you might have made.

It would be logical to have the image ratio set to be the same, the set amt of excerpt words, etc…

You are right, a built-in feature that would automatically even out the aspect ratio of pictures would be great. The more automated the display/HTML rendering the rules are, the easier it is to manage.

Since this could be a cool feature to have, you can suggest it in our User Voice forum.
That way other customers can vote for it!

In the meantime however, it is always possible to do this with a bit of customization.

You can add the following rule to even out the images:

.tribe-events-list .tribe-events-event-image img {
max-height: 187px;
}

 

You could also control the title length and excerpt: the_title() and tribe_events_get_the_excerpt

The file to impact is /wp-content/plugins/events-calendar-pro/src/views/pro/photo/single-event.php

Our themer’s guide will let you add filters / customize that file to your liking.

Here is some recommended reading on that topic: http://www.doc4design.com/articles/wordpress-5ways-shorten-titles/

I believe the title is the most pressing one to control, since there are so many different lengths possible.

In the meantime, you could fake it with CSS

.tribe-events-list #tribe-events-photo-events .tribe-events-event-details h2 {
max-height: 22px;
overflow: hidden;
display: block !important;
}

.tribe-events-list .tribe-events-loop .tribe-events-content {
width: 100%;
max-height: 132px;
}

Let me know if that helps.

Have a great day!

Geoff B.

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts