|
Matthew Farrand
|
April 30, 2014 at 12:37 pm
WordPress Version: 3.9
PHP Version: 5.4.14
MySQL Version: 5.0.96
Event Espresso Version: 4.2.0.reg
We just updated to EE4, and can’t figure out why image alignment won’t work… Didn’t have this trouble on this site w/ EE3.
We insert images into the WYSIWYG and set alignment to LEFT, but when we view the event details page, it acts like NONE. You can see it here:
http://www.maryvillevineyard.com/events/summer-devotions-family-fun/
Oddly, it works in loop view. We’re using the category shortcode to display days of the week here:
http://www.maryvillevineyard.com/groups/
Also, I’d love to remove the meta fields from the top of the event details page. Check the link above… specifically the date, author, comment, edit, and categories. Any advice on that would be awesome too 🙂
Thanks!
|
|
Lorenzo Orlando Caum
|
April 30, 2014 at 2:07 pm
Hi Matthew,
The image alignment is working. You may be referring to the spacing between the image and the text content.
Try adding this to your theme’s stylesheet or a plugin like My Custom CSS:
.entry img {
max-width: 100%;
margin: 0 20px 10px 0;
}
This CSS will hide the post meta information which appears above the event title:
.espresso_events .post-meta{display:none}
You can also add it to My Custom CSS.
—
Lorenzo
|
|
Matthew Farrand
|
April 30, 2014 at 2:23 pm
Hey Lorenzo, thx for your reply. I’ll try those snippets…
To clarify: I’d like the image to align left so that the block of text can all be to the right of the photo. It shows up exactly right in the loop view I linked, but on the event details page, it acts like it is in line w/ the text. Am I explaining that right?
Thx again!
|
|
Lorenzo Orlando Caum
|
April 30, 2014 at 2:29 pm
Hi Matthew, I understand what you are referring to. I can see the missing spacing when looking at the links that you shared:
Your theme has a margin setting for the WordPress pages. The img css that I shared introduces something similar for posts.
Let me know if they help for both of your questions!
—
Lorenzo
|
|
Matthew Farrand
|
April 30, 2014 at 2:37 pm
Yep, I added the CSS and do appreciate the extra margin. And the other snippet you gave worked like a charm. Thx!
However, I’d like all the text to appear next to the image, not just the first line.
Specifically, on the loop view here: http://www.maryvillevineyard.com/groups/
the image is on left and a block of text appears next to it that contains:
Leader: Phil & Natasha Warren
Time: Sundays from 3-5pm
About this Group: Let’s enjoy the beauty of summertime by hanging out, building relationships, doing family devotions and having FUN together. We’ll meet weekly throughout the summer at various locations to eat, hike, swim, and play.
Childcare is available.
However, on this event detail page http://www.maryvillevineyard.com/events/summer-devotions-family-fun/
the only text next to the image is:
Leader: Phil & Natasha Warren
That’s crazy since it’s pulling the content from the exact same place, but it looks different. How can I fix that?
|
|
Tony
|
May 1, 2014 at 3:03 am
Hi Matthew,
What the WordPress editor does when aligning images is simply give them a class of .align*position* for example .alightleft
Your theme should then include styles to style .alignleft, which should be something like:
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
The problem is the theme adding extra classes to .alignright, .alignleft etc
If you look within your themes styles.css on line 1570 you’ll find (in this example alignleft):
.post .alignleft,
.type-page .alignleft,
.search-results .features .alignleft,
.search-results .page .alignleft,
.search-results .type-product .alignleft,
.search-results .type-portfolio .alignleft {
float: left;
margin: 0 20px 10px 0;
}
So only apply float: left; if the image is within an element with class “post” or a page with class “type-page” or on search results.
Espresso_events do not have a ‘post’ class, which is why this is not working for you currently.
A quick fix would be to add
.espresso_events .alignleft {
float: left;
}
To your Custom CSS although the same will happen for other alignments.
I have created a ticket for the developers to discuss this.
|
|
Matthew Farrand
|
May 1, 2014 at 11:55 am
That did it – Thanks Tony!
And Thanks Lorenzo for all your help 🙂
|
