Skip to content

Image

img "choose from library of images"

Add From Image Library

  1. Use an image from the Image Library.
  2. Use Click here to choose from the library of images link to see if an image/logo already exists for a recurring or themed program.
  3. Copy the Image URL from the table. Paste into the Image URL field on the form.
  4. Copy the Thumbnail URL from the table. Paste into the Thumbnail URL on the form.
  5. Copy the Alt Text from the table. Paste into the Alt Text field on the form.

Use Cover Image from Library Catalog

  1. Go to the library catalog.
  2. Search for the book or movie title.
  3. Go to Item detail page. Don’t copy the image from the results list because it is too small.
  4. On the item detail page, right click on the cover image and select “Copy Image location” / "Copy image address" / "Copy Shortcut" (if you’re using Windows, right-click, click Properties, and copy the URL). The URL will look something like this: 'https://catalog.library.nashville.gov/bookcover.php?id=7d5b2865-fb8b-9583-b5f9-b0d0ad2e733c-eng&size=medium'.
    1. Paste the image URL into both the Image URL and Thumbnail URL fields.
    2. In the Image URL field, edit the URL to replace the word “medium” with the word “large”. This allows the event to display correctly on digital signs for book clubs.

Upload an Image to Bedework

  1. Find an image (see Image section of guide for copyright-friendly image sources) and save it to your computer.
  2. Resize the image. See Image Guidelines for requirements.
  3. Save the resized image to your computer. Make sure there are no blank spaces in the image file name (e.g., remane file from “stack of books.jpg” to "stack_of_books.jpg").
  4. In the Image section of the Bedework event form (when adding an event), click Choose File.
  5. Find the resized image on your computer and click Open.
  6. Upon success,see a file name after the “Choose File” button.
  7. Your image will be visible in the event listing after you click Add Event at the end of the form.

Add Alt Text

Alt Text is a brief description of the image.

Why Add Alt Text?

  • Alt Text is read aloud by screen readers used by visually impaired users.
  • Helps people with low or impaired vision understand the entire web page.
  • Provides context to search engines and robotic scans.
  • Alt Text is required on government-owned websites by federal Americans with Disabilities Act (ADA) guidelines.

Write Good Alt Text

  • Good Alt Text is descriptive and concise.
  • Limit to 125 characters.
  • Focus on what the image conveys to the user, rather than listing attributes.
  • Include any words that are in the image, such as text on the cover of a book.

Example

img "a dog with a ball in its mouth"

  • ✅ The Alt Text for this image is “golden retriever puppy plays with a red ball on grass in the evening.”

  • ❌ A bad examples of an alt text would be “Dog.” “Picture of a cute dog.” or "Roger hops."

Color and Contrast

Make sure image has enough color contrast between text and its background to be easily readable. When using text over images, add a solid background behind the text, or a dark overlay. Beware of color blindness combinations and elaborate fonts and busy visuals that can reduce visibility.