Week 13: Packaging and Presentation + Embedding demo

This is the post that I knocked together in the lesson. It displays some of the functionality of the new Longform theme, and the additional plugins. Editorial Metadata, Custom Statuses and Editorial Comments in the dashboard editor are part of EditFlow and the Custom Role Editor is a separate plugin.

We also talked about the Aesop Story Engine which allows us to create more of an inline multimedia story. Before we looked at that we had a recap on how to embed on WordPress and how HTML works. Which is detailed away.

A quick embedding guide

Mark-up is added around information to tell you web browser how to display information that we put into an editor.  For example the about crosshead was formatted by highlighting the sentence and choosing Headline 2. This puts a <h2> tag around it (click text on the tab in the top right to seeScreenshot 2016-01-11 15.17.57).

The header looks at the style sheet of the website (CSS) and then decides what size and font to use, this doesn’t mean the visual editor will show a WYSIWIG view. For example although the header above is h2 and the one below is h4 they look the same in the visual editor but look quite different when you hit preview.

A quick guide to embedding pictures

This jellyfish is the old way that we used to display a picture in WordPress.


I’ve added the source here where the pic lives http://www.datajournalismlondonmet.com/wp-content/uploads/2016/01/Jellyfish.jpg

But if you look at it in “Text” you will see that the image is found under “scr” when you click on it note that it takes me to my personal blog <a href=”http://dandavies23.com”> is the hyperlink reference.

Note that when I write HTML in the Visual Tag it display it in the text. If I look at the same text in Text then it will say “&lt;” because it needs a different character code to stop it being read as incomplete HTML – most HTML finishes with </> So the previous markup would be incomplete until it finishes with</a>. For example this week’s lecture can be accessed here and if you switch to Text in the dashboard you can see that this is very simple.

If I want the link more useful I can set to open in a new window by selecting that in the options.

And if I want the link to download I can alter the URL slightly so that it downloads when you click on it. See if you can spot the difference in markup….

Also bear in mind that cross heads also help Google understand the important parts of this post are. It ranks H1 as most important then H2 less important all the way through to H4. Web designers may not use all of the headers which is why the below H3 is the same as H2.

Shortcodes and Aesop

The koala uses Aesop plugin to allow more slick functionality and animation to the image. We have more happening in the background to achieve the inline story look. Clicking into the image in the story shows the image more detail in a “lightbox” we can change other factors in how it’s displayed by hitting the pencil icon on the element in Visual editor.


Koala Bear!
This is the caption

Photo by Microsoft

If you view this in Text note their are square brackets. These are shortcodes a form of markup that will only work if Aesop is installed. When a shortcode is written WordPress finds the app that understands this code and then adds a load of HTML and Javacscript to animate the pic slightly and add professional captioning.

To finish the session we had another practice at embedding other tools such as Piktochart and Googlemaps. Often it’s important to make the picture public so that the iframe can create a window to the live site. Always look for the embed button and practice using the older iframe and new Javascript.

In order for an object to embed it needs to be public. In an iframe’s case we’re putting a window on this site into the Piktochart site.

With Javascript it builds the page within the site. iframe is more reliable but less likely to be flexible with the site. WordPress.com doesn’t allow iframe embeds as they are a security breach.

In the Piktochart below width and height are set to 100% which means that it will maximise itself depending on how big your screen is. This is not possible in iframe which is why we need to set the size in pixels and have somewhere for a mobile user to click eg: mobile users click here for the full chart.



The only downside to this is that if you mess around with the copy too much WordPress tends to strip out the HTML, this is because the HTML above needs to be active and it eventually corrupts generally by adding <p> tags that you can’t see in the text editor. If this happens keep the code in a text file NOT IN WORD and paste it in.

I’ll also experiment with a “pure HTML plugin “to remedy this but you will need to make sure that the p tags are there.