Article template in new CMS

Posting, editing and managing content are vastly improved in the new content management system (CMS) but there are a couple of new features and some key differences. This post will also go over some new standard practices

Example of a short but to the point headline in a newspaper

Title (Headline)

The function of the title or headline is to capture attention and lead the reader into the article. It is not its role to give a full explanation and creating titles that are too ling is a mistake we come across frequently.

As a rule of thumb, they should never go over more than two lines unless it absolutely cannot be avoided.

The recommended length is between a minimum of 35 characters and a maximum of 65 characters 



This is 35 characters:  Nullam sollicitudin mauris at nunc.



This is 65 characters:  Lorem ipsum dolor sit amet, consectetur adipiscing elit accumsan.

Headlines can be reduced in length by removing stopwords.   

Stopwords are words which does not add much meaning to a sentence. They can safely be ignored without sacrificing the meaning of the sentence. For example, words like the, he, have etc.   Stopwords are also terms that appear so frequently in the text that they lose their usefulness as search terms.

Image
Stopwords

A few examples of stopwords that can be cut from titles

Brevity is a virtue

Keep the title short and punchy also at the expense of accuracy. Note how the headline in the newspaper shown on the image above is truncated to the point where isn't strictly grammatically correct.

Subheader

This element, which is also known as 'standfirst', 'deck', 'kicker or just plainly 'intro', serves to provide the readers with a brief summary of what they can expect from the article

The placement of the subheader in the article is typically between the title and the main image - as is the case in our site.  The font is often bigger and bolder than the main text.

 

Image
Standfirst
Position of the Standfirst = subheader, deck, intro,... in an article

 

The subheader is often more important than the headline. It sells the information to the reader and acts as a link between the headline and the rest of the story. If it is not informative and appealing, the reader may decide to give the article a pass and move on to other stories. This is why the subheader should be carefully written.

The subheader should be 30-50 words long.  It is better for the subheader to be shorter rather than longer. Also, it should not repeat the words from the headline and the first paragraph of body text.

Body text

The body text or body copy is the text forming the main content of a book, magazine, web page, or any other printed or digital work.

Integer ipsum orci, pharetra tempor ligula at, sollicitudin eleifend justo. Ut sed neque ante. Praesent vel nisl ac risus eleifend malesuada. Sed tristique nisi tincidunt gravida feugiat. Etiam pellentesque tellus vel magna sollicitudin, sit amet luctus lectus posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla mollis, lacus lacinia lobortis commodo, risus lacus faucibus nulla, non egestas sapien felis a dui. Duis porttitor ac erat bibendum elementum. Cras non sodales nunc. Aliquam semper efficitur risus, id vestibulum velit tempor eget. Duis cursus nunc in tempor ornare. Morbi malesuada felis vel nibh rutrum aliquet. Aenean sit amet lorem mi. Nunc aliquam dui mauris, in pellentesque nunc auctor in. In lacinia auctor mauris, ac eleifend risus. Nam purus ex, tincidunt non tincidunt vel, venenatis ut ex.

 

Images, captions and credits

Video file
Simple upload

 

Each article has one main image - and various options and placements for additional images.  The main image would be the first one uploaded in the field 'In-page images'. 

 

Image
Image uploads

 

Any further images uploaded in 'in-page images' will be lined up underneath the main as smaller copies in rows of five images pr line.  Note that the image sequence can be reshuffled afterwards so the sequence when uploading is not critical.

Here is but oneexample, somewhat extreme, showing most new features at once:



#1.  The main image may now be vertical - or rather it will no longer be cropped into a horizontal one

#2.  The rows beneath the main image fills up with five images in each - so aim for multiples of five where possible

#3.  Whan uploading a mix of horizontal and vertical images it is best to keep them in separate rows - as shown - to keep it tidy

Image
Screenshot

 

Frontpage and slideshow image

Because it is now possible to upload vertical images inside the article with them being cut into horizontal ones, the image for the front page (and sections and listings) need to be uploaded separately.   This is because only horizontal images will fit.

It can therefore be the same image - in particular where the main in-page image is already horizontal - or it can be a different one that fits the placements better.  In most cases, the same image can be used.

 



Captions

In a bit of tweak of the system the images' Title field doubles as a caption

Image
Caption main image



Only the caption for the main image is displayed on the page.  Captions for the smaller images are not shown as there isn't room enough. However clicking on the images brings up a light box in which all captions will be displayed.  If the image sequence is changed the captions will follow the images.

Credits and permissions

Video file
Where to place captions, credits and permissions

Sources and references

Nam eget pretium tortor, id rhoncus erat. Donec semper luctus sem, vel efficitur sem interdum vel. Aliquam magna lectus, aliquet sit amet velit ac, efficitur varius nibh. Donec malesuada, libero sit amet tristique iaculis, massa erat tincidunt augue, sit amet ultricies nibh justo quis nisi. Phasellus vulputate sagittis lorem. Phasellus tincidunt laoreet ullamcorper. Praesent porttitor enim vitae nisi congue, id pretium urna lobortis. Vestibulum lobortis auctor erat. Suspendisse nec lobortis augue. Suspendisse posuere, nisi sed dignissim feugiat, sem mi ultrices risus, ut vestibulum ex lacus at mi. Morbi quis urna vel neque vestibulum tincidunt at quis quam. Aliquam in cursus orci. Sed nibh erat, aliquet vitae tempor quis, maximus in metus. Quisque fringilla quam a odio hendrerit, non condimentum mauris iaculis.

Tags and labelling

Nam eget pretium tortor, id rhoncus erat. Donec semper luctus sem, vel efficitur sem interdum vel. Aliquam magna lectus, aliquet sit amet velit ac, efficitur varius nibh. Donec malesuada, libero sit amet tristique iaculis, massa erat tincidunt augue, sit amet ultricies nibh justo quis nisi. Phasellus vulputate sagittis lorem. Phasellus tincidunt laoreet ullamcorper. Praesent porttitor enim vitae nisi congue, id pretium urna lobortis. Vestibulum lobortis auctor erat. Suspendisse nec lobortis augue. Suspendisse posuere, nisi sed dignissim feugiat, sem mi ultrices risus, ut vestibulum ex lacus at mi. Morbi quis urna vel neque vestibulum tincidunt at quis quam. Aliquam in cursus orci. Sed nibh erat, aliquet vitae tempor quis, maximus in metus. Quisque fringilla quam a odio hendrerit, non condimentum mauris iaculis.

Built-in SEO

Some of the basic SEO (Search Engine Optimisation) is taken care of automatically via the Meta Tags function where 'tokens' generate various standard and generic SEO settings. 

Further improvements and fine-tuning can be done on individual post settings via the plug-in "Real time SEO for Drupal" which now appears at the bottom of the article template.  

This video explains what it does and how to go about the settings.  Fast-forward to 3:24 to skip explanations about how to install.

 

Video file

A few practical notes: Upon the first save of an article draft an URL alias gets generated from this setting.  That is the part of the article's link that follows after xray-mag.com

The purpose of this function is to create a meaningful and legible URL in place of the default article number which look like this and doesn't make much sense: https://xray-mag.com/node/15663

Image
URL alias

After the first save which generated the URL then untick the blue box like this:

Image
Unticked box

 

By unticking this box the URL can now be edited via the SEO function in which the URL is called 'Slug'

Why would you want to edit this slug?   In this case, there is no need to because the shown generated URL is fairly short.  In other cases, however, the system can generate some fairly long and gnarly URLs which should be shortened. But for SEO reasons and for legibility.  They don't need to be exhaustive anyway

Image
Slug

Also important to note is the SEO title is not the same as the actual title. It just can be (identical) and the field is indeed pre-loaded with a copy of the article's real title - which can then be changed afterwards to something more SEO-friendly. 

But if you edit the title here, you only change how it appears in search engine listings as shown.  The changes you make in this field are not reflected back to the post's title.  The aim of any edits is to make the search engine listing look meaningful as emulated in the snipped preview.

The Meta description is initially preloaded with the body text (shown) - which doesn't make any sense and I don't understand why the system is set up that way.  

Instead, the Meta description is quite similar to our subheader field, also known as a "standfirst" in newspaper conventions

Often they can be identical but as the meta description is limited to 156 characters before it overflows and gets cut off some editing is often required.

The standfirst and meta description should concisely summarise what the article or post is about.

This is how the SEO settings for this article ended up looking - note the slight differences between the real title and subhead and the edited variations below

Image
SEO screenshot

 

 

This an example from a different article which is about scorpion fish:

Image
scorpion fish article

 

Advertisements