Article

Update

It is no longer necessary to upload your article image to assets first. This component now allows drag-and-drop uploading of images. You can still browse through assets if you need to use an image you have already uploaded. We detail both processes.

Use this guide to add and edit the article component.

Features

The component:

allows you to write an article description
displays a single image
allows your displayed image to align left or right
wraps article description text around the image
can be used on the homepage, content page, and inside the column control on these pages.

Before you start

You will need to have an image for your article.

When you add images to your website it is important that you follow the Image guidelines.

You need to upload the image to Assets before you can add it to an article component. Go to our Upload an image to assets guide.

Navigate to the page where you want to add an article and you are ready to begin.

Step 1: Add article component

Select Drag components here.
Select the plus icon.

Select Article Component from the Insert New Component list.

Step 2: Edit the article component

Select the Article component.
Select the spanner icon. This is the Configure option.

Step 3: Enter the article title

In the Heading text field, enter the title of your article. For example: Bike safety education.

Select the Heading style of your article. A drop-down will appear with the heading levels that you can choose from.
Remember to follow heading structure and not skip a heading. For example, do not follow a Heading 2 with a Heading 4. Use Heading 3. For more information on heading levels, see the accessibility guidelines.

Step 4: Add an image to your article

Your article must have an image. You can add a news article image to the Image field.

In the Image path field, select the binoculars (Search through assets) to navigate through your image and document assets to where you have previously saved your image.
Once you have found your image, select the icon to the left of the image name. The tick will appear and your selection will turn blue.
Select the Select button in the top right.

Alternatively:

Drag and drop your image into the area on the component, or choose the upload from your computer link to upload the file directly without searching through assets. The maximum file size using this method is 15MB.

The image path appears in the Image path field.
Select Image display. A drop-down will appear and you can select left or right. This will allow your text to wrap around the image on the side not selected. For example, if you choose right the image will display on the right, and the text will wrap around on the left.

Enter the alternative text for your image into the Alt text field.
See the Image guidelines for more information on alt text.

Step 5: Write your article

Select Article description tab.
Enter your article content. You can use the rich text editor to format your article. See Rich text editor to learn more.
Select the tick on the top right of the pop-up to save the article component.

Completed article component

Example of an article on a web page:

Publish your changes

For changes to be updated on your live school website you will need to publish the page.

You may also find useful:

Return to top of page

School website service training and support