This is a "shortcodes" page.

This should not be thought of as a standard content page, but as a page where all of the available styles appear in one place. Obviously most pages shouldn't look this "busy".

"Shortcodes" is the normal name used for a page which defines all of the styles available. These styles may be used on other pages in a variety of ways. Any decent CMS will support these styles and layouts, or we can manually build a template based on these definitions.

This page is not intended to show how the page layout looks (i.e. the specific location of type and images). It is just to define how each item of type looks, the sizes of images, colours and styles for widgets, tables and embedded code.

Look at the other pages in this section for details of how these styles are applied to page templates.

This is an example of the "highlight" style, used to call attention to entire paragraphs. You can use any standard font formatting (h1, h2, etc) within this box.

Example of embedded thumbnail slideshows

This page shows 4, because this looks good on the page. But you can use any number you choose. The design forces the slides to be 50% width (if the page is above an iPad size), so using a single image like this might look odd.

Making It Safe For IDPs In Iraq

Sample gallery with multiple images

Philippines emergency

MAG trained military personnel to clear explosive items scattered by Typhoon Haiyan.

Women's Day

Celebrating Women's Day 2014, these are some of the women we're inspired by.

Lebanon

"I found more than 50 cluster bombs around my house" - Abed, from Arnoun village.


This is heading style 1 (h1)

This is normal (paragraph) text. All of this text can be formatted with bold, italic, underline, strikethough or a mixture of them. You can also make this text into links which look like this (note, most of the link examples don't go anywhere, because this is just a demo).

And this is small text, which should be used for footnotes etc. In this instance it's shown next to an icon from the FontAwesome icon collection (which you can use throughout the site). You don't need to use this style, or the icon, but it might be helpful occasionally. You can even use it in combination with "blockquote" to show a very small comment which you want to draw attention to.

Note this is a specific function, which is different from images which are simply placed in the page.

Below this line of text is a HR (horizontal rule) to divide content.


This is heading style 2 (h2)

This is heading style 3 (h3)

This is heading style 4 (h4)

This is the "lead" class, which should be used to introduce a page - a bit like the sub-title you'd commonly see below a magazine article.

Remember, all of this is still within one full-width content space, with lots of design elements within it.

You can use the "blockquote" style on entire paragraphs, which is useful for drawing attention to quotes or important information. This style has the bar to the right, and uses a slightly larger font size. Within the paragraph you can add other styles, line breaks, headings (h1 or h2, for example) links, etc. The "small" style becomes a credit when used in a blockquote, as below... Russell Jones
This is what an inset blockquote looks like, and can be added within any paragraph(s).

You can also add a blockquote as an "inline blockquote" style, which makes it 50% of the content space, aligned right. This should only be used for very brief quotes, because it may become very long when viewed on a small screen like a phone. As well as normal text links within the content, you can add links which are styled to be special. These are ideal for calling attention to a specific file you want people to download or open. They look like the following few links.


Look at the full list of FontAwesome Icons icons you can choose from here


Ordered list (i.e. numbered).

  1. You can turn any paragraph into an ordered or unordered list
  2. Although lists can contain formatting, we recommend you only use it sparingly - it becomes hard to read it you use a lot of complex formatting
    1. Faucibus porta lacus fringilla vel
    2. Aenean sit amet erat nunc
  3. Integer molestie lorem at massa

Unordered list (i.e. bullets).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
  • Integer molestie lorem at massa

Table styling

# First Name Last Name Email address
1 Russell Jones russelljonespersonal@gmail.com
2 Geoff Turner geoff.turner@maginternational.org
3 Mike Fryer mike.fryer@maginternational.org

Images and videos

Images which resize to fit

On a responsive website, there is no longer a concept of a fixed-size element. All images and videos must scale to fit the screen on which they appear.

For this reason, images are produced at 25%, 33%, 50% or 100% of the width of content space. Examples are shown below:

This text wraps around the image, as long as it's long enough to do so. On some screens it will wrap, on others it won't. Note that the size (25%, 33%, 50%) only happen if the screen is large enough. On small screens, such as phones, the image will appear at larger % width, so it doesn't become too tiny).


This text wraps around the image, as long as it's long enough to do so. On some screens it will wrap, on others it won't. Note that the size (25%, 33%, 50%) only happen if the screen is large enough. On small screens, such as phones, the image will appear at larger % width, so it doesn't become too tiny).


This text wraps around the image, as long as it's long enough to do so. On some screens it will wrap, on others it won't. Note that the size (25%, 33%, 50%) only happen if the screen is large enough. On small screens, such as phones, the image will appear at larger % width, so it doesn't become too tiny).


This text wraps around the image, as long as it's long enough to do so. On some screens it will wrap, on others it won't. Note that the size (25%, 33%, 50%) only happen if the screen is large enough. On small screens, such as phones, the image will appear at larger % width, so it doesn't become too tiny).


Example of image with caption

This is the caption. Photocaptions can also be 25%, 33%, 50% or 100% width (at large screen sizes).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra lacus id mollis vehicula. Nam lacinia erat lacus, nec consequat ex sollicitudin at. Quisque eu neque ac nulla iaculis viverra. Sed blandit augue massa, ut pharetra turpis ullamcorper sed. Phasellus ligula lectus, iaculis ac massa eu, vulputate hendrerit tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in sapien augue. Duis fermentum, orci eu sodales sagittis, felis lorem malesuada elit, in placerat libero dolor id justo. Etiam nec accumsan sapien. Quisque pellentesque, arcu a sagittis feugiat, libero massa ullamcorper neque, non consequat nunc velit non erat. Nullam vel ornare arcu. Curabitur nulla mauris, congue non bibendum eu, ultrices a elit. Vivamus placerat eros eget lacus congue, ac mattis augue aliquet. Mauris ultrices elit vel erat mollis aliquam. Etiam pellentesque dolor vitae consequat bibendum. Nunc massa quam, tempor nec elit ac, venenatis imperdiet diam. Maecenas tincidunt vehicula faucibus.

Embedded YouTube or Vimeo videos

Videos are always 100% the width of the content space.

Map within content space

On the current site the country map appears in the side-bar, which isn't always useful, especially on smaller devices (where the sidebar is pushed below the main content). This makes it less usable that it should be.

This design envisages a new formatting option which allows CMS admin to add embedded content (i.e. a map) which is defined as 50% the width of a large content space (100% width on smaller devices), and aligned to the left within the main content.

I suggest using Google maps for this - the alternative (creating your own map image) can be achieved by simply placing it into the content like any other photo or image. Google maps add and remove features quite often, so further formatting may be possible within the map in future.

Post a comment | 3 Comments

Person

Daniel Adero

This is how comments appear. I've suggested a new function that allows users to upload a photo or avatar to represent themselves, and which will appear with the comment. This is simply to make the comments appear nicer, and make it more likely people will read them. But the risk is that people will upload rude or inappropriate images. All comments are moderated, so it might not be a problem, but it's worth mentioning.

Person

Jake Doe

Aliquam adipiscing tincidunt lectus, eget adipiscing magna auctor eu. Quisque rhoncus sollicitudin massa non tempor. Cras sit amet mi ut erat rhoncus adipiscing at vel augue.

Person

Jake Doe

Aliquam adipiscing tincidunt lectus, eget adipiscing magna auctor eu. Quisque rhoncus sollicitudin massa non tempor. Cras sit amet mi ut erat rhoncus adipiscing at vel augue.

Leave a comment

Accepted file-types are jpg, gif, png or bmp. Images must not exceed 1Mb