Introduction #

This user guide discusses how to add an image to a WordPress document (i.e., page, post, Group Page etc.). For 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.

Before using this guide, it is assumed that you are familiar with (i) the concept of block editing, (ii) uploading media to the Media Library and (iii) Copyright.

When an image is used on a u3a website, the content creator and/or the web manager must ensure that 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:

• Image Block
• Media and Text
• Cover Block
• Gallery
• Gutenslider

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 used in Site Builder.

Captions #

All WordPress image blocks allow the incorporation of a caption, except for the Media and Text and Cover Block. The Cover Block displays an image that the content creator can add text and other content over the top. In the Gallery block, the captions are overlayed in the Gallery view, but not shown when the individual image is selected. The Gutenslider can show the caption if the option is selected, the font colour and size will need to be adjusted to aid readability.

Where a caption can be added, it should provide details that will allow the viewer to comprehend the purpose of the image. It should be noted that 8the available space for captions in WordPress is somewhat restricted compared to other forms of media. In addition, when using images that are associated with a licence, this must be shown as part of the caption.

It should be noted that the image caption appears as an overlay to the image. The caption can be entered when the image is uploaded to the media library or when the image is used. It should be noted that changing the image’s caption on a page, does not replace the caption attached to the image in the media library.’ It should also be noted that some Image Editors automatically enter text into the caption block, eg GIMP can enter binary comment’ or ‘Developed using darktable 3.4.11’ – hence all captions and Alternative Text should be reviewed carefully.

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 from 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, with reference to the page, as follows:

• Not aligned – the default option for uploading
• Align Left
• Centre
• 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:

Two further sets of options are available from the sidebar, settings and style as shown:

Media and text block #

If specific text is required alongside or above the image, use the Media and Text block.

After selection, the block gives the content creator two areas, one for the image, and one for the text, or other blocks:

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 or within the metadata as required. This is a known WordPress issue,

Cover Block #

The Cover Block allows text to overlay an image, this could be particularly useful for images used on the home page or headers for groups and events.

On selecting Cover, the block presents two main options for the background, either an image or a solid colour from the u3a pallet, once 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 to one of nine options, in the above case, the 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.

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.

The selected images will then be inserted into the page. Once placed, each image may be edited as individual images, using 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 a four-by-two grid, 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 the 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 remove 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.

In a Gallery the image caption is overlayed on the image, and not displayed then the image is selected and displayed in Lightbox.

Gutenslider #

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 while placed on individual Guterslides, will need to be modified for readability issues. 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 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 if 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 image’s top and/or bottom.
• 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.