RSS image LINK needed, possible in any way?

I'm building a template to be sent manually, using selected articles from an RSS feed (which still has to be built). The template contains a shadow over the article image, as well as an arrow tip. To make it even more complex, article image alignment is right for odd articles, and left for even articles. The shadow, as well as the arrow tip position, is different between these articles as well, which makes implementing it a challenge.

I thought I had the solution. I use the RSS image as a background image, and make two overlay PNG's for the shadow and arrow tip. This works fine in my standalone HTML example, but when implementing the RSS tags in the template, I had some trouble getting the images to show up because I thought the <rssimage /> tag would insert the image URL, though instead it outputs the <img> tag. This means I cannot use the RSS image in a <td background="<rssimage />" ... manner. I also need the image link for a <v:fill type="tile" src="BACKGROUNDIMAGE" color="#BGCOLOR" /> line.

-edit- I thought about using the author or comments tag, but both don't seem to output some complete HTML tag, causing the images not to work.

Also, I've tried styling the 'read more' link. It accepts the color, but doesn't accept my text-decoration:none :(

roshodgekiss roshodgekiss, 3 years ago

Hi there mh77, there's a bit going on here, but we'll do our best to explain how you can get some of these effects happening in your email template :) Upfront - some of the techniques I'm going to recommend can only be pulled off using CSS properties that may not be supported in all email clients. Web and email are very different beasts, caveat emptor. At the end, it may be a matter of either simplifying the design, or acknowledging that the email will not look consistent across all email clients.

> The template contains a shadow over the article image, as well as an arrow tip.

For the shadow, I'd likely use the box-shadow CSS property. The alternative is to manually add a shadow to the article image.

The arrow tip will have to feature in the article image, unless you feel like getting tricky with z-index.

> To make it even more complex, article image alignment is right for odd articles, and left for even articles. The shadow, as well as the arrow tip position, is different between these articles as well

Most certainly a task here for :nth-child selectors, but they don't tend to work consistently across email clients.

> I had some trouble getting the images to show up because I thought the <rssimage /> tag would insert the image URL, though instead it outputs the <img> tag. This means I cannot use the RSS image in a <td background="<rssimage />" ... manner.

Yes, this is true - at present, <rssimage /> outputs the whole <img> tag, for the sake of simplicity. To be honest, I wouldn't recommend relying on background images at all in this context - even with the <v:fill...> etc, they just aren't reliable. I'm happy to add your vote internally to get a tag that outputs the image path and keep you posted on this one, but it's not something we'll likely update in the app in the short-to-mid term.

> Also, I've tried styling the 'read more' link. It accepts the color, but doesn't accept my text-decoration:none

Interesting - this could be the email client, but more likely, the CSS isn't being inlined - hard to say without seeing the code. If featuring...

a { color: #FF0000; text-decoration: none; }


...in the <head> doesn't work (which in theory, it should), the next bet is to try something like:

<span style="color: #FF0000; text-decoration: none;"><rssitemlink /></span>

Thanks, mh77 - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
mh77 mh77, 3 years ago

The shadow is bigger in the middle, and smaller on the sides of the email. Also, since articles are selected from an RSS feed, I don't know if the images are going to be on the left or the right beforehand; the shadow and arrow tip position/orientation is determined during the article selection process, which is done manually in your application. My solution of using background images is pretty rock solid (except for maybe some old Lotus Notes clients but who cares about them anyway :P), but I need the URL of the RSS image for that. There is no other field I can put into the RSS feed that would work for this?

As far as the 'read more' link styling is concerned, I used the span tag as I read your advice on that in another forum topic. I didn't test in an email client (yet), this was just in the campaign creation screen online, using my Chrome browser. When I look at the source code, I see something like this:

<span style="color:#26acf3; text-decoration:none;">
  <span class="cs-el-wrap">
    <a href="http://www.website.com">Lees meer</a>
  </span>
</span>

So, perhaps the cs-el-wrap is overriding the text-decoration:none?

I'd be happy to send you the template so you can check by the way, or send you the account name the template is stored in, so you can take a look?

roshodgekiss roshodgekiss, 3 years ago

I need the URL of the RSS image for that. There is no other field I can put into the RSS feed that would work for this?

Not at present, I'm sorry to say. We might fix this in a future update, so well keep you posted on this one.

So, perhaps the cs-el-wrap is overriding the text-decoration:none?

This may be the case; you could also try something like: .cs-el-wrap a { text-decoration:none !important; }

Feel free to contact our team with your account and template details - we're always happy to look into display issues like this :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098