2

I'm using ContentImagebyKey() to pull in a dynamic image for an event specific email that changes based on location. That being said I have a CSV that's serving me the customerkey field.

The images are pulling in fine, but we're using a responsive layout, and I'd like the image to scale to 100% width in mobile.

<td class="responsive-td" width="216" style="width:36%;">
  <a href="%%=redirectto(@link)=%%" border="0">
    %%=ContentImagebyKey(@image,"Default")=%%
  </a>
</td>

what this results in is the image at it's native resolution off to the left. I can center the whole section, but I haven't found a way to specify style="width: 100%" for my mobile clients since I don't have access to the <img> tag itself.

Does anyone have a good solution to this?

4

As I inspected, the ampscript function outputs the very basic image html attributes.

<img title="xxxx" alt="xxxxx" src="public url of content" border="0">

I found the best way to add attributes to the <image> tag would be to use replace function.

Here is the sample code:

%%=Replace(ContentImagebyKey("Customer_Key"),'>','style="width:100%;">')=%%

Result:

<img title="xxxx" alt="xxxxx" src="public url of content" border="0" style="width:100%;">

Note: You can add more attributes by using concat function.

| improve this answer | |
  • Brilliant. Well done, works perfectly! I had to add the closing > in the replace field, in case you want to edit to add it. Thank you! – Kevin Illick Mar 1 '18 at 12:48
  • @KevinIllick no worries. glad I could help :) – Brad Sapkota Mar 1 '18 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.