Digital Learning

Introduction

Built on WordPress, Journal is used by students in a number of ways including reflective blogs, portfolios, collaborative scrapbooks, showcases and forums. It is an ideal tool for sharing media such as images and this guide will show you how to add and align images, create galleries and trouble shoot common image issues in a Journal.

Contents

• The Classic editor and the Block editor
• Images in Journal
• Uploading images to your Media Library
       Adding an image to the Media Library
• Adding images to a post or page from a computer
       Adding images with Classic Editor
       Adding a link to an image
       Text wrapping and Aligning an image
       Editing an image
       Adding images with Block editor
       Adding a link to an image
       Text wrapping and Aligning an image
       Editing an image
       Moving an image block
• Creating an image gallery
      Creating a gallery with the Classic Editor
       Creating a gallery with the Block Editor
• Image trouble shooting
• Further Support

The Classic editor and the Block editor 

There are two different visual editors for creating content in Journal: 

• The Classic editor  
• The Block editor

Which editor you use is determined by the Digital Learning team who will enable the best suited editor for the type of Journal site you are using. 

The Classic editor is a WYSIWYG (What You See is What You Get) content editor that allows you to create, edit, and format your Journal content in a view similar to that of a word processor. There are two rows of editing icons contained within the visual editor. You can find out what any icon means or does by hovering over it with your mouse and then a small tool tip will appear describing the icon and its purpose.

The Block editor uses a different approach called ‘Blocks’ which are content elements that you use to create layouts and add images. Each item you add to a post or page is referred to as a block. The Block editor offers more flexibility than the Classic editor and enables users to create multi-column layouts for their posts or pages that can be useful for displaying multimedia, rich Journal content.

Links: To discover more about the different content blocks in the Block Editor refer to WordPress Editor: Working With Blocks.

Images in Journal  

In Journal images can be added directly to the Media Library or they can be added when creating a post or page.  

Images can be displayed in a number of ways; as a standalone image, as an inline image where text flows around it and as galleries or slideshows. 

Important: Please refer to the Image compression and optimisation in Journal guide before adding images to your Journal to ensure you understand how Journal will process your uploaded images. 

Uploading images to your Media Library 

By clicking 'Add New' on the Media menu in the Dashboard, you can upload images, audio, videos and other files to your Media Library without having to start a new post or page. Please note that the Media Library will look the same for Journals using the Classic editor or Block editor.

Supported image files include JPEGs, PNGs, GIFs. 

• Use JPEGs for photos or images with lots of colours. 
• Use PNGs for simple images, graphics, screenshots, logos or images with transparent backgrounds. 
• Use GIF for animated images only. 

Important: By default, Journal compresses all uploaded images for better performance, ensuring images render on screen more quickly, improving site speed. View the Image compression and optimisation in Journal guide for further advice before adding images to your Media Library.

Adding an image to the Media Library

1. From the Dashboard go to Media > Add New.
    
2. On the Upload Media page click on the Select Files to choose a file from your computer to upload.
   
   Note: You can drag and drop files from your computer into the Drop files here if you are using a web browser that supports HTML 5 (such as the latest version of Chrome, FireFox or Safari).
   
   
3. Locate the file(s) on your hard drive.
   
   
4. Click 'Open' to start uploading the file(s) and you will see a progress bar.
   
   
5. When a file has finished uploading, you will see the thumbnail image appear in the Media Library list with a blue border around it.
    
6. Clicking on the thumbnail image displays the 'Attachment details' window and allows you to edit the Title, Caption, and Description of the image file.
   
   Title: enter the image title to be displayed when the image attachment page is viewed.
   Alternative text: enter a short description of the image. This enhances the accessibility of your Journal site.
   Caption: text inserted here will be displayed as an image caption.
   Description: add information you want displayed here when an image is viewed on its attachment page.
   
    
7. After editing any attachment details, click on the 'X' icon to close the panel and any edits will be saved.
   
   
8. The updated image will then be visible in the Media Library.  
   
   

Adding images to a post or page from a computer 

To insert an image from your computer into a post or page follow the instructions which relate to your Journal's editor: Classic or Block. 

Adding images with Classic Editor 

1. From the Dashboard go to Posts > Add New or Pages > Add New.
   
   
2. Place your cursor where you want the image to appear and then click on the 'Add Media' button.
   
3. In the 'Add Media' window, click on the 'Upload Files' tab.
   
   
4. From here you have two options to add images to the Media Library: 'Drop files to upload' or 'Select files'.
   
   Drop files to upload 
   Drag the image you want to upload onto the Media window.
   The screen will turn blue when processing the image which will then appear in the Media Library.
   
   
   Select Files
   Click on ’Select Files’
   Locate the image on your hard drive that you would like to upload.
   To select more than one image, use your Shift (Window) or Control (Mac) key
   Click 'Open' to start uploading the images.
   While your image is uploading you will see a progress bar.
   
   
5. When the image or images have uploaded to the Media Library you can edit the 'Attachment details' which provides information about the image.
   
   Alternative text: enter a short description of the image. This enhances the accessibility of your Journal site.
   Title: image title to be displayed when the image attachment page is viewed.
   Caption: displayed when a caption is added.
   Description: information you want displayed when an image is viewed on its attachment page.
   
   
   
6. In the 'Attachment Display Settings', by default the image alignment is set to None. Alignment controls the position of the image in your post or page. Choose from: Left, Centre, Right or None.
   
   
7. 'Link To' determines the URL to which an image is linked to. Choose from the default None, Media File, Attachment page or Custom URL.
   None: removes link completely.
   Media File: links the image to its original full size version.
   Attachment page: links image to its attachment page.
   Custom URL: allows you to link image to custom URL.
   
   
8. For size select the size of the image the you would like to insert: Thumbnail, Medium, Large and Full Size.
   
9.  When you have completed editing the image 'Attachment Details' area, click 'Insert into Post'.
   
   
10. Your 'Add Media' window will close and your image will appear in your post or page.
    

Adding a link to an image

When an image is present in a post or page a link can be added to it so when the image is clicked the user will be taken to another page. Links can be external or internal to your Journal.

1. Click on the image that you would like to add the link to. A border will appear on it indicating it has been selected.
   
   
2. In the tool bar, click on the 'Insert/edit link' button indicated by the linked chain icon.
   
   
3. A URL entry field will appear over the image.
   
   
4. Insert a link and click on the 'Apply' button, indicated by the button arrow icon.
   
   
5. To add an internal link, click on the 'Link options' button indicated by the cog icon. A list of pages and posts will appear.
   
   
6. Click on the desired page or post and the destination URL will update. Then click 'Update' to save the link edit.
   

Text wrapping and aligning an image

When inserting images into your posts and pages, you can have text wrap around them to enhance the flow of the content. The alignment of an image in a post or page can be changed to Left, Centre, Right or have No alignment.

1. Click on the image that you would like to align. A border will appear on it indicating it has been selected.
   
   
2. In the pop-up tool bar that appears, select from the following options:
   Align Left: positions the image left, text wraps around the right side of the image.
   Align Centre: positions the image centrally, with no text wrap-around.
   Align right: positions the image right, text wraps around the left side of the image.
   
   
3. The image will then be aligned based on your selection.

Editing an image 

You can edit an image within a post or page. 

1. Click on the image and then click on the 'Edit Image' button, indicated by the pencil icon.
   
   
2. The 'Image Details' window will appear.  
   
   
3. You can edit the following settings in the Image Details screen:

Alternative text: enter a short description of the image. This enhances the accessibility of your Journal site.

Caption text: inserted here will be displayed as an image caption.

Align: use to align image left, centre, right or none. 

Size: use to change image size. Select from Thumbnail, Medium, Large, Full Size, Custom Size.

The Advanced options settings which are not necessary to edit include:

CSS Class: add a CSS classes to the image  to override its current settings.

Link Relative: the link’s rel attribute, can be used for adding a nofollow link.

Link CSS Class: a CSS class can be applied to the link. 

Target: select whether the link should open in a new window or the same window. 

Adding images with Block editor 

1. From the Dashboard Go to Posts > Add New or Pages > Add New.
    
2. To insert an image block, hover your mouse over where you want to place the image.
     
3. Then click the plus ‘+’ icon, followed by the 'Image' option block from the menu. If you can not see the '+' icon close to your cursor, click the return button on your keyboard and the '+' icon should be visible.
   
   
4. There are a few options for choosing how to add an image to the post or page. You can upload a file from your computer by clicking ‘Upload’ or by choosing one from your Media Library by clicking ‘Select image’.  

   
   

   Note: We advise against using the ‘Insert from URL’ option. Due to the default visibility and privacy settings on your Journal images links are likely to break which will result in a missing image icon being displayed instead of your desired image.
   
   
5. You can also drag a file from your desktop and drop it into the Image block to upload it. The block will turn blue when processing the image and it will then appear in the post.
6. Once you add an image, you will have a handful of settings in the Image Block toolbar to choose from which appears on the right of the screen.
   
   
7. Default is the set image Style, but images can also be displayed with rounded corners by selecting the 'Rounded' option.
    
8. Under Image settings you can add Alternative text, select image size and adjust image dimensions.
   Alternative text: displays when images don’t load. Alt text helps improve the accessibility of your Journal site.
   Image size: select from Thumbnail, Medium, Large and Full Size.
   Image dimensions: adjust manually by changing the image's Width or Height or resize by selecting a percentage: 25%, 50%, 75%, 100%. The 'Reset' button will return the image back to its original dimensions if you need to undo the edit.
   
   

Adding a link to an image

1. When an image is present in a post or page, a link can be added to it so when the image is clicked the user will be taken to another webpage. Links can be external or internal.
   
   
2. Click on the image that you would like to add the link to. A border will appear on it indicating it has been selected.
   
   
3. In the toolbar, click on the 'Edit link' button indicated by the link icon.
   
   
4. A URL entry field will pop-up over the image, click on the 'Link Settings' button, indicated by the two arrows icon and in the 'Link Rel' field, insert a URL.
   
5. To add an internal link, that links to a post or page in your Journal, click on the 'Edit' button represented by the pencil icon. Start to type the name of the post or page in the Link Rel' field and it will appear in the drop down list. Click on the desired title link and then click on the 'Apply' button to save your edit.
   
   
6. Finally click on 'Update' to save any edits to the image.
   
   

Text wrapping and Aligning an image

Once you’ve uploaded and added an image into your post or page, you can change its alignment in relation to the text within the post or page.

1. Click on the image you have added to your content. A border will appear on it indicating it has been selected.
   
   
2. This toolbar that appears contains the alignment options for the image.
   Align left: surrounding text blocks will be automatically positioned to the right of the image.
   Align centre: surrounding text blocks will be automatically positioned above and below the image.
   Align right: surrounding text blocks will automatically be positioned to the left of the image.
   Wide width: wide width alignment takes the image and stretches it out past the current text width, while still leaving some room on the left and right sides of the image.
   Full width: full width is similar to Wide width, except that it does not leave any room on the left and right sides of the image.
3. Select the required alignment option and it will be applied.
   
   
4. Click off the image to deselect it and the pop-up toolbar will disappear.
   

Editing an image 

You can edit an image within a post or page. 

1. Click on the image and a border will appear on it indicating it has been selected.
2. In the image block toolbar you can do a number of things such as adding a link, cropping or replacing the image.
   
   Link: click on the Edit link button indicated by the link icon. From there you can enter an URL.
   
   Crop: click on the Edit link button indicated by the square like icon. The image will be cropped. To apply the crop click 'Apply' or to return to its original dimensions, click 'Cancel'.
   
   Replace click on 'Replace' and from the dropdown menu you can locate the replacement image from the Media Library or you can upload a new image.
   
   More options: the more options button, indicated by the three dots offers further options such as Copy, Duplicate or Remove block, which will delete the image.

Moving an image block

You can move the position of an Image Block within a post or page.

1. Click the Image Block that you would like to move.A border will appear on it indicating it has been selected.
2. In the Image Block Image toolbar, click on the move button, indicated by the arrow icons. 
   Move up: shifts an image block up. 
   Move down: shifts an image block down.
   

Creating an image gallery

An Image Gallery is used when you want to display a series of photos in a gallery on a post or page.

You can insert an image gallery into posts or pages by either:

• Uploading images from your computer
• Using existing images from your Media Library

Tip: You can extend the types of image galleries you insert into posts and pages to include tiled mosaic, square mosaic or circular grid using the Tiled Galleries module in the Jetpack plugin. If you have the Jetpack plugin installed on your Journal, your Module Lead should be able to offer guidance on how to use it.

Creating a gallery with the Classic Editor

You can insert an image gallery into your posts by uploading images from your computer using images already in the Media Library. By default, image galleries are inserted in the style of a thumbnail grid. 

1. Go to an existing page or post or to create a new one go to Posts > Add New or Pages > Add New.
   
   
2.  In your post or page, place your cursor where you want the image gallery to appear.
   
   
3. Click on the 'Add Media' icon.
   
4. In the 'Add Media' window click on 'Create Gallery' from the left menu and then either select existing image files from your Media Library or by uploading them from your computer's hard drive.
   
   
5. Click on the images you would like to include in the Gallery. When selected, a border will appear around each image. From here you can access the 'Attachment Details' window for each image allowing you to edit the title, caption, alternative text and description of each image.
   
   Alternative text: enter a short description of the image. This enhances the accessibility of your Journal site.
   Title: enter the image title to be displayed when the image attachment page is viewed.
   Caption: text inserted here will be displayed as an image caption.
   Description: add information you want displayed here when an image is viewed on its attachment page.
   
   
6. After adding any 'Attachment Details', click on the 'Create a new Gallery' button which will take you to the 'Edit Gallery' window.
   
7. From here you can change the order of photos by clicking on the 'Reverse order' button or clicking on the 'Random order' tick box. Alternatively, you can reorder the images manually by clicking on the image and then dragging them in the desired order.
   
   
8. From the toolbar on the right, you can choose how you want the gallery to be displayed in the 'Gallery Settings' area by adjusting settings such as Link to, Column number and Size.
   
   Link to:
   
   • Attachment page: links the thumbnail image to a page set up specifically to display the image with all image details. Appearance of the attachment page varies depending on your theme.
   • Media file: links to the thumbnail image directly to the full size uploaded image.
     
     
9. Columns: controls the number of columns of thumbnails that are displayed in your gallery.
   Random Order: select this option if you want the image order to change each time the page loads.
   Size: thumbnail is the default image size but you may also choose from Medium, Large or Full Size.
   
   Note: If you have the Jetpack plugin installed you will also see in the settings options for Type that include Tiled Mosaic, Thumbnail Grid, Square Tiles, Circles and Tiled Columns. 
   
10. When finished adjusting the 'Gallery Settings', click on 'Insert Gallery'.
    
    
11. The 'Add Media' window will close and your image gallery will appear in your post or page editor.
    
12. To view the gallery on the front end of your Journal click on the 'Preview changes' button and a new tab will open in your browser displaying your new gallery.
    
    
13. To edit the gallery, click on the image group and a border will appear around them to show they are selected.
    
    
14. Click on the 'Edit' button indicated by the pencil icon. The 'Edit Gallery' screen will open and from there you can edit the 'Gallery Settings'.
    

Creating a gallery with the Block Editor

The Gallery block allows you to easily add multiple photos to a post or page.

1. Go to an existing page or post or to create a new one go to, Posts > Add New or Pages > Add New.
   
   
2. To add a 'Gallery Block', locate where you would like to insert the gallery with your cursor. Click on the 'Add Block' button indicated by the '+' icon and select 'Gallery' from the dropdown menu.
   
3. You will be presented with a few options for adding images to the gallery. You can drag images on to the gallery dialog window, upload new files or select existing ones from the Media Library.
   
   
4. Once you’ve uploaded your images or have chosen them from your Media Library, you can edit the title, caption, alternative text and description of each image in the Attachment Details' panel.
   Alternative text: enter the image title to be displayed when the image attachment page is viewed.
   Title: enter a short description of the image. This enhances the accessibility of your Journal site.
   Caption: text inserted here will be displayed as an image caption.
   Description: add information you want displayed here when an image is viewed on its attachment page.
   
   
   
5. After adding any 'Attachment Details' click on the 'Create a new Gallery' button which will take you to the 'Edit Gallery' window.
   
   
6. Then click on the 'Insert Gallery' button.
   
   
7.  The image gallery will appear in your post or page editor.
   
   
8. From the toolbar on the right, you can choose how you want the gallery to be displayed in the 'Gallery Settings' panel by adjusting settings such as Columns, Crop, Link to and Image size.
   Columns: controls the number of columns of thumbnails that are displayed in your gallery. You can select between 1 column and 8 columns.
   Crop: enable this and thumbnails will be cropped to ensure portrait and horizontal images evenly align to the gallery.
   Link to:
   Attachment page: links the thumbnail image to a page set up specifically to display the image with all image details. Appearance of the attachment page varies depending on your theme.
   Media file: links to the thumbnail image directly to the full size uploaded image.
   Image size: large is the default image size but you may also choose from Thumbnail, Medium, Large or Full Size.
   
   
9. To arrange the order of the images in the gallery, click on the image you would like to move and two arrow buttons will appear indicated by the '<' and '>' symbols. These buttons enable you to move an image forward and backwards.
   
   
   
10. To replace an image in the gallery, click on the image and the 'Replace image' button appears indicated by the pencil icon. You will then have options to upload a new image or use one from your Media Library.
    
    Note: We advise against using the ‘Insert from URL’ option. Due to the default visibility and privacy settings on your Journal, image links are likely to break which will result in a missing image icon being displayed in your galley instead of your desired image.
    
    
11. To move the position of a Gallery, click on the Gallery Block. When selected, a border will appear as well as a tool bar at the top of the Gallery Block. Select the Drag option indicated by the six dots icon or the Move Up, Move Down buttons indicated by the arrow icons.
    
    
12. The 'More Options' button indicated by the three dots icon, allows you to do things such as Copy, Duplicate, Edit the HTML of your gallery or Remove the block, causing it to be deleted.
    
    
13. To view the gallery on the front end of your Journal click on the 'Preview' button and then click on Preview in new tab.
    
    
    
14. A new tab will open in your browser displaying your new gallery.
    
    

Image trouble shooting

If you are experiencing issues with images in Journal, please refer to the advice below before seeking assistance from your Module Lead or the Digital Learning team.

Why do my images appear to be missing from a page, post or gallery?

If a missing image icon appears in place of an image, go to the Media Library to ensure the image is present in the Library. The Media Library contains all of the media you have uploaded to your Journal, but not media that you’ve linked to externally.

If you have added an external image, by the Insert from URL method, the image will not appear in the Media Library, and any changes to the source URL will break your link, causing the missing image icon to display.

Additionally, linking to any external media that is password protected (eg hosted on a Google Drive or OneDrive) will display as a broken link to anyone who isn’t logged in to your account.

If images are missing from an image gallery you have created with the Jetpack plugin, the default visibility and privacy settings of your Journal may need to be reviewed. Please contact your Module Lead for advice or the Digital Learning team.

Why can't I add images to my Journal using the 'Insert from URL' option?

Due to the default visibility and privacy settings on your Journal, image links are likely to break which will result in a missing image icon being displayed in your galley instead of your intended image.

If you want to use media from an external source, we recommend you right click and ‘save as’ the image to your computer, and upload it to your Media Library to use in your Journal.

Why do my images appear to be blurry or pixelated when viewed oa page, post or gallery?
By default, 'Enable image optimisation' is selected on all newly created Journals to automatically resize images when they are uploaded to your Journal. This helps reduce storage space usage and ensures that the images are optimised for viewing online and to display quickly on screen. In some cases optimised images can appear blurry or pixelated. To manage this you can compress your images in an image editor before uploading them to Wordpress so you can control the compression rate. View the Image compression and optimisation in Journal for further guidance.

Further Support

For general queries about the Learning Space, students should first contact their module leader or personal tutor. For any other comments or issues within this guide, please contact the Digital Learning Team via dlsupport@falmouth.ac.uk. Alternatively, please refer to the numerous help guides found on our Knowledge Base. 

View the Accessibility Statement for all of our support guides.