Skip to content

Instantly share code, notes, and snippets.

@kvann

kvann/2-Column RSS Layout

Last active February 12, 2022 00:10
Show Gist options
  • Save kvann/b1c2b1fbe6aa8e8cc12c79958694fc41 to your computer and use it in GitHub Desktop.
Save kvann/b1c2b1fbe6aa8e8cc12c79958694fc41 to your computer and use it in GitHub Desktop.
Download ZIP
This custom HTML layout contains a left column for an image and the right column containing the post title and description. This custom HTML will collapse as a single column in mobile view.
Raw
2-Column RSS Layout
%RSS-FEED|URL:https://website.com/rss/feed|SHOW:ALL%
%RSS-LOOP|LIMIT:5%
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0; padding:0; border-collapse:collapse;">
<tr>
<td align="left" valign="top" width="325">
<img src="%RSS:ITEM:MEDIA%" width="325" style="display:block; width:100%; max-width:100%; border:0;">
</td>
<td width="20" height="20"> </td>
<td align="left" valign="top">
<div style="padding-bottom:30px; font-size:15px; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; color:#222222; line-height:130%; line-height:1.2;">
<div style="margin:0; padding-bottom:8px; font-size:23px; color:#000000; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; line-height:1.1;">
<a href="%RSS:ITEM:LINK%" style="font-size:23px; color:#000000; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; line-height:1.1; font-weight:700; text-decoration:none;">
<span style="font-size:19px; color:#000000; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; line-height:1.1; font-weight:700; text-decoration:none;">%RSS:ITEM:TITLE%</span>
</a>
</div>
<div style="padding-bottom:10px; font-size:15px; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; color:#222222; line-height:130%; line-height:1.2;">%RSS:ITEM:DESCRIPTION%</div>
<div style="font-size:13px; font-family: Open Sans, Roboto, San Francisco, Helvetica, Arial, sans-serif; color:#222222;"><b>%RSS:ITEM:STARTDATE%</b></div>
</div>
</td>
</tr>
</table>
%RSS-LOOP%
%RSS-FEED%
@nwwatim
Copy link

nwwatim commented Feb 11, 2022

I tried the code, but the image would not show. How do I fix it?

@kvann
Copy link
Author

kvann commented Feb 11, 2022

@nwwatim Hi, I would need to see how you've implemented this in your campaign. Would you mind reaching out to our support staff and have them send your campaign details to me directly. I can take a closer look. Thanks!

@nwwatim
Copy link

nwwatim commented Feb 11, 2022 •
edited
Loading

@kvann Thank you for your reply.

This was used in an email CMS template as a customized HTML block, and this is the code: (I modified a bit per my manager's request)

Screen Shot 2022-02-11 at 2 41 09 PM

And the image currently shows "Error! Filename not specified. | Error! Filename not specified."

@kvann
Copy link
Author

kvann commented Feb 11, 2022 •
edited
Loading

Hi @nwwatim,
Looking at your RSS feed located here https://goodnews.greatergood.com/feed/, I see that the image associated with each article is in the media:content namespace, ie

<media:content medium="image" url="https://drb960u7vv58y.cloudfront.net/resize/368959/1200/627/image.jpg" type="image/jpg" />

To pull the value for the url attribute from this namespace, we'll write it like this, disregarding the media text:
%RSS:ITEM:CONTENT_URL%

So between our RSS pers tag, it would look something like this:

%RSS-FEED|URL:https://goodnews.greatergood.com/feed/|SHOW:ALL% %RSS-LOOP|LIMIT:3%
    <img src="%RSS:ITEM:CONTENT_URL%" />
%RSS-LOOP% %RSS-FEED%

Here's a complete example with our 2 column layout:

%RSS-FEED|URL:https://goodnews.greatergood.com/feed/|SHOW:ALL% %RSS-LOOP|LIMIT:3%

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-style: fixed;">
    <tr>
        <td valign="top" align="center" width="325" style="padding-bottom: 20px;">
            <a href="%RSS:ITEM:LINK%"><img src="%RSS:ITEM:CONTENT_URL%" width="325" style="display: block; width: 100% !important; min-width: 325px !important; max-width: 100% !important;" /></a>
        </td>
        <td width="20"></td>
        <td valign="top" align="left" style="padding-bottom: 20px;">
            <table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-style: fixed;">
                <tr>
                    <td valign="top" align="left" style="padding-bottom: 10px; vertical-align: top; font-family: 'Roboto', sans-serif; font-size: 17px; color: #000000; line-height: 1.2; line-height: 120%;">
                        <a href="%RSS:ITEM:LINK%" style="font-family: 'Roboto', sans-serif; font-size: 17px; color: #000000; text-decoration: underline; font-weight: bold;">
                            <span style="font-family: 'Roboto', sans-serif; font-size: 17px; color: #000000; text-decoration: underline; font-weight: bold;">%RSS:ITEM:TITLE%</span>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td valign="top" align="left" style="padding-bottom: 10px; vertical-align: top; font-family: 'Roboto', sans-serif; font-size: 12px; color: #888; line-height: 1.2; line-height: 120%;">
                        <span style="font-family: 'Roboto', sans-serif; font-size: 12px; color: #888;">%RSS:ITEM:PUBDATE%</span>
                    </td>
                </tr>
                <tr>
                    <td valign="middle" align="left" style="vertical-align: top; font-family: 'Roboto', sans-serif; font-size: 14px; color: #333333; line-height: 1.2; line-height: 140%;">
                        %RSS:ITEM:DESCRIPTION%
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
%RSS-LOOP% %RSS-FEED%

Hope this help 🤞 Please let me know if I can assist further.

(UPDATE: edit link color for title tag)

@nwwatim
Copy link

nwwatim commented Feb 11, 2022

@kvann Thank you so much for your help. I suspected the ITEM:MEDIA was the issue, but could not figure out what else to replace with. I will modify and report back. Again, I truly appreciate your time and help.

@nwwatim
Copy link

nwwatim commented Feb 12, 2022

@kvann

IT WORKS! Thank you so much!

@kvann
Copy link
Author

kvann commented Feb 12, 2022

Hi @nwwatim 🙌
You're very welcome! ... have a good weekend

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment