Custom Social Media Images

[Kmiller]

We are looking to add custom social media images to match our brand instead of the default HubSpot images. This will be for both emails and Landing Pages. Everything looks great until we view it on mobile. It looks like the images to not resize.

We've tried a Custom HTML module as well as creating a custom module using HubL with no luck. 

Any idea on how to get the images to resize like other images in HubSpot?

Thanks!

[AJLaPorte_diagr]

 Hi Kmiller,

Are you referring to have the images go full width on mobile? adding a class to the image and then having the following css should do that:

[edit: this will work when using a custom email template. For emails using hubspots drag and drop, they do this by default below 650px width]

<style>
/* YOUR MEDIA QUERY FOR MOBILE */
 @media only screen and (max-width: 640px) {
      
       /* CLASS TO BE ASSIGNED TO IMAGE */
       .img-full {
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
        }

}
</style>


<img class="img-full" src="//yourdomain.com/your-image.jpg" />

Keep in mind, if you are using small images like 32 x 32 icons, this will cause them to stretch and become pixelated.

[Kmiller]

Thanks for the reply!

We do not want these particular images to be full width - this is how they currently render and are very pixelated. These are 30X30 - similar size to the default HubSpot icons that resize in mobile. 

We are looking to replicate how the default HubSpot social media icons work but using our custom icons instead.

[AJLaPorte_diagr · Accepted solution]

Ah I see, so I did something similar for a client. I essentially did a custom module for the social links with the following code:

<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="background:#FFFFFF;max-width:300px;margin:0 auto;">
        <tbody>
            <tr>
                <td align="center" valign="top" bgcolor="" style="" width="20%">
                <a href="//yourlinktosocialmedia.com"><img alt="" src=//yourdomain.com/you-image.jpg style="max-width:48px;"/></a>
                </td>
                <td align="center" valign="top" bgcolor="" style="" width="20%">
                <a href="//yourlinktosocialmedia.com"><img alt="" src=//yourdomain.com/you-image.jpg style="max-width:48px;"/></a>
                </td>
                <td align="center" valign="top" bgcolor="" style="" width="20%">
                <a href="//yourlinktosocialmedia.com"><img alt="" src=//yourdomain.com/you-image.jpg style="max-width:48px;"/></a>
                </td>
                <td align="center" valign="top" bgcolor="" style="" width="20%">
                <a href="//yourlinktosocialmedia.com"><img alt="" src=//yourdomain.com/you-image.jpg style="max-width:48px;"/></a>
                </td>
                <td align="center" valign="top" bgcolor="" style="" width="20%">
                <a href="//yourlinktosocialmedia.com"><img alt="" src=//yourdomain.com/you-image.jpg style="max-width:48px;"/></a>
                </td>
            </tr>
        </tbody>
</table>

Overall, the table goes no larger than 300px as the minimum a mobile width would be is 320px (on average: http://mydevice.io/devices/). Depending on how many social media icons you want to use, that would control your max-width value. This value is inlined in the image as inlined values should override the css assigned to the img tag from HubSpot. 

Hopefully this helps with what you are trying to do. 

-AJ

[Kmiller]

With that plus adding HubL code, it worked!

Thank you!