Questions about adding properties to the page-query list

[LorenAmelang]

Questions about adding properties to the page-query list

[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...