Support

March 24, 2017 at 2:59 pm

Are you sure this is cut off?

March 24, 2017 at 3:31 pm

Hi Dorian,

Maybe it’d be better if you used the Grid template add-on to display events. The Calendar doesn’t have as much control over those images.

March 27, 2017 at 9:03 pm

I tried this and did not work. March 24th only has 1 line of text and image still cutting off.

@media only screen and (min-width: 1024px) {
.fc-event-title {
max-height: 38px;
overflow: hidden;
}
}

April 7, 2017 at 2:39 pm

Hi Dorian,

There’s more than one issue that’s happening with the way your site has its featured images/thumbnails set up and the solution is going to involve more than adding some CSS. First, if you take a look at your competitor’s site, you’ll notice that they use two basic image sizes for their calendar thumbnails. There’s one basic size for portrait images and one for landscape images. Now compare one week on the masterpiecemixersgv.com site where each thumbnail has a wide variety of dimensions:
https://www.evernote.com/l/AARvtreZcTFGHb6G4igQQ-YfslC2_h3jets

So one thing that will help make your calendar’s thumbnails look nicer is you can set the WordPress Media settings to crop the images at a specific size, then you use the Regenerate thumbnails plugin to resize them.

You can adjust the numbers to your taste, but a general rule of thumb is you set your image dimension settings to match the taller images. It looks like the tallest image on your current calendar by way of aspect ratio is the Pelican Sunset, so you could start with its ratio as starting point. Its dimensions are 150*206.

You go to WP > Settings > Media, make a note of the settings there in case you want to change them back later, then set the 150 W and 206 H dimensions there and check the box next to “Crop thumbnail to exact dimensions (normally thumbnails are proportional)”. Then you save the changes

Then you install the Regenerate Thumbnails plugin, then go to WP > Tools > Regen Thumbnails and click the button there. You’ll note that if you make another change to the Media settings thumbnail dimensions, you’ll need to regenerate again.

You may need to make a few tweaks to the above, and may also need to make a few tweaks to some of the thumbnail images you’re using, so if you can clone a site to a dev server and test there first that will be the best way forward so you can experiment there.

You also may want to use some CSS to add more padding between the events that occur in the same day, which is also something that your competitor is doing with their calendar.

April 17, 2017 at 6:08 pm

The best padding will depend on the sizes of images you’re using. Have you narrowed down the different images to two main sizes? If so, may I ask what are the two main image sizes?

April 21, 2017 at 11:26 am

Do you see how the Pelican Sunset featured image is longer than its neighbors?

https://www.evernote.com/l/AATSPWKzAsROo4KPgaAMXNNtjdIJ_8piDns

April 21, 2017 at 12:00 pm

They’re both 300px tall, but they have different widths, which affects the aspect ratio which also affects the way they’re cropped. So in the example of the screenshot, here’s the 3 images with their sizes:

Pop Art Paris: 237px x 300px
Fall Flower Bike (Les Fleurs): 237px x 300px
Pelican Sunset: 219px x 300px

So what will happen is the calendar will resize the images so each day is the same width. Since Pelican Sunset is 18px narrower in width what ends up happening is the image stretched width-wise more than the other two images, then you see the hard crop of the bottom on the initial view.

May 4, 2017 at 12:10 pm

No because the heights of the table cells are calculated with JavaScript. If you need a variety of image heights a better solution may to use the Event Grid add-on.

May 4, 2017 at 2:13 pm

Here’s the example from our demo site:

http://demoee.org/use-cases/events-grid-template/

and a real world use example:

https://is.gd/i2BRR7

The Grid template add-on works much like the calendar add-on where you add a shortcode to a WordPress post or page, and the shortcode gets parsed to display a grid of events. You use the WP Mobile Detect plugin to set specific content to only show on mobile:

https://wordpress.org/plugins/wp-mobile-detect/

May 4, 2017 at 2:27 pm

Will it adjust for various image heights?

The grid will by default scale the images to fit.

Can you have them in rows vs columns?

They are actually displaying the events in rows.

Can you have them begin with the most current date so its not showing previous events.

That’s exactly what the two demos have. There are no previous events showing on those demos.

May 4, 2017 at 3:06 pm

Yes when you view those pages on a phone you’ll see the events are displayed one per row.