# Logo carousel

This custom block lays image links out in a grid of 3 columns or displays them in a carousel if the block contains more than 3 image links.

This block is used on the home page (design Phase 1) to display company logos that link to their respective website, as shown below:

Output

# Adding the block to a page

To add a Logo carousel block:

  1. Add or edit a page that uses the Gutenberg editor (e.g. Page or Post)
  2. Click to add a Gutenberg block (more on how to add a Gutenberg block can be found here)
  3. Find the block with the name Logo carousel (highlighted below) and,
  4. Click on it to add it
Add logo carousel

# Configuring the block

Once you add the Logo carousel block to the page, you'll be prompted to Upload an image or to select one or more images from the Media gallery.

If you click the Upload button (highlighted below), you will get a dialog to select an image from your computer.

Upload one image

If instead you click the Media button (highlighted below),

Use media gallery

you will get a lightbox with WordPress' media library. In this lightbox, you can select one or more images that are already uploaded to the CMS or upload multiple files from the Upload Files tab.

Clicking on existing image will select that image (tick icon highlighted below) as one of the images that will be added to the gallery. You can deselect an image by clicking on the tick icon.

It's good practice to add Alt Text (highlighted below) to your images to make them accessible to visually impaired users.

Finally, when you're happy with your image selection, click on Create a new gallery (highlighted below) to proceed to the next step.

Choose multiple images

In this step you can review your image selection, delete any images you don't want to include (x button) and change the order of the images by dragging and dropping each image to the right position. Once you're happy with the selection of the images and their order, click on Insert gallery to close the lightbox and proceed to the next step.

Change order

In this step you can see the images that you selected and Link fields under each one which you can use to define the image URL (highlighted below).

Link

If you wish to change the order of the image links while at this stage, you can use the left and right button highlighted below to move the selected image link to the left or to the right. Additionally, you can delete an image link by clicking on the x button for the selected image as highlighted below.

Order/delete controls

You can save your changes by clicking on Update for that page.

Last Updated: 5/28/2020, 3:07:27 PM