This user guide discusses how to place an image into a WordPress document (i.e., page, post, Group Page etc.). For the sake of clarity, the term image is used for any media in .jpg, .jpeg, .png, .gif or .ico formats, in general, these will be a photograph, drawing, graphic, or icon.
With any image used on a u3a website, the content creator and/or the web manager must ensure the image has a licence allowing you to use the image or you have the copyright holder’s permission to use the image.
Images can be inserted into a page or post using one of several blocks, including:
In the case of the Gallery and Gutenslider, an additional plugin, Lightbox, is used to display a specific image when selected.
Images can also be placed into tables as discussed here. However, it should be noted that tables should not be used as a formatting tool, e.g. a table must not be used to replicate a gallery on a specific page as found previously in Site Builder.
Image Block #
To insert a single image into the page, the Image block should be selected from the Block Editor browser, then select the image using a range of options:
- Upload, allows you to directly select an image present in one of your computer’s directories.
- Media Library takes the user to the Media Library to select an image that has been previously uploaded.
- Insert from URL uses the URL of the image. When you have selected the image on the internet, right-click to select the URL. This should be entered into the box. If this route is used, the option to upload the image file directly to the media library is not available, This however is recommended, as external website URLs can change over time.
- An image can be selected from the Media tab of the Block Inserter toolbar.
Once uploaded, the content creator can add or modify the Alternative Text. It is important to note that if the Alternative Text has been added to the image in the Media Library, it will copied across with the image. Any change made to the Alternative Text of an image within a page is NOT copied back to the image in the Media Library.
After uploading the image appears on the page, with its associated Toolbar as shown:
As shown the following options are available from left to right:
- Ability to transform to other block types, including Media and Text, Gallery or Cover.
- Drag the block to another location on the page.
- Move the block up or down one block relative to its current position.
- Apply a Duotone colour filter. The duotone effect is equivalent to a black-and-white filter, but instead of the shadows being black and the highlights being white, the content creator can select a colour for the shadows and highlights.
- Align the image, i.e. left, centre or right.
- Add a caption to the image
- Add a link to the picture.
- Crop the image
- Apply text over the image, note this effectively converts the image to a Cover block.
- Replace the image. On selection, a box appears with the option of opening the media library or directly uploading an image.
- A further set of options, including deleting the complete block
Once uploaded the image can be aligned as follows:
- Not aligned – the default option for uploading
- Align Left
- Align Right
Selecting Align Left or Align Right results in text from the paragraphs following the image (in this case the image is sized 211×259 pixels) to wrap around the image as shown:
A further set of options is available in the setting sidebar as shown:
This allows the content creator to:
- Add or modify the Alternative Text. to conform with the context of the page.
- Change the aspect ratio as required to optimise page layout. If the original aspect ratio is deselected two options are available:
- Cover, where the image covers the available space evenly and will in all probability result in the image being cropped.
- Contain. The image is shown at the selected aspect ratio but with the size adjusted to the page, or block constraints.
- The actual picture size in pixels can be selected.
- The resolution of the image can be selected. It should be noted that the image quality will be degraded if the image resolution is set lower than that required by the size of the image.
- An option of Expand on click is available, this allows the viewers to select a full-screen version of the image, by selecting the image with the browser. This feature cannot be used if the image was entered via an external link.
Media and text block #
If a specific block of text is required alongside or above the image, the Media and Text block can be used.
After selection, WordPress inserts two areas, one for the picture, and one for the text:
In the above example, the image can then be inserted in the left-hand section and text added to the right-hand section. The text can be positioned to the right, left, or above the image using the position options. Text is entered using +, and can include multiple blocks of paragraphs, lists, tables or quotes.
Available options included on the block Toolbar include.:
- The ability to stack the image and text on a mobile, as opposed to a side-by-side presentation when a monitor or tablet is used to view the page.
- The image can be cropped to fill the column, this may require adjusting the image position by using the Focal Point Picker.
- The width of the media column.
It should be noted that it is not possible to add a caption to the image in this block. Any copyright information etc, needs to be added to the supporting text. as required. This is a known WordPress issue,
Image Gallery #
The Image Gallery is used to display multiple images in a single block, as shown below:
To create a gallery, go to the required place on the page and select the Gallery Block.
The media option pop-up is then displayed, giving the option of uploading the images or selecting from the Media Library.
If the Media Library is used, select the images required and the selected images will display a tick. At this stage, a caption, and alternative text can be added. Once the selection and annotations are complete, select Create a New Gallery to confirm the selection and then on the next screen, Insert Gallery.
It should be noted that the image caption appears overlayed on the image. In the example above ‘binary comment’ and ‘Developed using darktable 3.4.11’, are generated by the Image Editor – hence all captions and Alternative Text should be reviewed carefully.
The selected images will then be inserted into the page. Once placed, each image may be edited as individual images, use the breadcrumbs to swap between the image and the gallery. Captions, descriptions and Alt Text may be added to each image as required.
As shown above, the example gallery has been configured as four images across by two down, with the images being cropped to align the images, for this reason, the complete image is not visible. The preinstalled, Lightbox plugin, is used to display individual images when selected.
The options selected in a Gallery settings sidebar are:
- The COLUMNS slider is set to the required value (4 in this case)
- The Crop images, option is selected.
- Media File is selected in the LINK TO option box, on selection a confirmation will briefly appear in the lower left of the screen.
- If required the selected image can be displayed in a new tab.
The gallery toolbar provides the following options, from left to right:
- Change the gallery to another block, including Image, Columns, Gutenslider, and Group.
- Drag the complete block
- Move the block up and down the document
- Align left, right, or centre.
- Add or rove the Gallery caption.
- Add more images to the gallery
- Further options, include deleting the complete gallery.
if the Lightbox option is selected, when the gallery is being viewed a “hand” icon will appear over the individual images, when selected the full image is shown, hence selecting the bottom left image, results in:
Options are available to move through the complete gallery or close the Lightbox, using the arrows..
The Gutenslider is a powerful third-party block that provides a media slider capability to a u3a’s website, which will increase visitor engagement. In principle, the Gutenslider presents a sequence of slides (a gutenslide) that can be either an image, text or a mixture of both.
Images Only #
To add the slider to a page or post, select the Gutenslider Block from the media section of the block editor, you are then presented with two options:
To show only images, select Media Library to select a set of images – this is done identically as with the gallery. Select Create a new gallery upon completion of the selection, then Insert gallery to load the completed slider.
A typical fixed-height image in the Gutenslider, showing the key feature, is shown below:
Images with additional content, including captions #
Text can be added on top of an image, as a paragraph block, by selecting Add slide content here. Care must be taken with the text colour to ensure that it is visible over the image. If you wish for an image to include a caption, this process needs to be followed as the caption inserted in the Media Library is not carried through to individual Guterslides. Note if a caption is added to an image, and Lightbox is selected, the overlay caption will not appear in the Lightbox display.
To add a caption:
- Ensure changing is selected under SLIDE MODE.
- Add the caption to replace Add slide content here.
- Select the required font colour and size, ensuring the contrast between the image and caption is satisfactory.
- Position the caption using the Change content position option in the Gutenslider Toolbar.
Gutenslider can also be used to generate a slide show, for instructions or other information as required. To develop a multimedia presentation:
- Select Add Empty Slide,, this allows the background to be selected, the options are none, a colour, or an image. In the example below:
- The slide background is the image of a hand of cards.
- The paragraph has a background of u3a Light Blue and a text colour of u3a Orange. The text has been added to replace Add slide content here.
- The + Add Empty Slide allows the author to extend the slide show as required. If a text overlay is required, the background type must be set to Image
It is recommended that if this approach is used to present information, the Autoplay option is deselected, so that page visitors have time to read the text – typically the display time set in Gutenslider will only allow ten words or so to be read and understood then select the forward arrow.
Gutenslider Option #
The Guterslider has a considerable number of options as follows, for full details reference to the plugin documentation is advisable, however for the majority of u3a applications, the following options should allow the display to be optimised:
- General: A wide range of options are available as follows:
- Animation: sets the transition between slides: slide, fade or flip.
- Slide Mode: As text can be added on top of the images, this option determines if one set of text appears over all the images, or the text content is different over each image.
- Slider Height: The height of the displayed images, when fixed all images are cropped automatically or adaptive so the display size changes as the image size changes.
- Minimum Slider Height as a percentage of the screen or in pixels.
- Slides to show, in the auto mode, the number of images is set by the image size and the minimum slider height.
- Five options are available to be set or deselected as required: Autoplay, Show Arrows, Shot Dots, Key Board navigation, Loop
- An option to use the slider to provide a background to the whole page is provided – if this is used accessibility issues must be considered.
- Autoplay: A stop on hover option is selectable.
- Arrows. Allow the selection of the forward/reverse arrow design and size to be selected.
- Progress. Allow the configuration of the progress dots, their location, size and colour can be adjusted.
- Lightgallery. Enables the Lightgallery option – this allows the display of the full image required when selected. In addition, you have the option to display thumbnails below the image when in the Lightbox display
- Dividers. Allows a coloured divider to be placed at the top and/or bottom of the image.
- Spacing. Adjust the spacing around the image
- Advanced. Gives the page editor the capability to disable the slider on desktops, tablets or mobiles are required.
Cover Block #
The Cover Block allows text to overlay an image, this could be particularly useful for group or event headers. This text can if required be also used as a caption if required.
On selecting Cover, the block presents two main options for the background, either an image or a solid colour from the u3a pallet. If an image is selected, text can be added as required.
Options are available, left to right in the Toolbar.
- Transform to a different block, including Image and Media and Text.
- Drag the block to another location on the page.
- Move the block up or down one block relative to its current position.
- Apply a Duotone colour filter.
- Align the block, i.e. left centre or right.
- Position the contents within the image, in the above case top right has been selected.
- Toggle the image from cropped to full size.
- Replace the image.
- Further options include deleting the block
The settings box contains the option to allow the size of the inner blocks to be modified to optimise the display. In addition, when a cropped image is used, a focal point picker is provided to adjust the image relative to the caption.
It is important to note that within the style sidebar, an overlay opacity setting is provided, at 0% the image is as uploaded, while at 100% only the overlay is visible. In addition, options are provided for the text colour and the size of the padding and margins.