Show uploaded image as small image to left of event excerpt

Yes. You just need to add custom styles to the stylesheet to handle this. Something like .mc-image { float: right; } would do it.

Thanks, will give that a go

No image appears when I add that code in. Do i need to set the image to display? (sorry not to good with coding)

the html code on one of the events in the list is:

<div class=”entry-content”>
<ul id=”upcoming-events”>
<li class=”future-event”>

This is the shortcode being used:

[my_calendar_upcoming category=”Dates for your diary” template='{linking_title before=”<h3>” after=”</h3>”}{date}{description}’ show_today=”yes” skip=”0″ type=”event” fallback=”No events coming up!” order=”asc”]

I see; I assumed that you had already added images. All you need to do is upload an image with the event, using the provided field, and add one of the image template tags into your upcoming events shortcode.

See the template tags on the Help screen.

Thanks, I’ve tried this but its not working:

[my_calendar_upcoming category=”upcoming events” template='{thumbnail}{linking_title before=”<h3>” after=”</h3>”}{date}{description}’ show_today=”yes” skip=”0″ type=”event” fallback=”No events coming up!” order=”asc”]

Should I be using {thumbnail} (or {medium} or {large} and do I need to put it in a different place in the shortcode?

If {thumbnail} is a legitimate image size in your installation, that should be fine – I have no way of knowing this, however; the template tags for images are automatically generated from the image sizes registered in your installation – these can be changed, so I can’t say for certain that’s right.

If you got {thumbnail} from the list of template tags, it should be fine. You could also try other things to test whether there’s a problem with that specific tag. Is it returning anything at all in the HTML?

Hi Joe,

Having tried this again it is now working and showing the thumbnail on the left side. So that’s good!

I’ve also added some margin formatting in css to align the picture better with the text.

However one issue remains: the bullet point which appears in front of the event title overlaps the image. I can’t seem to select the bullet point in order to hide it using css. Do you have any suggestions?

I will try to use css to bring the image in front of the title element and see if that works for now.

Many thanks

There’s a bullet point in front of the event title? I’m not sure what that is, so I don’t really have any suggestions.

Essentially, it’s extremely difficult to give any practical comment on the styling of a web site when I haven’t seen it.

Hi Joe,

The site is now online so you can see what I mean: https://parishcouncil2.curtiswebsitedesign.com/diary/parish-council-dates/

Each calendar date has a bullet point in front of it which overlaps the event image.

Are these bullet points generated by the theme and not by my-calendar? Do you have any idea if there’s a simple way to remove them? I can’t do it using CSS.

Many Thanks

Yes, that’s coming from your theme. It’s on line 348 of style.css:

.entry-content ul > li { list-style: outside none disc; }

You can override that with CSS from the My Calendar stylesheet; you just need to make sure that your styles in My Calendar are more specific than the ones in your theme, e.g.

.entry-content #upcoming-events > li { list-style: none; }

Thanks Joe, will try this out shortly

Thanks very much, that fixed it