topic Re: Blog notification email image not responsive or accepting alternative sizes over 450px in CMS Development

Blog notification email image not responsive or accepting alternative sizes over 450px

brentswashburn — Sun, 23 Jul 2017 02:17:47 GMT

I've been working on this for a client for some time and cannot get the featured image to behave. I've been able to edit the featured image sizing on another client's blog notification email to make it 600px and responsive using the max width of the content module and of course my content module is responsive.

Does anyone know if the {{post.featured_image}} token is related to some setting unique to each portal? I can't explain how I would get different results with the same template in two different portals. I need to be able to edit this image.

Re: Blog notification email image not responsive or accepting alternative sizes over 450px

Jsum — Sun, 23 Jul 2017 12:50:21 GMT

@brentswashburn,

string

The source url of the featured image, selected when the blog was published

This variable literally only outputs the url of the image. to use it you would place it in the src of an img tag.

You can check the url to see if a height or width dimension is appended to the end, but this shouldn't be the case.

You didn't really explain what the issue is so it is hard to help you solve it. If you went into detail it would help. I do know that in the content settings for blogs their is an option to use featured image in listing and this will effect rss feeds. Also, based on what I said above, your issue is most likely css related so you should look at the web version of the email and use the console to check for interfering css.

Re: Blog notification email image not responsive or accepting alternative sizes over 450px

brentswashburn — Mon, 24 Jul 2017 01:52:08 GMT

@Jsum thanks for responding to my post so quick, I know I did a poor job explaining my problem. What happens is that the token pulls in more than just the image, it pulls in an impressive amount of markup. In this case it pulls in the following for{{ post.featured_image }}:

<table cellspacing="0" cellpadding="0" align="left" class="alignImageTable" style="border:0; border-collapse:collapse !important; mso-table-lspace:0pt; mso-table-rspace:0pt;"> 
     <tbody>
      <tr> 
       <td border="0" cellspacing="0" cellpadding="0" align="left" valign="top" style="text-align:left; border:0;  padding-right:10px;  padding-bottom: 10px;"> <a href="https://www.focus3.com/blog/complaining-is-lost-opportunity" title="" class="hs-featured-image-link" style="margin:0; border:0; padding:0;" data-hs-link-id="0" target="_blank"> <img src="//www.focus3.com/hs-fs/hubfs/Blog_Images/Focus3-Complain.png?t=1500599015776&amp;width=450&amp;upsize=true&amp;upscale=true&amp;name=Focus3-Complain.png" width="450" data-filemanager-upscale="true" data-filemanager-upsize="true" style="margin:0; border:0; padding:0; display:block;" srcset="//www.focus3.com/hs-fs/hubfs/Blog_Images/Focus3-Complain.png?t=1500599015776&amp;upsize=true&amp;upscale=true&amp;width=450&amp;upsize=true&amp;upscale=true&amp;name=Focus3-Complain.png 450w, //www.focus3.com/hs-fs/hubfs/Blog_Images/Focus3-Complain.png?t=1500599015776&amp;upsize=true&amp;upscale=true&amp;width=900&amp;upsize=true&amp;upscale=true&amp;name=Focus3-Complain.png 900w" sizes="(max-width: 450px) 100vw, 450px"> </a> </td> 
      </tr> 
     </tbody>
    </table

Which is fine, however, it's not easily editted and while i wrote some css to make it work for the meanwhile I'd prefer to operate using inline css whenever possible.

Do you know where the {{ content.featured_image }} lives? Can its configuration be edited?

Re: Blog notification email image not responsive or accepting alternative sizes over 450px

Jsum — Mon, 24 Jul 2017 02:06:56 GMT

@brentswashburn,

I see. That is interesting.

I am not very familiar with setting up an rss feed in an email template. It seams like Hubspot has a different ouput rules for email. I will play with this in a few minutes and let you know.

Re: Blog notification email image not responsive or accepting alternative sizes over 450px

brentswashburn — Mon, 24 Jul 2017 02:10:10 GMT

@Jsum

Thanks, I appreciate the help, as you'll notice there's no class on the <img> so editing what's inline required some !importants which aren't—always—robust enough for email.

Re: Blog notification email image not responsive or accepting alternative sizes over 450px

Jsum — Mon, 24 Jul 2017 02:46:36 GMT

@brentswashburn,

How are you creating the rss feed?

I placed this in a custom HubL module:

{% set rec_posts = blog_recent_posts('default', 5) %}
{% for rec_post in rec_posts %}
   <a href="{{ rec_post.absolute_url }}"><img src="{{ rec_post.featured_image }}" alt="{{ rec_post.featured_image_alt_text }}"></a>
{% endfor %}

and there was no extra markup, just the markup I created. You could do this and create your layout, using table markup, around this for loop.