Email Marketing Tool

Search Email Marketing Tool for solutions or ask a question
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
JVH1

‎Aug 24, 2020 7:23 AM

Contributor

Switch desktop images for mobile versions in drag & drop email builder

Hi,

Is there a way to switch an image used for desktop to a mobile version in the drag and drop email builder? In my previous esp there was a simple "show for desktop or "Show for mobile" toggle button that you could switch on/off for every single section or module so I'm suprised that this is not in the simple drag and drop in Hubspot... or maybe I'm just missing it somewhere?


For example I want to use this footer, I have a landscape desktop version and a portrait mobile version so that it is more readable for mobile sizes.

 

algarve-mob.jpg

algarve-desktop.jpg

  

 

Is there a simple way to swich one for the other?

Thanks 🙂



Template Design
2 Replies 2
Ben_M

‎Aug 24, 2020 10:28 AM

Key Advisor

Switch desktop images for mobile versions in drag & drop email builder

I don't think what you are asking would be possible in the drag and drop editor.  It's very new, like it still has that new car smell from not being driven enough.

 

I'm curious how your old provider was doing that.  Do you have an example of the code that was used?  You may be able to use the original email editor and custom code module to accomplish what you are seeking to do.  Also the reason why I ask, is the only way I am aware to swap images for email are with media queries but not all clients support them so I am curious about your test results in Gmail vs. Outlook mobile vs. desktop.

JVH1

‎Aug 25, 2020 5:27 AM - edited ‎Sep 1, 2020 11:31 AM

Contributor

Switch desktop images for mobile versions in drag & drop email builder

That's a shame... Maybe something for future development then I hope? It's so helpful to have a super simple way to toggle images for the non-coders out there.

 

I'm not actually sure how Adestra does this, it was not something I had to manually code in to our templates. I would be able to duplicate an image, set one for "show for large screens" and the other image to small screens.  This always worked perfectly well in our tests.

 

JVH1_2-1598346253918.png

 

Here's the code it adds in the outputted email

 

<style type="text/css">
@media only screen and (max-width:599px) {
.amf__mb-none { display: none !important; } 
.amf__dt-none,.amf__dt-none-img {display: block !important; max-height: none !important; overflow: visible !important;}
table.amf__dt-none {display:table !important;}
tr.amf__dt-none {display:table-row !important;}
th.amf__dt-none,td.amf__dt-none {display:table-cell !important;}
.amf__dt-none {float: none !important; width: auto !important;}
.amf__dt-none-img {height: auto !important; width: 100% !important;}
}
</style>

 

And in situ

<tr>
    <td align="center" class="add_top_padding_target add_bottom_padding_target"><table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" style="width:600px;" width="600">
        <tr class="image_padding--bottom_padding button_alignment--align_button_center" style="-amf-class-label: 'Add bottom padding'; -amf-class-label: 'Centre'">
          <td><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
              <tr>
                <td><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                    <tr align="center" class="button_alignment--align_button_center amf__mb-none" style="-amf-class-label: 'Centre'">
                      <td class="full_img"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" class="full_img"><a href="http://email.jamesvillas.co.uk/c/1347YAhvFqokFcIg7UN5KX" style="text-decoration: none;" target="_blank"><img alt="INTRODUCING MONTENEGRO" border="0" src="http://email.jamesvillas.co.uk/i/amf_vacation_rentals/project_1/2020/01-Jan/200109/hero-desktop.jpg?size=600x0&amp;w=B308ki5LSKRov_pby1ffxo8r1Pdo" style="display:block; margin: auto; width:600px;" width="600"> </a></td>
                          </tr>
                        </table></td>
                    </tr><tr align="center" class="button_alignment--align_button_center amf__mb-none" style="-amf-class-label: 'Centre'">
                      <td class="full_img"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" class="full_img"><a href="http://email.jamesvillas.co.uk/c/1347Z7yzAgLchUYmKiTzue" style="text-decoration: none;" target="_blank"><img alt="2020 HOLIDAY OFFER" border="0" src="http://email.jamesvillas.co.uk/i/amf_vacation_rentals/project_1/2019/Promotion_Assets/2019-20-Peaks/hero-promo-title-desktop.jpg?size=600x0&amp;w=BUpfjObHUtLd-Q3m8d7dKEK1dM3w" style="display:block; margin: auto; width:600px;" width="600"> </a></td>
                          </tr>
                        </table></td>
                    </tr><!--[if !mso 9]><!--><tr align="center" class="button_alignment--align_button_center amf__dt-none" style="-amf-class-label: 'Centre'; mso-hide:all; display:none; max-height:0; overflow:hidden; width:0; float:left;">
                      <td class="full_img"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" class="full_img"><a href="http://email.jamesvillas.co.uk/c/1347ZEPDv783UDetmH03dv" style="text-decoration: none;" target="_blank"><img alt="INTRODUCING MONTENEGRO" border="0" src="http://email.jamesvillas.co.uk/i/amf_vacation_rentals/project_1/2020/01-Jan/200109/hero-mob.jpg?size=600x0&amp;w=Bs_RFpD1DypGpE-Jks12uGrfrxKQ" style="display:block; margin: auto; width:600px;" width="600"> </a></td>
                          </tr>
                        </table></td>
                    </tr><!--<![endif]--><!--[if !mso 9]><!--><tr align="center" class="button_alignment--align_button_center amf__dt-none" style="-amf-class-label: 'Centre'; mso-hide:all; display:none; max-height:0; overflow:hidden; width:0; float:left;">
                      <td class="full_img"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                          <tr>
                            <td align="center" class="full_img"><a href="http://email.jamesvillas.co.uk/c/13480JnLkNRNa3KGBtd0G3" style="text-decoration: none;" target="_blank"><img alt="2020 HOLIDAY OFFER" border="0" src="http://email.jamesvillas.co.uk/i/amf_vacation_rentals/project_1/2019/Promotion_Assets/2019-20-Peaks/hero-promo-title-mob.jpg?size=600x0&amp;w=B9fcItaTuP5mV-2hNHXgF3iaXOG8" style="display:block; margin: auto; width:600px;" width="600"> </a></td>
                          </tr>
                        </table></td>
                    </tr><!--<![endif]-->
                  </table></td>
              </tr>
              <tr><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
	
		<tr>
			<td align="center" amf:bgcoloramf:class="additional_padding" amf:htmlbox="paragraph" amf:htmltools="" style="color:#0b141b; font-family:Segoe,'Segoe UI','DejaVu Sans','Trebuchet MS',Verdana,'sans-serif','Montserrat'; font-size:15px; padding:30px 0 0 0; text-align:center">
			<p style="padding: 0; font-weight: 400; line-height: 20px; margin: 0; font-size: 14px">Brand new for 2020, we’ve hand-picked a range of villas across Montenegro so you can enjoy everything this charming country has to offer. Pick from four regions and take in the majestic mountain views, turquoise waters and charming coastal towns.<br>
			<br>
			What’s more, with our 2020 Holiday Offer you’ll get <strong>FREE</strong> Car Hire <em>or </em>Transfers* and <strong>FREE</strong> Airport Parking* plus a £100pp Low Deposit† on selected flights.</p>
			</td>
		</tr>
	
</table>
</tr>
              <tr>
                <td align="center" style="padding:0 0 10px 0;"><table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                    <tr class="button_alignment--align_button_center maximise_button" style="-amf-class-label: 'Centre'">
                      <td align="center" class="align_target" style="padding: 30px 0 10px 0;"><table border="0" cellpadding="0" cellspacing="0" class="button center" style="width: 100%">
                          <tr>
                            <td style="background-color:#003057;background-color:rgb(0,48,87);border-radius:2px;color:#FFFFFF;font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif', 'Montserrat';font-size:16px;padding:10px 30px;text-align:center;text-transform:uppercase;"><a href="http://email.jamesvillas.co.uk/c/13481gEPfEeEMM0NdRjupk" style="color:#ffffff; text-decoration: none" target="_blank"><span><strong>DISCOVER MONTENEGRO</strong></span></a></td>
                          </tr>
                        </table></td>
                    </tr><tr>
                      <td align="center" class="center ten" style="color:#0B141B;font-family:Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, 'sans-serif', 'Montserrat';font-size:12px;text-transform:uppercase;"><h4 style="text-align: inherit; padding: 0; font-weight: 400; line-height: 20px; margin: 0; font-size: 12px"><strong>Prices are based on 4 adults sharing</strong></h4>
</td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>

 

 

Sign up for the Community Newsletter

Receive Community updates and events in your inbox every Monday morning.
Switch desktop images for mobile versions in drag & drop email builder
Marketing
Aug 25, 2020