u3a SiteWorks

Introduction #

This user guide discusses adding an image to a WordPress document. 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, (iii) copyright, and (iv) accessibility issues.

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

An additional plugin, Lightbox, is required to display a specific image when selected in either a Gallery or the Gutenslider.

In addition, WordPress, and therefore SiteWorks, can add a Featured Image to a post or page. A Featured Image is typically defined as an image that represents (or acts as a visual cue) for the page or post. As the display of a Featured Image is theme-dependent, it cannot be used within group or event pages or on a conventional page. For this reason, add images either as an image or within a media and text block.

Adding images using tables is discussed here. However, tables are not a formatting tool. If a group of images are to be displayed in a row/column format, the gallery block should be used.

Icons are small images or symbols used to represent a specific tool, file, or command (e.g., a magnifying glass for “Search,” a floppy disk for “Save,” or a social media link). WordPress provides an extensive library of Icons that can be easily added via the block editor, as discussed here.

Captions #

All WordPress image blocks allow captions, except for the Media and Text, Cover Block and the Gutenslider. 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 overlaid in the Gallery view, but not shown when the individual image is selected in Lightbox.

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 the available space for captions in WordPress is somewhat restricted compared to other forms of media. In addition, when using images 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.
• Changing the image’s caption on a page does not replace the caption attached to the image in the media library.
• Some Image Editors automatically enter text into the caption block; e.g. GIMP can enter “binary comment” or “Developed using darktable 3.X.X”- hence all captions and Alternative Text content should be reviewed carefully.

Image Block #

Uploading the image #

To insert an image into the page, the Image block should be selected from the Block Inserter, then select the image source:

• Upload lets you select an image directly from one of your computer’s directories.
• Media Library takes the user to the Media Library to select a previously uploaded image.
• Insert from URL uses the current URL of the image. When you have found 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 route is not recommended as external website URLs can change over time.

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 Media Library image, it will be copied across with the image. However, any changes to an image’s Alternative Text within a page are NOT copied back to the image in the Media Library.

If the image is purely decorative, leave the Alternative Text blank; additionally, the ” Mark as Decorative ” option below the alternative text box should be selected.

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.
• Align the image, i.e. left, centre or right.
• Apply a Duotone colour filter. The duotone effect is equivalent to a black-and-white filter, but with a modified colour palette.
• Add a link to the image, allowing the following options:
  • A link to another location can be added.
  • Link to image file: The original image can be viewed at full-screen resolution.
  • Link to attachment page: Provides the image’s title and description field.
  • Expand on click: When this link option is selected, and visitors hover over images, their mouse pointer will change into a magnifying glass. Clicking on the image will open an enlarged version in the lightbox.
• Crop the image, typically to a standard aspect ratio. The options to rotate or flip the image are also available.
• Apply text over the image; note that this effectively converts the image to a Cover block.
• Add a caption to the image
• Replace the image. After selecting, 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 to the page, the image can be aligned, with reference to the page, as follows:

• Not aligned – the default option.
• 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:

Display options for an image #

A range of options is available from the sidebar::

---

---

Media and text block #

The Media and Text block lets you display text alongside an image.

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

The image can be:

• Uploaded from an external source.
• From the media library
• Use the previously uploaded Feature Image

The text can then be positioned to the right, left, or above the image using the position options. Text is entered using the block inserter and can include multiple blocks of paragraphs, lists, tables or quotes.

Available options are included on the block Toolbar, from left to right, when an image has been uploaded are::

• Transforming the block into several other options.
• Drag the block to another position.
• Move the current block up or down one block.
• Apply the Dueotoan image if required.
• The position options are as noted above.
• If the image has been uploaded, a link option is available (not shown).
• Add Media, or if media is present, Replace is available.
• Add an editor note.
• A range of other options, including deletion.

It should be noted that an image caption cannot be added to this block. Any copyright or similar information should be added to the supporting text or within the metadata as required. This is a known WordPress issue,

Content, Setting, and Style options are available in the left-hand sidebar, giving the following options:

• Content
  • Details of the images used.
• Settings
  • Width of the media, initially set to 50% of the page.
  • Option to stack the image over the media on a mobile device; this is recommended.
  • Crop the image to fill the default size. As the full image is not shown, the ability to move the focal point is provided.
  • Alternative text for the image.
  • The image’s resolution.
  • The Advanced option for adding an anchor or additional CSS is provided.
• Style
  • The size and colour of the typography can be modified as required.
  • A solid or gradient colour can be applied; this will only appear in the text area unless a PNG image with transparent areas is used.
  • The media Duotone feature.
  • As with all blocks, the ability to add padding, margins, and a border with or without a radius is provided.

Adding an Icon #

Using the Icon Block #

WordPress has a library of over 80 icons, typically those used on websites, that can be added to a page or post. To select an icon, select the Icon block from the Block Inserter, then Choose icon to access the icon library page (A) that shows the available icons. The content creator then selects the required icon. Once the icon has been inserted, reselecting the icon allows the icon to be replaced or deleted ( B)

The settings sidebar allows a label and/or anchor to be added. It is recommended that a label be added to help screen reader users. The icon’s width, colour and background can be selected or modified from the styles sidebar.

Social Media Icons #

To encourage visitors to view other media channels, from your u3a, e.g. Facebook or Instagram, a social media icon can be provided using the Social Media block.

• Place the Block Inserter at the required location, and select Social Icons.
• Click on the plus sign to add the required icon; using Browse All may be required to find the correct icon.

• Select the Icon to add the required address. If an address is not entered, the icon will not appear.

When selecting the Social Icon block, the content creator can see the following in the right-hand sidebar.:

• List View: provides a list of all social media icons added
• Settings options
  • Justification
  • Vertical or horizontal Orientation
  • Open the link on a new page
  • Show text
• Styles Options
  • Default or Pill will add a border as opposed to only the logo
  • Icon colour and background colour
  • Spacing

The example below has the following options selected: Centre Justification: Vertical Orientation: Show text: Pill Shape: Icon colour and background deselected

It should be noted that the Social icons block and the individual social media icons are treated as separate blocks within WordPress; care should be taken during configuration.

Cover Block #

The Cover Block allows text to overlay an image, which could be particularly useful for home page images or headers for groups and events. An alternative to the Cover Block is text with negative margins; this has significant advantages in certain applications. In both cases, the text will be recognised by a screen reader.

Select Cover; the block has three background options: an image (either uploaded or from the media library), a solid colour or the Featured Image of the post or page. 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 blocks.
• 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.
• Position the contents within the image to one of nine options; in the above case, the default central position is selected.
• Toggle the image from cropped to full size.
• Replace the image.
• Add an editing note
• Further options include deleting the block

Content, Setting and Style options are available in the left-hand sidebar, giving the following options:

• Content
  • Details of the images used.
• Settings
  • Options to adjust the image visibility, including a repeating style. A Focal Point adjustment is available if required.
  • Alternative text for the image.
  • The image’s resolution.
  • The Advanced option for adding an anchor or additional CSS is provided.
• Style
  • The size and colour of the typography can be modified as required.
  • The colour of the overlay can be changed, as well as its opacity; at 100%, only the overlay is visible.
  • The media Duotone feature.
  • A layout option for inner blocks.
  • As with all blocks, the ability to add padding, margins, and a border with or without a radius is provided. Additionally, a block spacing option is provided if multiple blocks are added to the cover.

Gallery Block #

The Gallery block displays multiple images in a single block. To create a gallery, insert the Gallery Block at the required location.

The media option pop-up is then displayed; three options are available:

• Uploading directly from the content creator’s computer.
• From the WordPress Media Library.
• Using attached images. These images are uploaded via an option in the Block Inserter; for detailed information, content creators should refer to the WordPress documentation.

If the Media Library is used, select the images, which will then display a tick. At this stage, a caption and alternative text should 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 Gallery of selected images will be added to the page. Once placed, each image may be edited using the breadcrumbs to swap between the image and the gallery. Captions, descriptions, and alternative text (Alt Text) may be added to each image as required.

As with images, the right-hand side bar gives several options:

• Media
  • Provides a list of all the images in the gallery, and allows the addition of alternative text and image replacement when a particular image’s details are selected.
• Settings
  • The COLUMNS slider is set to the required value (4 in this case)
  • Image Resolution. It is recommended that the highest possible is used to maximise the image’s quality.
  • The Crop images to fit option. When selected, the display is far neater and independent of the actual image size.
  • Randomise the display order.
  • Adjust the Aspect ratio of the image, allowing the best presentational fit to be achieved.
  • Advanced settings, including the provision of an anchor.
• Style
  • Ability to set the background colour.
  • Block spacing
  • The provision of a border and, if required, its radius.

The resultant gallery is shown below and is configured as a four-by-two grid, with cropped images.

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 link options:
  • Link to the image’s attachment page to show the title and description.
  • Link the image to the media files.
  • Enlarge on click, with a lightbox effect.
  • No links required
• Add or remove the Gallery caption.
• Add more images to the gallery
• Further options include deleting the complete gallery.

If the Link the image to the media files option is selected, when the gallery is being viewed, a “hand” icon will appear over the image. When selected, the full image is shown. The visitor can move through the complete gallery using the arrows. In a Gallery, the image’s caption is overlaid on the image and not displayed when the image is selected and displayed in Lightbox.

Gutenslider #

The Gutenslider is a powerful third-party block that adds a “slideshow” capability to a u3a’s website. In principle, the Gutenslider presents a sequence of slides (a Gutenslide) that can be an image, text, or a combination of both, thereby enhancing the visitor experience.

Gutenslider has a large number of options to configure how the slider operates. For full details, reference to the plugin documentation is advisable.

Developing a Basic Slider #

To add the slider to a page or post, select the Gutenslider Block from the media section of the Block Inserter. To create a basic display, the following steps are required.

Choosing the slides. #

Add the Gutenslider to the required location on the webpage; the block then requests the addition of media. Each image selected becomes an individual slide.

• Upload selected images from the content creator’s computer, using Ctrl on Windows machines.
• Upload selected images from the Media Library in a similar fashion to a Gallery, using Ctrl on Windows machines
• Ability to add a YouTube video.
• Start with an Empty slide; loads a blank slide that can be edited as required.

Once the initial selection has been made, it is possible to:

• Add a further slide to extend the slide show or delete individual slides (use the list view in the document overview to do this).
• Reorder slides in the list view by dragging.
• Change the slide’s background image or colour.

Adding Content to the Slides #

Once the selected images have been uploaded, it is possible to add additional content to the slides, e.g., paragraphs, lists, buttons, etc. Before adding anything, from the Gutenslider options, select either:

• Per Slide: Unique content on each slide.
• Same on all: Same text on every slide.
• Additional responsive modes are available, depending on the device the viewer is using.

To add content, select the slide in the List View, and add text at the plus sign. The text can be located at one of nine locations by the option in the slide’s toolbar. Care must be taken to ensure that the text can easily be read against the background image or colour.

Adjusting the slider #

Once the slide show is finalised, select Gutensider from the list view, and adjust the display characteristics as required. The most commonly used are:

• In Slides, select the number of slides you wish to see at any one time, together with the vertical height. If you use background images of different aspect ratios, display problems will occur.
• In Motion, select how you wish the slides to transition; the main options are:
  • The transition between slides can be set to Slide, Fade or Flip.
  • The slides can be set to run as a continuous loop and pause when the viewer moves their pointer over the slide.
  • Transition and viewing times can be adjusted as required.
• In Arrows, the arrow’s style, size and location to help navigation can be set.
• In Lightbox, the option to allow individual slides to be displayed full size can be set, together with a number of associated options, including a counter and thumbnails.
• In Pagination, the row of dots can be defined.

Once all the options are set, save and modify as required.

Gutenslide Options #

To access an individual slide, open the list view using (A) and then the required slide (B) under Gutenslider, which provides several options in the toolbar and right-hand sidebar:

• The toolbar (C) offers a limited number of options, including where the added blocks appear.
• The default location for the addition of a block is shown by a plus sign (D)
• Background. The background of the slide can be set (E) to none, a single colour, a colour gradient, video or an image.
• Focal Point. Adjust the focal point. If the Gutenslider height is fixed, the system will crop the image; hence, a key part of the image may be incorrectly placed when the Gutenslide is displayed. This can be resolved by adjusting the Focal Point, as follows: select the circle (F) with a pointing device and move until the view is considered correct.
• Overlay. A colour overlay or colour gradient can be added, the transparency of which can be adjusted.

Adding a Slide to the Slideshow #

Slides can be added to the slideshow by the options provided in the Gutenslider toolbar. The following options are available to the right of Preview:

• Add slides from the Media Library.
• Add a video
• Add an empty slide.

Additionally, an empty slide can be added using the + Slide button below the slide. The toolbar of an empty slide allows the addition of media.

Text-based Gutenslides #

Gutenslider can generate a slideshow for instructions or other information. To develop a presentation:

• Select + Slide, which then permits the background to be selected
  • The slide background is the image of a photographer.
  • The paragraph has a background of u3a Blue and a text colour of White. The padding suitably adjusted
• The + Add Slide allows the content creator to extend the slideshow as required.

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. However, explanatory text will be required to inform the page visitor on how to move through the slides.