How to Add Images to your Blog

Navigate to the Blog Editor

1. Login to TheWebConsole

2. From the left side menu click Blog and choose Blog posts.

3. From the blog post list either "Add Post" or click "Edit" on the desired blog.

Note: Information on How to Add or Edit a Blog can be found in more depth within separate knowledgebase articles.

Adding an Image Module

1. Once the blog editor has loaded you will be given the option to add different content modules to the page. Click and drag the “Image” content module into the page, you will notice a blue highlighted box appear on the page wherever it is possible to add the module.

Choose an Image

1. Once an Image module has been added onto a page, you will have the ability to either choose an image by either Dragging an image into the module, Browse Image Library, Image and File Manager or Upload an Image

• Drag and Drop Image: You can either drag an image from your computer files into the image box or drag it in from your browser downloads.

• Open File Manager: If your image is already uploaded to your Image and File Manager, click the “Open File Manager” button. This will now show the Image and File Manager window, from here you will be able to select the image you wish to use on the page.
  Note: Adding files to the Image and File Manager is covered in depth within other knowledge base articles. 

• Upload an Image: If you are yet to upload your image click the “Edit” button. This can be done by clicking on the image module and clicking the edit button, the edit button appears as a pencil icon in the top right of the section. Once the edit window appears simply click the “Image Source” drop down box and select one of the following options:

1. Upload from a URL OR Choose from File Manager: You can either enter the URL of the image or select an image from your image and file manager.
2. Upload from this device: Click the "Choose File" link and this will open your computer's file explorer. Select the image you wish to upload and click open.
3. Choose from Icon Manager: This will open the icon manager for you to select an icon to use.

2. Once you have selected your image you will then be presented with new options:

• Title: You can also give the image an advisory title which will pop up when the image is hovered over, and you can also link to various things such as pages on your site, third-party websites, and images and files.
• Alt Text: By filling in the Alternative Text field. This helps with optimization and ensures that anyone that has images in their browser turned off can still read what image was meant to be there (this especially applies to visually impaired people).
• Link Type: This area allows you to link the image to either one of your web pages (User-friendly page link), Dynamic page link (brings up a list of pages on your website), External page, or file, email address, or telephone number.
• Image Flex:
• Container Class: This area is to allow our designers to add custom styling to the image.

Caption

1. On the caption tab you are able to add a text caption to the image. Once you add a caption in the text area you will then get an option for the caption position. You will get the options for:

• Bottom
• Top
• Left on Desktop & Top on mobile
• Left on Desktop & Bottom on mobile
• Right on Desktop & Top on mobile
• Right on Desktop & Bottom on mobile

Adding Image Styling and Effects

1. Once you have chosen an image you can apply styling and effects by clicking the “Edit” button. This can be done by clicking the image module in the section and clicking the edit button, the edit button appears as a pencil icon in the top right of the section. This will open the edit window allowing you to apply settings from both the Style and Effects tabs, these settings are covered below:

• Default and Mobile Styling

  • Border: Allows you to apply and style a border around the image.

  • Margin: Allows you to add space around your image.

  • Padding: This allows you to add space between the image and other modules within the section.

  • Background: Allows you to set chose if the background is hidden or not hidden.

  • Background Colour: This allows you to set a background color to appear behind the text.

  • Image Align: This allows you to choose the position of the image within the section.

• Effects

  • Default Appearance: This allows you to change the filter of the image.

  • Mouse Hover / Cursor Over Appearance: Allows you to change which filter applies to the image when a mouse hovers over it.

2. Once you have added the image and applied the settings and effects, click the “Save” button to save the changes to the image module. 

3. Once you have added your image, applied the style and effects, and done any required edits, click the “Save” button on the bottom of the side menu to save the page and apply the image.

Note: Always remember to follow the final point and save the page itself, or the hard work you have done will not be applied