ALT Text and Title Text for Featured Image

Netlify CMS
1

Is there any way to add ALT text for the featured image?

There seems to be a box for ALT text and Title text for regular inline images, but not for the featured image.

Any suggestions are welcome. Thanks.

2

It sounds like you’re using a starter that has a Featured Image configured - you’ll need to have your image be an object instead of a string.

Your current frontmatter probably has something like:

featured_image: /path/to/image.jpg

What you need is something like:

featured_image:
  src: /path/to/image.jpg
  alt: my alt text
  title: my title text

You could use an object widget in the CMS with three separate fields for image, alt, and title to facilitate this.

1 Like
3

Hey, thanks for the heads up.

4

To reflect those changes described by @erquhart in your config.yml:

  - name: featured_image
    label: Featured image
    widget: object
    fields:
      - {name: src, label: Image, widget: image}
      - {name: alt, label: Alt text, widget: string}
      - {name: title, label: Title, widget: string}

Good luck!

2 Likes
5

Thanks, Tom. Does this apply for anything extra I wish to add? For example, Tags, Time to Read, etc.

I’m having a really hard time, even when I copy examples as instructed - even simple things like G-Link, it’s an absolute stuggle.

When I run things through the GraphQL layer to check them, I’m getting errors for almost everything. That said, it’s good in one way because I’m learning a lot more.

By the way, I think Gridsome and Netlify will be both absolutely awesome once they mature fully.

Cheers once again, guys. Appreciate the advice. :slight_smile:

1 Like
6

Yes it does! For every field in your frontmatter, you add a widget to the config.

7

For anyone else interested in this, I have tried at least 20 combinations, but can’t seem to get multiple fields in an array.

This is the best I could come up with, because using Title for the image Title clashes with the post Title so had to rename the field Image Title.

Not a perfect solution, but this is what I’ve currently got…

    fields:
  - {label: "Title", name: "title", widget: "string"}
  - {label: "Excerpt", name: "excerpt", widget: "string"}
  - {label: "Publish Date", name: "date", widget: "date"}
  - {label: "Body", name: "body", widget: "markdown"}
  - {label: "Tag", name: "tag", widget: "string"}
  - {label: "Time to Read", name: "time_to_read", widget: "string"}
  - {label: "Featured Image", name: "src", widget: "image"}
  - {label: "Alt Text", name: "alt",  widget: "string"}
  - {label: "Image Title", name: "image_title",  widget: "string"}

Any suggestions are welcome.

8

Try this:

    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Excerpt", name: "excerpt", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "date"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tag", name: "tag", widget: "string"}
      - {label: "Time to Read", name: "time_to_read", widget: "string"}
      - name: featured_image
        label: Featured image
        widget: object
        fields:
          - {name: src, label: Image, widget: image}
          - {name: alt, label: Alt text, widget: string}
          - {name: title, label: Title, widget: string}
9

Tom, it throws an error. You can’t have ‘fields’ twice.

Also, when I indented it like you have myself previously it threw an error for bad indentation. Yet in the YAML documentation, it says it isn’t fussy about indentation.

Strange, eh?

10

It should be indented like this:

collections:
  - name: posts
    ...
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Excerpt", name: "excerpt", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "date"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tag", name: "tag", widget: "string"}
      - {label: "Time to Read", name: "time_to_read", widget: "string"}
      - name: featured_image
        label: Featured image
        widget: object
        fields:
          - {name: src, label: Image, widget: image}
          - {name: alt, label: Alt text, widget: string}
          - {name: title, label: Title, widget: string}
11

Yes, I copied it exactly. It’s been giving me the same error for anything duplicate. Like the ‘fields’ label and also for the indentation.

12

I tested your repo and made some changes, works fine:

collections:
  - name: "posts"
    label: "Posts"
    folder: "posts"
    create: true
    show_preview_links: true
    preview_path: "posts/{{slug}}"
    slug: "{{slug}}"
    preview_path_date_field: "updated_on"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Excerpt", name: "excerpt", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "date"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tag", name: "tag", widget: "string"}
      - {label: "Time to Read", name: "time_to_read", widget: "string"}
      - name: featured_image
        label: Featured image
        widget: object
        fields:
          - {name: src, label: Image, widget: image}
          - {name: alt, label: Alt text, widget: string}
          - {name: title, label: Title, widget: string}
2 Likes
13

Hi Tom, thanks very much.

That is very kind of you. :slight_smile:

2 Likes
14

Just tested it and it’s loads better. Even has a little collapse button on the featured image.

Thanks again. Have a great weekend!!!

1 Like
15

Tom, with the example you showed me, I was able to make my first ever commit to the Gatsby Netlify Starter Github repo… so thanks once again.

I am using Gridsome rather than Gatsby, but still have a copy of their starter set up on Netlify. There are plenty of similarities to get ideas from in the CMS set up.

My final blog set up is:

backend:
  name: github
  repo: Hoodlum-Z/gridsome-starter-netlify-cms

media_folder: "/uploads/images"
public_folder: "/static/uploads"

publish_mode: "editorial_workflow"

collections:
  - name: "posts"
    label: "Posts"
    folder: "posts"
    create: true
    show_preview_links: true
    preview_path: "posts/{{slug}}"
    slug: "{{slug}}"
    preview_path_date_field: "updated_on"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}      
      - {label: "Excerpt", name: "excerpt", widget: "string"}
      - {label: "Featured Post", name: "featured_post", widget: "boolean"}
      - label: "Featured Image"
        name: "featured_image"
        widget: "object"
        fields:
          - {name: src, label: Image, widget: image}
          - {name: alt, label: Alt text, widget: string}
          - {name: title, label: Title, widget: string}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Body", name: "body", widget: "markdown"}

Thanks for your input!!

2 Likes