How to show unique Alt text for individual posts? about bulma

[digitigradeit]

@jgthms likely not.

@LorenAmelang:

![Neon Dreams](./images/loren-neon-250.jpg) implies you're referencing a markdown-based blog/project.

With that said, Markdown really only allows for the following attributes of the figure/img tag (with some minor variations between generators): <img src="" alt="" and title="" />

But as @jgthms indicates, this is not an issue with the Bulma CSS framework and more an issue of your markdown processor, which is part of your site-generator script/app.

That said looking at your site's head tag, I see it says Gridsome v0.7.14.

Here's Gridsome's documentation link for including an image in your project: https://gridsome.org/docs/images/

To resolve this issue you might be able to use Markdown syntax similar to the following:

[alt attribute](./path/to/src) "title attribute"

so, try ![Neon Dreams](./images/loren-neon-250.jpg) "Neon Dreams"
It also appears that Gridsome allows for the <g-image src="./path/to/src" width="500" height="500" fit="contain"/> syntax which might provide for further customization.

Hope this helps!

[jgthms]

What are you using to build your website? This doesn't seem to be an issue related to Bulma

[jgthms]

Thanks for the help @digitigradeit. I'll close this for now.

[LorenAmelang]

Thanks, @digitigradeit, for digging into this! The site you saw on the web is old, the computer that built it died and I'm currently re-creating it with Gridsome 0.7.23 and Bulma 0.9.4.

But I think I obscured my real problem by mentioning the "neon dreams" image, which actually does show Alt text. The issue I want to fix is the "cover image" for each post.

On the initial page where all the posts are listed, and at the top of each post when you visit one, each post has a unique cover image (often full width but very short height), and all of them show the same Alt text - "Cover image".

They are created by files like /content/posts/my-origin.md, which starts with:

title: My Origin 🎉 
date: 1947-05-07
tags: ['Parents', 'Tuberculosis', 'Feminism', 'TheFarm', 'Gender']
cover_image: ./images/dnaComp-770-35.jpg
canonical_url: false
description: "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 👆 &nbsp; These red titles are links to more detail...  <br />

I see that is a markdown file, but that format seems quite different from the "neon dreams" markdown.

That header appears to be how the posts get sorted and formatted. I can't find any other place where the individual images are called out and linked to posts. I admit I'm not clear exactly what part of that process is handled by Bulma, but I am under the impression that it does the tags...

The "description:" text gets drawn under the image, always, it is not Alt text.

Maybe there is some way to use the
![Neon Dreams](./images/loren-neon-250.jpg)
format in the post header, like changing:
cover_image: ./images/dnaComp-770-35.jpg
to:
cover_image: ![Spiraling colored lines suggesting DNA](./images/dnaComp-770-35.jpg)
?

Well, that's not it:

/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:167
  return new YAMLException(
         ^
YAMLException: tag suffix cannot contain flow indicator characters at line 5, column 25:
    cover_image: ![Spiraling colored lines suggesting DNA](. ... 
                            ^
    at generateError (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
    at throwError (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:173:9)
    at readTagProperty (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1200:7)
    at composeNode (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1325:12)
    at readBlockMapping (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1089:11)
    at composeNode (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1359:12)
    at readDocument (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1525:3)
    at loadDocuments (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1588:5)
    at load (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
    at Object.safeLoad (/home/loren/gridsome_2023/node_modules/js-yaml/lib/js-yaml/loader.js:1637:10)
    at module.exports (/home/loren/gridsome_2023/node_modules/gray-matter/lib/parse.js:12:17)
    at parseMatter (/home/loren/gridsome_2023/node_modules/gray-matter/index.js:109:17)
    at matter (/home/loren/gridsome_2023/node_modules/gray-matter/index.js:50:10)
    at RemarkTransformer.parse (/home/loren/gridsome_2023/node_modules/@gridsome/transformer-remark/index.js:47:40)
    at transformNodeContent (/home/loren/gridsome_2023/node_modules/gridsome/lib/store/transformNodeContent.js:21:43)
    at SyncBailWaterfallHook.eval [as call] (eval at create (/home/loren/gridsome_2023/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Collection.updateNode (/home/loren/gridsome_2023/node_modules/gridsome/lib/store/Collection.js:127:50)
    at FSWatcher.<anonymous> (/home/loren/gridsome_2023/node_modules/@gridsome/source-filesystem/index.js:117:36) {
  reason: 'tag suffix cannot contain flow indicator characters',
  mark: Mark {
    name: null,
    buffer: '\r\n' +
      'title: My Origin 🎉 \r\n' +
      'date: 1947-05-07\r\n' +
      "tags: ['Parents', 'Tuberculosis', 'Feminism', 'TheFarm', 'Gender']\r\n" +
      'cover_image: ![Spiraling colored lines suggesting DNA](./images/dnaComp-770-35.jpg)\r\n' +
      'canonical_url: false\r\n' +
      'description: "&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 👆 &nbsp; These red titles are links to more detail...  <br />\r\n' +
      '&nbsp; <br />\r\n' +
      '\r\n' +
      'My mother built bombers during WWII. My dad flew as a radio operator in the Pacific war. They returned to hide in their tiny Midwestern town and have a family. Their idyll was short lived - when I was two years and nine months old mom was overcome by the tuberculosis we both caught from her father, and she nearly died in the state hospital."\r\n' +
      '\r\x00',
    position: 134,
    line: 4,
    column: 24
  }
}

Looks like that makes YAML think my hopefully Alt text is a list of tags? Way beyond my understanding of this!

[digitigradeit]

@LorenAmelang the markup you're looking at is referred to as FrontMatter, and it's what provides a title, subtitle, description, optional image, and various other markup to the individual pages that comprise your site. But all that is very out of scope for this particular repository, which is exclusive to the Bulma CSS framework. Bulma is the framework that gives your website its flair, but the questions you're asking are related to how the content is generated. You should open an issue here: https://github.com/gridsome/gridsome I'm sure that you would get help a lot faster. :)

[LorenAmelang]

@digitigradeit Thanks once again! As I said, I'm really not clear which parts of my site depend upon Bulma. So many nice things appeared when I installed it... Maybe if the word I'm trying to understand doesn't appear in bulma.css, then Bulma has nothing to do with it?

[LorenAmelang]

--{{Alt text fix

Most of this code was copied into jhthms Bulma after I installed it. It was from my original site based on:
https://github.com/calebanthony/gridsome-bulma
https://calebanthony.github.io/gridsome-bulma/

I now have custom Alt text working for all images on the site!
Here's how I did it (look for lines with "<-- added" and "<-- changed").
These are excerpts, not complete files:

/home/loren/gridsome_2023/src/pages/Index.vue
---
<page-query>
query {
  posts: allPost {
    edges {
      node {
        id
        title
        path
        tags {
          id
          title
          path
        }
        date(format: "D MMMM YYYY")
        timeToRead
        description
        cover_image(width: 770, fit: inside, blur: 10)
        ... on Post {
          id
          title
          alt  <-- added
          path
        }
      }
    }
  }
}
</page-query>
---

/home/loren/gridsome_2023/src/templates/Post.vue
---
<template>
  <Layout>
    <div class="has-text-centered">
      <h1 class="title is-1">
        {{ $page.post.title }}
      </h1>
      <PostMeta
        class="subtitle is-size-6"
        :post="$page.post"
      />
    </div>

    <div class="has-text-centered">
      <g-image
        :alt="$page.post.alt"  <-- changed
        :src="$page.post.cover_image"
      />
    </div>

... AND:

<page-query>
query Post($path: String!) {
  post: post(path: $path) {
    title
    alt  <-- added
    path
    date(format: "D MMMM YYYY")
    timeToRead
    tags {
      id
      title
      path
    }
    description
    content
    cover_image(width: 770, fit: inside, blur: 1)
  }
}
</page-query>
---

/home/loren/gridsome_2023/src/components/PostCard.vue
---
<template>
  <div class="card">
    <g-link
      v-if="post.cover_image"
      class="card-image"
      :to="post.path"
    >
      <figure class="image">
        <g-image
          :alt="post.alt"  <-- changed
          :src="post.cover_image"
        />
      </figure>
    </g-link>
    <div class="card-content">
      <g-link
        :to="post.path"
        class="width-770 is-size-4 has-text-weight-bold"
      >
        {{ post.title }}
      </g-link>
      <p
        class="content"
        v-html="post.description"
      />
      <PostMeta :post="post" />
    </div>
    <div
      v-if="post.tags"
      class="card-footer"
    >
      <PostTags
        class="card-footer-item"
        :post="post"
      />
    </div>
  </div>
</template>
---

Warnings:

Some of those changes require exiting Develop and restarting it.
Some browsers may not notice the changes when the site is loaded from a server on the external web, even though the local Develop mode worked properly. A page Reload may help, Force Reload may help, but you may have to delete all cached information from the browser to see the changes properly! Or try a browser that has never visited the external URL...

I even saw some browsers with history of visiting the URL fail to lazy load the sharp versions of the images, leaving the blurred versions visible, or on a cellular connection fail to load any version of some images.

Hope this helps someone...