Support » Plugin: Better Notifications for WP » Better handling large images

  • Resolved Austin Ginder

    (@austinginder)


    I’m attempting to use BNFW as an email notification for for new blog posts. Having an issue with large images coming from the [post_content] which shows full size in Gmail. I think adding a width:100% on the images themselves would resolve and allow them to fit the Gmail window rather then overflow. Any recommendations on how to do that with BNFW? Or other suggestions for this issue?

    This is a sample of what an email looks like when selecting “Show original” within Gmail.

    <p>Earlier this year I setup a <a href="https://anchor.host/exploring-fathom-analytics/">self-hosted instance of Fathom</a>. It’s been working great for my own site, however it initially only supported one site per instance. Well no more. With Fathom v1.1 it now supports many sites per Fathom instance.</p>
    <figure class="wp-block-image"><img src="https://anchor.host/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-10.12.42-AM.png" alt="" class="wp-image-58823" srcset="https://anchor.host/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-10.12.42-AM.png 2348w, https://anchor.host/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-10.12.42-AM-300x113.png 300w, https://anchor.host/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-10.12.42-AM-768x289.png 768w, https://anchor.host/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-10.12.42-AM-1024x386.png 1024w, https://anchor.host/wp-content/uploads/2018/10/Screen-Shot-2018-10-18-at-10.12.42-AM-600x226.png 600w" sizes="(max-width: 2348px) 100vw, 2348px" /></figure>
    • This topic was modified 10 months, 2 weeks ago by  Austin Ginder.
    • This topic was modified 10 months, 2 weeks ago by  Austin Ginder.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author bnfw

    (@voltronik)

    Hi @austinginder,
    Thanks for your message.

    A good question. I think this would be best handled when inserting them into the post. If you did this as ‘Large’ as opposed to ‘Full’ then this would save on bandwidth both in the notifications that BNFW sends out as well as load on the site when viewing the posts.

    Would this be a suitable solution?

    Not sure. If you look at my code it’s using the default responsive image WordPress code. That is probably best to keep as is for my blog posts. However for emails none of that is very useful. I’m thinking the blog posts should be left as is with some automatic handling for the email notification. Maybe the email notifications could remove the responsive WordPress code and use something static like a defined width:100%?

    • This reply was modified 10 months, 2 weeks ago by  Austin Ginder.
    Plugin Author bnfw

    (@voltronik)

    Hi @austinginder,
    As far as I know, if you use the ‘Large’ image size, this should still allow you to use responsive images within your website.
    Alternatively, have you tried adding styling in the Text tab of your notification to apply styling to your images? I’m currently investigating an issue specifically with the <style> tag in the WYSIWYG editor however, it may be possible to include styling in your emails via another method.

    Austin Ginder

    (@austinginder)

    Doesn’t looks like using the <style> tag is recommended for emails. I think the css needs to be inline in order to work across most email clients as shown here: https://stackoverflow.com/questions/29391855/how-to-make-an-image-responsive-in-html-email-regardless-of-image-size.

    After playing around with some of the filters I think I got bnfw_notification_message working as shown here.

    /**
     * Responsive html email images for BNFW.
     */
    function my_bnfw_responsive_html_images( $message, $setting ) {
    	$message = str_replace( "<img src=\"", "<img style=\"width: 100% !important;\" src=\"", $message );
    	return $message;
    }
    
    add_filter( 'bnfw_notification_message', 'my_bnfw_responsive_html_images', 10, 2 );
    Plugin Author bnfw

    (@voltronik)

    Hi @austinginder,
    Ok, great. Glad you found a fix.

    Did you apply this within the BNFW plugin itself or were you able to do add it to your functions.php file to override the functionality within BNFW?

    • This reply was modified 10 months ago by  bnfw.
    Austin Ginder

    (@austinginder)

    I’m using a child theme so this was safely placed within it’s function.php file. Thanks for checking.

    Plugin Author bnfw

    (@voltronik)

    Thanks @austinginder,
    That’s helpful. I’ve added it as a code snippet to this page on the BNFW website.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Better handling large images’ is closed to new replies.