Shortcodes

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". This should show the style of a glossary definition

"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.

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).

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:

Alt textThis 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).

alt

This is a caption


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).

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

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.

Example of an embedded blueimp gallery

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 | 1 Comment

Phil

This is a test comment

Leave a comment