Using Twig and Views to Create Friendly HTML E-newsletter Code

>> JOSHUA YOSPYN:  Thank you. My name is Joshua Yospin, and I am a web designer, have been for 20 years, but I also was a freelance photographer for over 10 years and I've gone back and forth between these two.  I'm more of a front end person than a developer, although I do a little bit of both.  And I work for a company called JSI, which is very much into public health, everything from post Ebola reconstruction in west Africa to the opioid crisis in the United States.  We build a lot of websites, pretty much in Drupal 8, to service these projects.  

And my job, I work a lot in Adobe XD, just whipping up the comps to show the clients, and I also use Bootstrap 4, the barobase for that and I do a lot of CSS, a lot of Twig work, and installing Drupal, and customizing themes.  

So the goal of this particular presentation, and what I accomplished was, we have a staff member who doesn't know anything about HTML.  They don't have any coding ability.  Very little.  

But they need to create HTML newsletter, automatically, with as little work as possible.  

In as little HTML knowledge as possible.  

So I put the link in the chat, but this particular website is called USAID, advancing nutrition.  

And the website is a global project in many, many countries.  Where we're sort of consulting on nutrition in developing countries, and various aspects of it.  

So what this web page is that you see is an extremely long roundup of article summaries.  So these are little summaries and links out to journal articles, issue briefs, white papers, things like that.  

So this is a very long web page, but it's pretty consistent, and I need to turn this into something that can be emailed out.  So this particular page you're looking at, this is a view.  It's sort of complex.  

And the goal was to automatically turn it into code that could be copy and pasted over into Constant Contact.  

And unfortunately, some of you may disagree and there may be other ways of doing it, but HTML in newsletter still require inline styles.  A lot of them, a lot of programs still require table‑based coding.  It's very 1995 versus ‑‑ this is 2020.  Drupal 884 ‑‑ Drupal 9 now.  Very different worlds.  For the e‑newsletter version, we simplified it a little bit.  

So when I'm working in Views, the first thing I looked at, can't I just put inline styles in the view when I rewrite a field?  

And so I tried.  

For the title field, for citation fields, I tried rewriting the field like this.  

With inline style tag, and these attributes.  And it just doesn't show up.  You can type it in here, encode it, but Drupal is just going to delete it.  And it won't show up on your web page.  

Luckily, I created a template in Constant Contact to kind of simplify this a little bit.  So the only pieces of content that need to changes are the things between the headers.  

It's the title of the resource and then the citation.  And the title is a link out.  

That actually goes back to the website version of the e‑newsletter.  

So when I've been using a lot of is Twig.  And I figure some of you have experience in this.  Some of you do not.  If you do not, it's a little bit like Dreamweaver DWT.  It's like templates that are used for various different things and pages throughout the websites.  

So everything from an entire page itself to just one field that shows up in a page.  

There are a lot of twigs that are in the theme.  

The way that you kind of know what twig you're supposed to be working in is in the sites default folder, there will be a YML file, and you copy it, safe it here as services.yml, and down at the bottom, you're going to turn debug to true, which is in the red circle here.  And what that gives you is green stuff.  

So when you go into the code inspector, you're going to see this green hints, and it's sort of like a road map for what's going on in your code.  

And it shows you what Twig is being used.  

And often, it provides suggestions of how you're supposed to rename and customize the twig.  

So here, you see in green that we are using a core twig that's located in a module folder for fields.  

And all that field is, is the title.  In the green stuff, you often see this.  

Here we're looking at a block.  It's a ‑‑ a Bootstrap block region.  

And if we wanted to create our own custom twig, we would open up the original and save it in our own custom theme folder.  Don't overwrite the existing one.  Save it as a new one in your own custom theme folder.  You have a couple of file name suggestions here, and I usually go for the most specific one to whatever we're working on.  

So sometimes they don't provide suggestions.  Sometimes you do not see these file name suggestions.  

You got to improvise.  

And so for example, I rename views‑view‑field.HTML.twig without any suggestions being provided.  First, in blue, that's my custom theme folder.  I saved it there and I renamed it.  It's using the same stuff that's in gray there, so it's still called views‑view‑field.  

But then the next three words are, the machine name of the view.  With hyphens instead of underscores.  You use hyphens instead.  That's the name of the view.  

Block one is the display of that view that I'm using.  And then title is the machine name of the field.  

So this is typically how a twig gets renamed.  

And so all this twig is for is for that particular title field.  That's all this is for.  

And then after you save that new twig, you get a clear cache for you to see it and for it to work.  

And so when we look in the twig file, you don't see a whole lot.  All you see is this stuff in curly brackets, often ‑‑ you see something like that, just says, curly brackets, output, hyphen.  And what I had to do was rewrite that entire thing with a P tag with inline styles, and A tag with inline styles, but then I also have a new field I'm grabbing here, curly brackets, row.nid, the node ID.  And that's just a number that's unique to every piece of content.  And the reason I'm using that here, because it provides a unique anchor link back to the website for every piece of content.  

And the row._.entity.label, that's the title but rewritten as text only.  And, by the way, this presentation is on the page on the MidCamp website.  If you would to look at this, it'll be there.  

And notice this special character code at the end of that. Just inside the strong tag.  

So another example, the citation field, which needed to be smaller in light gray.  I wrapped it in a span.  Put the margin in there, defined the color, font size, all this is 20th century but you got to do it for a HTML newsletter.  This is the screenshot.  And you see the inline styles being output by the twig in the code.  

Now, a different example is, the container of all these fields.  

The normal twig contains curly brackets title, curl brackets content.  Simple stuff.  [Cat meows]. 

By the way, I have a cat.  You will hear him.  

I surrounded the title and put it in a TD inside of a table.  

And then the content, I surrounded into a grouping div.  I'm using tables and divs.  And this is how looks in the code.  And you see the name of that twig, with the red underline.  And where I saved it in my custom theme folder.  

So this is kind of the top parent twig.  

And then I have another twig below that, that is for each row of content.  

And again, that's saved to my custom theme folder.  And that is also been rewritten to include customs ‑‑ inline styles.  

So when our e‑news person uses Chrome code inspector to grab it, I just kind of had to tell them what they're supposed to grab and what div.  And they right‑click in Inspector and just copy that element.  

And in Constant Contact, this is my template I created for them.  I put these brackets here to show them where to paste it in.  

And so they do this a couple of times for each topic that's in the e‑newsletter.  

So it ends up looking like this in Constant Contact, in your email.  The only problem here is special characters.  

So the end of every one of those titles is supposed to have a right arrow.  And then we also have the problem of curly apostrophe created some weirdness for the third title.  We have to go into Constant Contact and fix that stuff.  I spent a lot of time trying to make Twig or View output the encoding of a special character and it won't.  I can't figure it out.  If anybody knows and has done that successfully, I would love to hear about it.  

In this case, I put the encoding into the Twig, and hopeful to do it output ‑‑ in very many different ways but it still just outputs the arrow, and you can't just paste that arrow into Constant Contact and blast it out because when people open up the emails it will look weird.  And the special character won't show up.  They each have to be fixed.  The typical ones are the arrow that I had.  Curly apostrophes, and em dashes and en dashes are culprits as well.  You got to fix those.  I've been doing this for 20 years for every newsletter.  It's like nothing's changed.  

In the website version of the e‑newsletter, we had to create a destination for those anchor links I created.  In the view itself, and if you look in the code here that's circled in red, you'll see that I wrapped the title in the span with an ID.  

And so it's resource 446.  That 446 is the node ID.  And that node ID is unique for every piece of content.  We have hundreds and hundreds and hundreds of these summarizes that are part of this e‑newsletter.  

And so in the view, in Drupal, this is kind of what that looks like.  I'm wrapping it in a P tag, in the style setting, and I rewrite the results by wrapping it in a span, and I include another field that is the node ID.  NID.  It's the very bottom of your screen.  

Another more complicated rewrite that I've done in Views, and this particular one is for the website version of the newsletter.  And so this is a taxonomy term that is the header for like the grouping of articles.  

And this particular header has commas.  It has a slash.  And I can't just ‑‑ I can't use that as an anchor link.  As an ID.  It's just too ugly.  

So what I had to do in the view was in the curly bracket here, you see in the middle the name of the field is field resource review section.  That's the name of the field.  

And then in red, you have value, pipe, replace.  And what that's doing there in the surrounding parentheses is it is stripping out and replacing empty spaces, commas, and that slash with hyphens.  

And so you see in the bottom, in code inspector, the ID comes out nice and clean with hyphens.  

That is pretty much it.  

I am happy to kind of go into the website itself and I'm going to share that now, actually.  And kind of throw it up for questions as well.  

Kathryn, I can also ‑‑ if people want to unmute themselves, we can do it that way as well.  

>> KATHRYN CARRUTHERS:  I was going to say, if any of our participants wanted to just unmute yourself and talk to Josh directly, that's fine.  

>> JOSHUA YOSPYN:  What I'm kind of showing you here is, this is the website version of the e‑newsletter.  

And we can bounce to every section.  This is the very, very long page.  

It's very, very academic.  But this thing is actually pretty popular.  

Now the e‑ ...  email version of it is protected.  You can only see this if you log in.  

You might see the title, but that's it.  

And I have instructions here in the view header for the person that is going to paste it in Constant Contact.  

And then this is what it looks like.  

So when they go into code inspector, they're copying this element, and they're going to paste it into Constant Contact.  

But again, I ‑‑ oh, here.  Mark ‑‑ Max, sorry.  Twig variables.  

Row.nid ...  

Are you talking about, for example, removing commas?  [Clears throat]. 

And ...  

Let's see here.  

Max, I have to warn you that I am not a developer.  

>> DANIEL:  Josh, this is Daniel.  

>> JOSHUA YOSPYN:  This is Daniel Cothran.  You may have seen his presentation on charts.  Daniel and I worked together all the time.  Go ahead.  

>> DANIEL COTHRAN:  So you know in the Twig file there's documentation at the top, and it will say which variable is available to be used in that twig.  

>> JOSHUA YOSPYN:  Oh, yeah.  Okay.  

>> DANIEL COTHRAN:  Thing that's what he's getting to.  

>> JOSHUA YOSPYN:  Let me share ...  [muttering]. 

You can go into presentation mode ...  

A little more easy to read.  

Okay, Max.  You're looking for things like this.  

Row.nid.  

One thing I did not do in that PowerPoint presentation is link out to the sources of where I found all this stuff.  And I can modify the PowerPoint for that.  

>> DANIEL COTHRAN:  One thing that we've also done, Max, is using the JSON encode filter.  And when you do that, in our case, you could see that NID was one of the elements in the ‑‑ in the object.  

So we could get to it by using the dot, in this case.  We also, I think it's in this file.  Can you scroll over to the right, Josh?  

>> JOSHUA YOSPYN:  Yeah.  Let me see if I can wrap this.  There we go.  

>> DANIEL COTHRAN:  Yeah, so we have row.entity.label.  

So we saw that the row had the entity, but label is not something that was visible there.  But we knew just from prior work that if you want to get the title of a node, you can use label on the entity.  And so that's how we're able to get the value of the title of that node.  

>> JOSHUA YOSPYN:  Yeah, I got to be honest.  I don't remember of seeing one cheat sheet for the list of all those.  Usually it would be, like, an over stack or somewhere else it would show up, because somebody would have a problem, and then somebody would suggest a solution.  

Thanks, Daniel.  

>> DANIEL COTHRAN:  One other thing to mention on that is using something like Twig Tweak, or up ‑‑ yeah.  [Chuckles]. 

Someone just pasted.  

>> JOSHUA YOSPYN:  Yeah ...  

Thanks.  I'm showing this right now.  

I definitely don't have this stuff memorized.  Yeah, pretty much every site that we work on, Twig Tweak is one of those modules that we put up right away.  

>> DANIEL COTHRAN:  Josh, can you talk about using the view to grab specific sections, versus trying to program the entire thing?  

>> JOSHUA YOSPYN:  You mean ‑‑ 

>> DANIEL COTHRAN:  They can just copy the entire view and paste that into Constant Contact?  

>> JOSHUA YOSPYN:  You mean why we did that versus ‑‑ or why we don't do that?  

>> DANIEL COTHRAN:  Why you have them copying from individual sections, versus just using the same ‑‑ the entire view content.  

>> JOSHUA YOSPYN:  Well, in Constant Contact, see if I ...  

See if I can get in there real quick.  One moment.  

Just want to log in first before I share this.  

I'll go to the template.  

There we go.  

I want to preview the template.  And you can see how substantial this is.  

The original form of this, we actually did copy and paste in pretty much the entire guts of it.  But there was a request to make each one of these headers an anchor link as well.  

And then to customize the introduction every time.  

Each one of these icons links back to the website version.  

Specifically.  

So if I click on "early childhood development" here, it bounces you down to that section on the website.  

But ‑‑ I mean, you can do that if you want.  

To be honest, we went through a couple of iterations with this, and I came to the conclusion that it got too messy if they were going to copy and paste all at once.  Too much margin for error.  But in smaller e‑newsletters, it's more viable.  

>> DANIEL COTHRAN:  Thanks.  

>> JOSHUA YOSPYN:  Thank you.  

Okay.  Any other questions?  

Anybody want to see anything else?  

Cool.  Thanks, Bo.  

Thank you.