Styling img on Post emails | General - Subscribe2 HTML Support Forum | Support | Semper Plugins

Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed Topic RSS sp_TopicIcon
Styling img on Post emails
March 29, 2013
1:28 pm
Avatar
pgmagallanes
Member
Guests
Forum Posts: 13
Member Since:
March 28, 2013
sp_UserOfflineSmall Offline

Our site publishes a lot of posts that have at least one inserted image. I am having trouble styling these images, I would like each image to float left and have a margin on two sides {float: left; margin: 0 0 20px 20px;}.

I found this code in a previous post:

function s2html_filter($email) {
if ( empty($email) ) { return; }
list($first, $second) = explode(‘<head>’, $email, 2);
$email = $first . "<head><style type\"text/css\">
body, div { background-color:#000000; color:#bda86a; font-size:20px; }\r\n
</style>" . $second;
return $email;
}
add_filter(‘s2_html_email’, ‘s2html_filter’);

This filter does work for the body of our email.

How do I modify this code so that I can add my styling for the images in our posts? I don’t understand the syntax. Thanks.

March 29, 2013
4:52 pm
Avatar
Matthew Robinson
UK
Admin
Forum Posts: 448
Member Since:
December 13, 2012
sp_UserOfflineSmall Offline

** You currently do not have permission to see this post. To obtain access to these Premium Support Forums, please purchase a plugin and support subscription from Semper Plugins **

April 1, 2013
12:04 am
Avatar
pgmagallanes
Member
Guests
Forum Posts: 13
Member Since:
March 28, 2013
sp_UserOfflineSmall Offline

Thanks for the response. Unfortunately, when I used the above filter, the email that was sent out simply showed

img { float: left; margin: 0 0 20px 20px; }

The post was not sent. The site is built on the Genesis framework with a child theme.

Here is the html (slightly modified) of the content of the post:

<img class="size-full wp-image-5189 alignleft" alt="Mike_head_shot1" src="/biopreservation-material/Mike_head_shot1.png" width="94" height="94" /><strong>BLife is a great company.</strong> <em>"We are really going places," </em>declared CEO, Mike Smith.

I would simply like to float the image left and isolate it from the text by a few pixels. At this point, the image is not separated from the text.

April 1, 2013
5:47 am
Avatar
Matthew Robinson
UK
Admin
Forum Posts: 448
Member Since:
December 13, 2012
sp_UserOfflineSmall Offline

** You currently do not have permission to see this post. To obtain access to these Premium Support Forums, please purchase a plugin and support subscription from Semper Plugins **

April 1, 2013
2:19 pm
Avatar
pgmagallanes
Member
Guests
Forum Posts: 13
Member Since:
March 28, 2013
sp_UserOfflineSmall Offline

Still no luck.

I noticed an error in my original CSS.

Instead of margin: 0 20px 20px 0; I had margin: 0 0 20px 20px;

I corrected that but still have no response in the email. The image is still right next to the text.
Funny thing is, the email is styled with bold and italics, but the img will not respond.
Your code looks good. Any other ideas? Thanks.

April 1, 2013
3:35 pm
Avatar
Matthew Robinson
UK
Admin
Forum Posts: 448
Member Since:
December 13, 2012
sp_UserOfflineSmall Offline

** You currently do not have permission to see this post. To obtain access to these Premium Support Forums, please purchase a plugin and support subscription from Semper Plugins **

April 2, 2013
2:02 pm
Avatar
pgmagallanes
Member
Guests
Forum Posts: 13
Member Since:
March 28, 2013
sp_UserOfflineSmall Offline

I noticed a missing equal sign between “type” and “text/css” in your code. I corrected it so that the source HTML looks fine, but Outlook 2010 ignores the styling of the embedded style sheet. My research has shown that Outlook requires very basic HTML and understands only very simple styles even when applied inline. It ignores external style sheets.
Since a very high percentage of our corporate customers use Outlook 2007 and 2010, we have a problem. I can edit the code to use tables whenever we have an image in the post. but this is not something that the office staff can do. Up to 25% of our posts have images and we send out a lot of posts.
Am I missing something? Thanks!

April 2, 2013
3:40 pm
Avatar
Matthew Robinson
UK
Admin
Forum Posts: 448
Member Since:
December 13, 2012
sp_UserOfflineSmall Offline

** You currently do not have permission to see this post. To obtain access to these Premium Support Forums, please purchase a plugin and support subscription from Semper Plugins **

April 2, 2013
4:39 pm
Avatar
pgmagallanes
Member
Guests
Forum Posts: 13
Member Since:
March 28, 2013
sp_UserOfflineSmall Offline

Yes, I copied the source of the email into a file as you suggested and loaded it into Chrome, IE10, Firefox and Opera. The code renders perfectly in all 4. I agree that the float property is suspect. But I have tried it without float using just margins and have still failed to get a response from the header. I believe that “CSS Support: The Ultimate Guide” is in error with respect to Outlook 2010.
It is common for our staff to insert images into Wordpress posts. The float property is required to allow the text to wrap around the image.
But it looks like, for the present, I am stuck creating tables whenever there is an image in the post.

April 3, 2013
6:08 am
Avatar
Matthew Robinson
UK
Admin
Forum Posts: 448
Member Since:
December 13, 2012
sp_UserOfflineSmall Offline

** You currently do not have permission to see this post. To obtain access to these Premium Support Forums, please purchase a plugin and support subscription from Semper Plugins **

Forum Timezone: America/New_York

Most Users Ever Online: 964

Currently Online:
26 Guest(s)

Currently Browsing this Page:
2 Guest(s)

Top Posters:

Member Stats:

Guest Posters: 35

Members: 19451

Moderators: 0

Admins: 8

Forum Stats:

Groups: 4

Forums: 28

Topics: 1873

Posts: 7973

Newest Members:

Valrie Mullins

Administrators: Michael TorbertPeter BayliesSupport TeamSteve MortiboyMatthew RobinsonSteve KlasenArnaud BroesAshish Ravi

[i]
[i]
Skip to toolbar