When you are creating a new template, you may want to use image placeholders that act like dragging an image object onto an email/landing page. 


Add a text block to the email or page. Edit the source of the text block and paste in html below with your variables filled in.

 

<div style='text-align:center'>
<img 
border="0" 
src="<img source>" 
width="<img width>" 
class="img-responsive" 
align="center" 
style='margin-right:auto;margin-left:auto;display:block;'>
</div>

 

Other classes could be added for pages to give a mask to the image (ie, img-rounded, img-circle, img-thumbnail).


Image Source 

https://submit.activedemand.com/submit/placeholder/<widthpx>/<heightpx>/<bg_color>/<tx_color>?text=<image text string>

  • Width: interger value (ie 600) 
  • Height: interger value (ie 600) 
  • Color: hex value (colors used in AD for images are: e47d3b, 39b49c, efc749, 475f6e, e35b49, c33e27, 20a5d6, 2b8a78, e4d23b, b43951, c749ef, 6e5647, 6e474c, e34984, 20d6ac, 782b8a) 
  • Text: the text you want the image to say, spaces should be replaced by %20 (ie text values could be 400x400, 240px%20width) 

Example: https://submit.activedemand.com/submit/placeholder/600/400/e4d23b/e4d23b?text=524px%20wide

<div style='text-align:center'>
<img 
border="0" 
src="https://submit.activedemand.com/submit/placeholder/600/300/2b3643/ffffff?text=600px%20300px%20Image Placeholder%0AClick or Drop Image Here" 
width="600" 
class="img-responsive" 
align="center" 
style='margin-right:auto;margin-left:auto;display:block;'>
</div>


Image Width 

Emails: always specify a width. The width can be larger than the space and it will automatically be reduced, but it needs to have some width specified.

Pages: do not specify a width on pages if you want the image to be responsive. Specifying a width will disrupt the responsive nature of the image and page.