changing image size in list widget

[karenk]

I want to create a view in the list widget where I can display the image and change the image size in the list widget. I found a refferal to a tutorial of Salie Goetsch. I tried to follow her instructions but it is not working for me. Is there no other (easy) way to achieve this? If not I would like some assistence on where to place the code etc.

[Victor]

Hi There!

Thanks for getting in touch with us!

I’m not exactly sure I understand what you are trying to accomplish with the events list widget. Could you please explain this further and share with us the link to where you tutorial you mention?

I’d be happy to point you in the right direction.

Thanks,
Victor

[karenk]

Hello Victor,

I’m reffering to the following tutorial

Creating a Horizontal List Widget with Featured Images in Events Calendar Pro

If I’m following her tutorial its not working for me (the tutorial is from 2015 so maybe its not accurate anymore and also made for a different theme)

To accomplish the list widget to show images horizontal I have the following questions:

1. How do I show thumbnails in the list widget?

2. How do I get the thumbnails to be rectangular instead of square?

3. How do I get the list to show the events horizontally?

I’m using the Divi theme.

Thanks in advance

[Victor]

Hi!

Thanks for sharing the link.

First, please let me note that we are fairly limited in how much support we can give for custom development questions like that.

That said, we always like helping out and at least point users into the right direction as much possible.

1. How do I show thumbnails in the list widget?

You should be able to accomplish that using the snippet provided in the following article > https://theeventscalendar.com/knowledgebase/add-thumbnails-to-upcoming-events-list-widget/

Additionally, let me share with you the following article about best practices when implementing custom code snippets > https://theeventscalendar.com/knowledgebase/implementing-custom-code-snippets/

2. How do I get the thumbnails to be rectangular instead of square?

Thumbnails are always square by default in WordPress. You should be able to fetch a different size of pre-set image by modifying the following line in the snippet mentioned above:

echo tribe_event_featured_image( $post->ID, 'thumbnail' );

and change ‘thumbnail’ for any other size your site has pre-defined, like ‘medium’ or ‘large’ (https://codex.wordpress.org/Post_Thumbnails#Thumbnail_Sizes)

3. How do I get the list to show the events horizontally?

You should be able to achieve this with some CSS and/or by customizing the event list widget templates, following our Themer’s Guide > https://theeventscalendar.com/knowledgebase/themers-guide/.

Sallie’s tutorial seems like a good approach to accomplish that, but you should make sure that CSS styles do work for your specific site and theme, and it may vary depending on where you are placing the widget in.

I hope that helps.

Best,
Victor

[karenk]

Hello Victor,

I had already found the instructions that you refferred to under number 1: But I ran into some problems, so I figured this was not the right way to do this. Now you refer to the same article, so it must be the way to get this working.

At first when I created the single-event.php in the tribe-events/pro/widgets/modules/ directory under my child theme it worked. The images showed. Then suddenly they did not anymore. I figured this was due to cache. But I cleared it and still nothing happened. So I deleted the single-event.php file and downloaded a new copy of the file from the github that you refferred to.

I do not see any changes appearing. So it looks like the file is ignored. Even when I change something else, for example not to show country in the list widget the changes do not reflect.

Do you have any idea whats going on?

I’m kinda of dissapointed that simple changes to the look of the widget are not standard available in the PRO version of events calender. It takes so much time to get simple changes done.

[Victor]

Hi!

I’m sorry to hear you are having trouble implementing that template override. I’d be happy to help you getting that to work.

I have just checked and it seems the example template in the article I shared in point 1 was old, so I went ahead and changed it so that it shows the featured image regardless of the event being featured or not. You can see the modified single-event.php template below:

https://gist.github.com/vicskf/7a2d07917c668f4ecc0f4bdf3024454d

Just like before, try placing that template override into your child theme’s directory inside /tribe-events/pro/widgets/modules/

Please let me know if it works for you.

Best,
Victor

[karenk]

Thank you for the new file.

The images show now.

It works only if I put it in the original destination file under plugins/events-calendar-pro/src/views/pro/widgets/modules.

If I put it under the /tribe-events/pro/widgets/modules/ under my child theme it is not working!
Can you please check if this is the right directory to put the file under. Because if I leave
it like this, the changes will be overwritten when there will be an Events Calendar update.

The size however is not ok. It does not even show it as a square. However when I look at my media settings in wordpress its set to 150 by 150.

So the questions remaining are:

1. where to put the single-event.php file, so it will not be overwritten

2. How to get the thumbnails to show in the same sizes (preffered size is rectangular)

3. Do you have any css code for me, so I can edit the template and reflect horizontal listing of the widget

Thanks in advance,
Karen

[Victor]

Hi Karen!

Thanks for following up with this. The template override should work by placing it in your child theme. Can you try placing the tribe-events folder in your parent theme instead, just to verify it works there? If it does, then it means something in the child theme may not be working, or it may the case that you have the parent theme active and not the child.

How to get the thumbnails to show in the same sizes (preffered size is rectangular)

I did not modified the image size to output in the template, so it should show the thumbnail size by default. Can you share a link to the page where I can have a closer inspection?

Do you have any css code for me, so I can edit the template and reflect horizontal listing of the widget

Unfortunately, we don’t have any snippet to accomplish that and it’s beyond the scope of support we can give. I think you should be able to get that layout following Salie’s tutorial. If you need to hire a developer to get this or any other deeper customization, you may want to look for a suitable developer > https://theeventscalendar.com/knowledgebase/custom-development/

Let us know how it goes.

Thanks,
Victor

[karenk]

Hi Victor,

1. I had a look and yes I was using the divi theme instead of divi child. So that is working correctly now. Thank you for pointing me to that solution.

2, I’m testing the widget on the website http://www.nieuwevriendinnen.nl. On the bottom you can see the widget. I hope you can find a way to change the size of the image.

3, I will have a look with the divi team if they can help me furter with the css, because the code that you refer to that is written by Salliem is made for a different theme.

[Victor]

Hi Karen!

Glad to know you could make the template work 🙂

I’m testing the widget on the website http://www.nieuwevriendinnen.nl. On the bottom you can see the widget. I hope you can find a way to change the size of the image.

I can definitely see the widget, but I don’t see the images and can’t navigate to any of the events because it’s redirecting me to the homepage. Can you please verify there are images assigned to those events and let us know about it?

Thanks,
Victor

[karenk]

Maybe other divi theme users can apply this too if they have the same question.

I do not have a solution for getting the images all the same size on the screen though. Any ideas?

Just to make sure about the usuage of a child theme. WordPress shows me that my child theme is activated. But Events CAlendar is using my normal Divi theme to get the templates etc from. Should I change anything in Events Calendar or should this go automatically and is my child theme broken?

[karenk]

Something strange happened. I wanted to add some code but now half the message vanished.

Anyhow about the images. I was testing a bit to see what templates were loaded so it got kinda mixed up. Now its ok again. You can see them on the home page again on the bottom.

I got code from the divi team to get the listing horizontal. Very happy with that too. I tried to share it with you, but it did not go ok. I thought maybe other divi users wanting to do the same in events calendar can benefit from it. If you want me to share it please let me now to get the code to you.

[Victor]

Hi Karen,

Great to know you could make the events listing horizontal 🙂

As to the image sizes, the only difference I see in size are due to some images having a different aspect ratio. So, for example, the “Film in Amsterdam – BlacKkKlansman” event shows an image that is like in portrait mode. You can try adding the following CSS to make them occupy 100% of the width of the image container:

.tribe-events-adv-list-widget .tribe-event-image img {
width: 100%;
}

WordPress shows me that my child theme is activated. But Events CAlendar is using my normal Divi theme to get the templates etc from. Should I change anything in Events Calendar or should this go automatically and is my child theme broken?

You should make all template overrides in your child theme if you are using one. This way, it will prevent theme updates to delete them. So, you should place the tribe-events folder inside your child theme root directory.

Hope that helps. Let me know how it goes and if there is anything else I can help you with. 🙂

Best,
Victor

[karenk]

Hi Victor,

Great that worked for the images to all be the same width. The height was already solved, so that looks good for now. The code might be usefull for other users and is:

.tribe-events-adv-list-widget .tribe-event-image img {
width: 100%;
}

/*****************************/
/*Events calendar arrange pictures horizontal */
/*****************************/
/* Event Calendar images different size list widget */

.et_pb_widget_area .et_pb_widget.tribe-events-adv-list-widget .type-tribe_events .tribe-event-image {
max-height: 150px;
overflow: hidden;
}

/*****************************/
/* Event Calendar horizontal view and images different size list widget */
.et_pb_widget_area .et_pb_widget.tribe-events-adv-list-widget {
width: 100% !important;
}
@media only screen and ( min-width: 768px ) {
.et_pb_widget_area .et_pb_widget.tribe-events-adv-list-widget .type-tribe_events {
width: 30%;
float: left;
margin-right: 3%;
}
}

There is one thing that kinda looks weird. That is the word that appears next to the images. I added a screenshot so you can see what I mean. Any idea how to remove that?

The question about the theme was not totally clear I think. What I meant was:
– My child theme is active
– Changes added to function.php in child theme work fine
– Changes for Events Calendar made in child theme (tribe-events directory) do not work,
– If I add changes to tribe-events in my divi theme (when child is still active) they do work.
-Question is: Events Calendar uses files from original Divi theme although my Child theme is active. Any idea what could cause this?

[karenk]

Sorry forgot the screenshot. Here it is

[Author]

Posts