WordPress.org

Ready to get started?Download WordPress

Forums

Subscribe2
[resolved] Large-ish photo in HTML mail doesn't scale to fit (8 posts)

  1. douglerner
    Member
    Posted 2 years ago #

    I created a blog post here:

    http://lerner.net/u-s-embassy-visit/

    Note the image in the post scales to fit the width if you resize your browser.

    But in the out-going HTML email the picture is a fixed with and just clips on the side in the middle of the photo.

    Is this something I can fix in my new post email template, which looks like the follow?

    <div style="background: #FFFFFF;width: 600px;margin: 0 auto; overflow: hidden;"><img src="http://lerner.net/blog/wp-content/uploads/2012/06/lerner-header-email.jpg" />
    {BLOGNAME} has a new post, '{TITLE}' 
    
    {POST}
    
    <p style="font-weight:normal;color:#6E6E6E;border: 1px solid #b5a759;letter-spacing:1pt;word-spacing:2pt;font-size:13px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;padding:4px;">Have a comment? Visit {PERMALINK} or just reply-by-email to send me a personal note. Visit my blog at {BLOGLINK}.
    
    You received this e-mail because you are subscribed. To unsubscribe visit {BLOGLINK}/subscribe/.
    </p>
    </div>

    Thanks,

    doug

    http://wordpress.org/extend/plugins/subscribe2/

  2. mattyrob
    Member
    Plugin Contributor

    Posted 2 years ago #

    @Doug,

    I'm not sure there is any way to fix this using HTML and CSS. It's down to the difference between browsers and email clients. The former are designed to interpret HTML and CSS content and display the resulting pages in the very best way possible while the latter are designed to send messages and if some formatting can be retained then all the better.

    If you think there are issues on the internet about standards compliance in web browsers then the differences and non-compliance in email clients takes it to a much higher level of issue!

  3. douglerner
    Member
    Posted 2 years ago #

    Hi, Matty.

    Well, I did notice if I turn on the radio button to use the CSS from the theme (which renders it so it fits) then in the email notification the image scales to fit as well.

    So you might say, "Why don't you do that then?"

    The problem is besides helping with that one issue, the rest of the theme pulled from the site into the email doesn't look very nice. It doesn't use the colors I've set in the theme, the margins look weird and the fonts don't look very nice either.

    So I've been sending the HTML emails with the CSS-from-theme turned off.

    Yet, this does indicate a way is possible.

    However, to get it to work i'd probably need to be able to add an inline style attribute to any img tags the email is sending.

    doug

  4. mattyrob
    Member
    Plugin Contributor

    Posted 2 years ago #

    @Doug,

    Okay, so there must be something in the CSS of your theme that is not in the email that enables image scaling. I can only think that it's a width or max-width CSS attribute.

  5. douglerner
    Member
    Posted 2 years ago #

    @MattyRob,

    Looking at the source on the web-site I think it might be these attributes in the img tag:

    'class="alignnone size-full"
    '

    I'm not a CSS expert though...

    Do you know why, if I do turn on the CSS-from-theme option, setting such as the background color which get sent in the HTML email are the default Weaver theme colors rather than my own set colors for theme?

    Thanks,

    doug

  6. mattyrob
    Member
    Plugin Contributor

    Posted 2 years ago #

    @Doug,

    Weaver has a core HTML theme and then in a different file there are your customisations. Subscribe2 expects themes to have only 1 CSS file and so only the core one is included.

    There is a filter you could make use of to include both.

  7. douglerner
    Member
    Posted 2 years ago #

    @MattyRob.

    That sounds interesting. How would I specify to use both?

    Thanks,

    doug

  8. mattyrob
    Member
    Plugin Contributor

    Posted 2 years ago #

    @Doug,

    You need to create a little plugin for Subscribe2 that uses the HTML email filter, I think this would work on your site. Make sure to turn the CSS setting off though (weird I know but the plugin will handle it now).

    function s2css_filter($email) {
    	if ( empty($email) ) { return; }
    
    	list($first, $second) = explode('<head>', $email, 2);
    	$email = $first . "<head><link rel='stylesheet' id='weaverii-main-style-sheet-css'  href='http://lerner.net/blog/wp-content/themes/weaver-ii-pro/style.css?ver=1.1.3' type='text/css' media='all' />
    <link rel='stylesheet' id='weaverii-style-sheet-css'  href='http://lerner.net/blog/wp-content/uploads/weaverii-subthemes/style-weaverii.css?ver=214' type='text/css' media='all' />" . $second;
    
    	return $email;
    }
    
    add_filter('s2_html_email', 's2css_filter');

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags