The main image of an event looks good except on the main event post itself?

[James O’Sullivan]

Hi there, I am sure this has been asked before but I cannot find a definitive answer on this to be honest and I well I have to get this sorted now as its not really working out for me. On the edit page the event post for this looks well with the photo and text nicely alighned.

When one hovers over the event in the calendar the summarry looks very well also. However when one clicks into the event itself the text and photos are scattered. Basically the photo just comes in at its original size and also the text begins underneath it in the main text area of the event. The text does not wrap around it and the image is not cropped automatically. How do I resolve this or make it look a bit more uniform at least.

Thanks in advance.

[Cliff]

Hi James.

Could you please provide one or two links to single events that aren’t looking so nice?

[James O’Sullivan]

Hi Cliff, here is one: http://www.kinsale.ie/event/pottery-summer-schools-3/

Basically sometimes the image is much larger, sometimes smaller, text does not wrap around image so its a little messy.

[Cliff]

Looking at the page source code for that URL, the originally-uploaded (i.e. full size) image is being used because it’s such a small image: http://www.kinsale.ie/wp-content/uploads/2016/06/pottery18.jpg is 266 x 200

I bet this image is 266 x 200 in your Media Library, too.

If this image is supposed to be bigger, I’d suggest re-uploading the larger version of this image.

===

Although unrelated, I also noticed console errors at your site:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

(If needed, you may reference our KB article Using Google Chrome Developer Tools.)

You should disable any other Google Maps plugin from including their code, at least on Events pages.

[James O’Sullivan]

Hi Cliff,
yes you are right the image is 266 X 200. However I am not complaining about the size of the image as such. What I am saying is this basically. If the image was 400 X 300 which would be about half the width of the page, the event page would actually look worse due to the fact that the text would be obviously pushed down further on the page and the text again does not wrap to the right of the image at all. If I make the image full width of the page then it would need to be around 950px wide and around 450 px tall to even look good and then the user is scrolling even further to view the copy of the event. So I guess my point is how does one get the copy of an event to wrap around the image in order to make this page look less messy. Right now it seems the only way to make the page look presentable is to have a massive image but of course that is not really solving the issue.

Thanks,
James

[Cliff]

Sure. Please try this code:

body.single-tribe_events .tribe-events-event-image,
body.single-tribe_events .tribe-events-single-event-description {
vertical-align: top;
display: inline-block;
width: 48%;
}

For me, it turned it into this: https://cl.ly/3P191d1Q0t1p

Let me know how it goes for you.

[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