We are going to create an article using a technique that will display a small "intro image" image at the start of the content and a "main image" within the article content if a "read more" has been applied.
This type of article technique is often considered ideal for use as "news" article
When writing a long news article it is preferable to add a “read more”. This will split the news article so that the introduction to be displayed on the news page and a "Read more" button will show to direct you to the full article.
Adding a Read More
To add a "Read More" to an article simply position the cursor at the required point of the text and then click the "Read More" button below.
A red dotted line will appear to indicate where the article will split.
This website has been preconfigured to handle images so that they are automatically optimsed for use on the web to ensure they are diplayed at a suitable size and the filesize is optimsed to improve page loading.
All images have had their width specified and the height will be automatically configured so as to retain the original images proportions.
"Intro images" are configured to display at a max width of 250px"Intro images" are configured to display at a max width of 350px
NOTE - If an image has been uploaded at a size smaller than the specified "max width" then they will display at their original size
To insert and image select the Images and Links” tab (above) and new set of options will appear. (Please click the "images and Links tab now to take a look, you can return to this text by selecting the "Content" tab.)
The ‘intro’ image is the image that displays before a “read more” and the “Full Article Image” within the main article. (after the read more)
If a “read more” isn’t used then the "main image” will not be displayed.
To add an image simply click it’s corresponding “select” button.
The “image Manger” pop up will appear from which you can select images from the folders.
(A test image is available in the “news” folder.)
To upload an image into a selected folder simply select the Upload icon (the blue arrow pointing upward) and the system will walk you through the process.
Once an image has uploaded you will need to select it from the list and then click the “insert” button (located bottom right)
TIP - The image path will now show in the text field to indicate the image has been correctly selected and your are able to preview the selected image by hovering over the eye icon.
NOTE - It is preferable to add an "Alt text" to any images used on the web for accessibility. The "Alt text" should describe the image)
To insert a "Main image" simply follow the same process.
When using this technique no images will show within this editor however they will be displayed in the resulting article.
One you are happy that you have completed your editing click the “Save” button (at the top of this page)