Skip to content

Images, Links, & Documents

Kathy Zadrozny edited this page Aug 4, 2020 · 5 revisions

Image Block

There is no need to upload different images for thumbnails or main content. Wagtail will take care of all resizing and cropping for each use case.

There are three fields in Image Block:

  • Image You can update the image with "Edit this Image" or replace the image altogether with "Change Image." To add a new image, see "Adding Image" below for more info.
  • Caption Information or detail about the image
  • Alignment Wrap the image left, right, or extend full across the page.

Note: Alternate text, text for persons who use screen readers (ADA compliance), is auto populated with the Image Title. This is the title you give images when you uploaded the image. You can edit the title by selecting the image in the edit view of the page and clicking the "Edit this Image" button.

Uploading Image

  1. Click "Choose Image"
  2. Either select one from the image collection or click the tab "Upload" to upload a new one.
  3. Title is used as the image alt text and is also how you can search for the image within Wagtail.
  4. Choose your file. If you do not populate "Title" it will automatically insert the file name.
  5. Choose "News" for the collection
  6. Add any tags that will help you find this image, if needed, later
  7. Click "upload"

Editing or Replacing Image

  1. Click "Change Image" or "Edit This Image"
  2. Change image will lead you through the same steps as when you add an image.
  3. Editing the image allows you to replace the image with a new one, replacing every instance of the image on the website.
  4. When editing image, click the "Choose file" under the "Change Image File" area to replace the image with something different.
  5. Click Save.

Bulk Image Loading

You can batch load images by going to "Images" on the left sidebar in Wagtail's admin view.

  1. Click the "+ Add Images" button on the top right of the page
  2. From here you can drag and drop all of your images OR upload all the images with the "+ Or choose from your computer" button.
  3. (Optional) Choose a related collection name from the drop down for collections
  4. (Optional) Add any tags to help you find or group like images in the future
  5. Click update for each image item

Links

There are three types of hyperlinks in Wagtail text:

Internal Links

Links to pages that exist within Wagtail. Use the > to navigate to the page you want to link to, or use the search box to find the page, based on its name or title or key words.

External Links

Links to pages that exist outside Wagtail. Enter the URL into the box (or copy and paste from your browser, with Ctrl+C and Ctrl+V).

Email links

Links to an email address. As a general policy, this is not recommended. Coming soon to Wagtail will be “contact” forms, which will be the recommended way for setting up email responses.

Removing links

If you click on the link in a Paragraph box and select the “Remove Link” button on the toolbar, the hyperlink will be removed.

Documents

A document link goes to a file that has been uploaded to Wagtail. The document link button contains two choices:

  1. “search” for your document (if it is already uploaded)
  2. “upload” your document

The Upload screen has a box for entering your own titles (for organizational purposes), a browse command to find the file, a collection dropdown, and a keyword “tags” box for storing important keywords that can be used to search for the document.

Instead of folders, the document area has “Collections” where you can organize your documents. The default is the root collection—where all files are stored if not put into collections. This means that when you upload a document, it is very important to assign both a “title” and keyword “tags” so that it becomes easily searchable.

Video

Video fields contain links to YouTube, Vimeo, or other source code online resources for videos. To use YouTube, for example, find the YouTube video you want to play on your page, then click on the YouTube “share” command. This will display a URL, which you can copy and paste back in the Wagtail video field. The video will be displayed at a pre-set page width, with a “Play” arrow in the center (does not play until someone clicks the arrow).