Menu icon Foundation
Ability to add preview text per page

I'm looking to add preview/preheader text to the beginning of each email I'm building. I typically do this by adding a hidden div with the preview text in it just after the opening body tag. While working with Foundation for Emails 2, I'd like to have a setup similar to how the subject line can be customized on a per page basis, like this:

<body>

  <div class="preview">{{preview}}</div>

  <table>
    ...
  </table>
</body>

Then I could just reference it in each of my pages:

---
preview: Preview text would go here.
---

I'm not sure if this would be a new feature, or if I'm just missing something, so any help would be greatly appreciated!

emailpreview textpreheader

I'm looking to add preview/preheader text to the beginning of each email I'm building. I typically do this by adding a hidden div with the preview text in it just after the opening body tag. While working with Foundation for Emails 2, I'd like to have a setup similar to how the subject line can be customized on a per page basis, like this:

<body>

  <div class="preview">{{preview}}</div>

  <table>
    ...
  </table>
</body>

Then I could just reference it in each of my pages:

---
preview: Preview text would go here.
---

I'm not sure if this would be a new feature, or if I'm just missing something, so any help would be greatly appreciated!

Corey Schaaf about 2 years ago

1. I would set your layout file like so.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" type="text/css" href="{{root}}/css/app.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <!-- <style> -->
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            <container>
              {{> preview }}
              {{> header }} 
              {{> body}}
            </container>
          </center>
        </td>
      </tr>
    </table>
    <!-- prevent Gmail on iOS font size manipulation -->
   <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  </body>
</html>

2. Then I would create a partial called "preview.html" (and drop it in the partials folder). Your preview.html file would look something like this (which would call your preview variable): 

<div class="preview">{{preview}}</div>

(note you could always just add this small block of code to a header. I'm just separating them out so you can see it. )

3. Inside your pages directory where all your working files exist, you would then use front matter. Create your preview variable and define it's text. This way all of the preview text can be entered at the working level of your file. 

---
preview: Preview text would go here.
---

One thing to keep in mind with front matter and preview text (or any text for that matter). The moment you start to add any type of punctuation, you may get some jumbled character output. I'm not sure if certain characters need to be escaped or if front matter even knows how to handle those situation.  

Stef Tock almost 2 years ago

 

Hiya,

Taking a look at recent updates on github I managed to figure it out. 

Works in a similar way to the subject line, although it looks like the default styling needs some sorting out.

 

i.e. 

---
subject: My subject line
description: My preheader text
---

Hope that helps!

 

 

p.s.  Adding the the following CSS I nicked from the Zurb Github link above helped...  but guess all of this is subject to change.

// preheader styles
span.preheader {
  display:none !important;
  visibility:hidden;
  mso-hide:all !important;
  font-size:1px;
  color: $body-background; // needs to match background color
  line-height:1px;
  max-height:0px;
  max-width:0px;
  opacity:0;
  overflow:hidden;
}

 

jenny 7 months ago

This is looking a simple way to get the free house of fun coins online here to generate the free spins here.

Taylor Shaw 5 months ago

I am new to the whole thing but I am pretty sure that the platform is quite resourceful in running a large number of programs and services. I am pretty sure that the platform will be able to do the same with some minor additions to the code. louvre museum tour

lionel john 4 months ago

Good to know about this feature in the webpage. I have been looking for the similar details since a while and glad that you have shared the same here. I would look to add the preview text in my homepage by using this technique. Thanks for the share. Internet Explorer Stopped Working Windows 10


 

sofiajones 3 months ago

Mothering Weekend 2018 is on 11th March! Be sure you ruin Mum this Mother's Day with the best gift ideas, whether it is a BOTTLE OF WINE Glass, or a soothing Luxury Bathroom treat. Or you will want to treat Mum to a decadent Mother's Day present like one in our Experience Days and nights for Mums and experience something special mutually. See the amount of your Mum would earn if what she does was a paying job with the THE WORTHINESS of Mum!

mothers day poems 2018

mothers day gift ideas

Vinod Sharma about 1 month ago

Happy Mothers Day 2018

ritariya 27 days ago

I was constantly searching for the solution to the problem that how to add preview text per page. Recently I have seen the post and I could find the solution to my searching’s. I do this by adding a hidden div with the preview text. It’s nice to read the article. https://www.healthyslumber.com/product/snoredoc-anti-snoring-snorevents/