Images are a powerful form of communication. The phrase “a picture speaks a thousand words” exists for a reason, after all, and many of you use images to great effect in your blogs.
Sometimes images in mailings can pose something of a challenge, however. Large images on your blog can be resized by your blog’s software, or theme, or a plugin – but when that image shows up in your RSS feed or mailing, the components necessary for that resizing aren’t always there. Or, sometimes the email app will get the image resized incorrectly (I’m looking at you, Outlook). Result: Ugly emails.
Images also come in unpredictable sizes, varying heights and widths, which can look OK in a blog, but in a multi-post mailing, can also yield aesthetically displeasing results (or: Ugly emails).
Or perhaps you only want one image in your mailing, not all of them.
Enter FeedBlitz’s Advanced Template Editor (a.k.a. the ATE) and three new tags designed to help you, or your email graphic designer, deliver consistently sized and located images in your mailings. If you’re impatient, you can see these tags at work in this image here (and click through to the current, live preview of the Krazy Coupon Lady’s latest finds).
There are three new tags which you can now use in the ATE, all of which should be placed between the <$BlogPosting$> tags which demarcate where the post content goes into the layout.
<$BlogItemThumbnailImage$>
This is the all-singing, all-dancing tag that, in one fell swoop, drops a perfectly sized thumbnail image into your mailing.
It has four optional attributes: width, height, background, align. Most of the time, you will only need to specify the thumbnail’s width, as in the following example, which makes the thumbnail 160 pixels wide:
<$BlogItemThumbnailImage width="160"$>
Here are the available attributes and parameters:
| Width | Force the image to be this many pixels wide. Optional. |
| Height | Force the image to be this tall. Optional. |
| Background | Specify a background color for any space in the thumbnail slot the image doesn't occupy. Optional: leave blank for transparent, which is the default. Color specification is HTML / CSS, so for red you can use “background=#FF0000″ or “background=#F00″ or “background=red” |
| Align | Force the image to float left or right. Optional: the default is left aligned. |
The image will be resized to conform to the parameters you give. Specifying both width and height can lead to some email apps stretching the image oddly (hello again, Outlook), so we don’t recommend that. Pick one! If there is no image in the post, FeedBlitz will substitute in and resize your RSS feed’s logo, if there is one. If that isn’t specified, FeedBlitz will insert a transparent image of the appropriate size to keep your layout consistent.
The thumbnail image tag is a hard working template element. It goes on to link the thumbnail image to the post's page on your site, so clicking the thumbnail takes the visitor back to the post itself. It uses the first non-trivial image from your post (using the <$BlogItemFeaturedImage$> tag I’ll get to next), and makes sure that the image doesn’t appear on landing pages the template powers, such as hosted subscription forms.
If you include the blog’s copy in the mailing (which 99.9% of bloggers do), this tag also removes the discovered featured image from the copy, because having the same image appear in the email twice would be silly. All the other images are left alone.
Caveats, warnings and quid pro quos: Using a thumbnail fixes the image size in the mailing; thumbnails therefore won't resize responsively on mobile devices, unlike other images in the mailing. Or, put another way, specifiying the thumbnail’s width (which is actually what we advise) has the side effect of specifying the narrowest your email can become as FeedBlitz’s responsive design code resizes it on phones and tablets. So specifying a really large thumbnail is possible but perhaps not that smart (Yes, judging. Deal with it). If the first image in your post is smaller than the specified width or height, it will resize up and pixelate. Make sure your thumbnail width is smaller than the images you typically include in your posts.
<$BlogItemFeaturedImage$>
The thumbnail tag above is really a lot of custom HTML wrapped around another new tag, <$BlogItemFeaturedImage$>.
This tag does two things. Firstly, it finds the first non-trivial, non-FeedBlitz-originated image in the post, and then then inserts the detected image tag, or your feed’s logo, or a blank 1×1 pixel if there isn't one, into the template. Secondly, it then removes the featured image from the post before the post is inserted into the mailing by the <$BlogItemBody$> tag. It takes no parameters, it just extracts the image and slams it in as-is, which is why the <$BlogItemThumbnailImage$> exists to surround that inserted image with HTML that restricts its size, adds backgrounds, etc.
<$BlogItemText$>
One of the great things about FeedBlitz is that we have smart summaries. Unlike every other email service out there, when you truncate a post, we retain formatting, images, links etc., which increases the subscriber engagement with the email because people like formatting and images. Win, right?
But there are some – a very few – cases where actually, no, this isn’t useful at all. Enter the <$BlogItemText$> tag, which adds a plaintext version of your post’s copy, truncated according to your list’s settings, instead of the usual formatted version. A great use of <$BlogItemText$> is together with the thumbnail image tags. Use the thumbnail tag to extract the image and locate / resize it consistently, then provide a simple plain text excerpt to go with it. Easy, elegant.
Galling as it was, though, we had to dumb FeedBlitz down to make this happen.
Of course, we didn’t dumb it down too much 
Unlike other services, we still preserve line and paragraph breaks. Even if your post is presented as plain text, it should still be readable, and FeedBlitz makes it so.
How to Get There From Here
The Advanced Template Editor is accessed from your mailing list’s dashboard via the “Design” button.
ليست هناك تعليقات:
إرسال تعليق