I am not well-versed in Jekyll and so I feel like I am missing something here, my current page includes front matter to display an image but when it is rendered there is no image description for the post's header image. This is an issue, I feel, for screen readers/accessibility so I am trying to figure out how I can implement this.
For further context, I am using the blog template provided by Hydejack.
Current code for the post (as found in the projects folder is:
layout: project
title: 'MyProject'
description: >
A new project
# featured: true
date: '12-12-2021'
image:
path: /assets/img/projectsImages/image1.jpg
Everything displays just fine, but on examination of the image, there is no textual description of the image. I have tried adding
caption: 'some caption'
within the front matter, however this does not affect the image description. It does appear to be taking the 'alt' text from the post title but I am not sure of the correct wording (or additional changes to the existing layout structures) are needed to gain image captions.
Has anyone done this before/or has suggestions on the right place to look?
Thanks!
Update:
The answer provided by Christian below aided me in getting to the right place to edit the _layouts/project.html file to address the concern I had.
The file now looks like this (changes indicated with comments but the comments need to be removed if you plan to use this same workaround as they will cause the process to fail if left in):
---
# Copyright (c) 2018 Florian Klampfer <https://qwtel.com/>
layout: base
---
{% assign version = jekyll.version | split:'.' %}
{% assign major = version[0] | plus:0 %}
{% assign minor = version[1] | plus:0 %}
{% assign patch = version[2] | plus:0 %}
{% assign project = page %}
{% assign separator = site.data.strings.separator | default:"|" %}
{% assign nsd = site.hydejack.no_structured_data | default:site.no_structured_data %}
{% assign proj_format = site.data.strings.date_formats.project | default:"%Y" %}
{% assign from_to_separator = strings.from_to_separator | default:strings.resume.from_to_separator | default:"–" %}
<!-- Change 1: alt declaration -->
{% assign alt_text = page.image.alt | default: '' %}
<article
id="project"
class="page mb6"
role="article"
{% unless nsd %}vocab="http://schema.org/" typeof="CreativeWork" resource="#project"{% endunless %}
>
<header>
<h1 class="page-title" property="name">{{ project.title }}</h1>
<p class="post-date heading">
<span class="ellipsis mr1">
{% if major >= 4 and minor >= 1 %}
{% assign parent = site.pages | find:"show_collection",project.collection %}
{% else %}
{% assign parent = site.pages | where:"show_collection",project.collection | first %}
{% endif %}
{% if parent %}
<a href="{{ parent.url | relative_url }}" class="flip-title" property="genre">{{ parent.title }}</a>
{% endif %}
{% unless site.hydejack.hide_dates %}
{% if parent %}{{ separator }}{% endif %}
<time datetime="{{ project.date | date_to_xmlschema }}">{{ project.date | date:proj_format }}</time>
{% if project.end_date.size > 0 %}
{{ from_to_separator }}
<time datetime="{{ project.end_date | date_to_xmlschema }}">{{ project.end_date | date:proj_format }}</time>
{% endif %}
{% endunless %}
</span>
<span class="ellipsis ml1">
<span class="sr-only">{{ separator }} {{ site.data.strings.links | default:"Links" }}{{ site.data.strings.colon }}</span>
<span class="{{ site.data.strings.links_icon | default:'icon-link' }}" title="{{ site.data.strings.links | default:'Links' }}"></span>
{% for link in project.links %}
<a class="external" href="{{ link.url }}" property="sameAs">{{ link.title }}</a>
{% unless forloop.last %}{{ separator }}{% endunless %}
{% endfor %}
</span>
</p>
{% assign screenshot = project.screenshot | default:project.image %}
<div class="img-wrapper lead aspect-ratio sixteen-nine {% unless screenshot %}fallback-img{% endunless %}">
{% if screenshot %}
{% include_cached components/hy-img.html
img=screenshot
sizes="(min-width: 90em) 48rem, (min-width: 54em) 42rem, (min-width: 42em) 38rem, 100vw"
<!-- Change 2: was previously alt=project.title -->
alt=alt_text
property="image"
width=864
height=486
%}
{% endif %}
</div>
{% include components/message.html text=project.description hide=page.hide_description property="description" alt="" %}
{% if project.caption %}<meta property="disambiguatingDescription" content="{{ project.caption }}"/>{% endif %}
</header>
{{ content }}
</article>
{% include components/dingbat.html %}
{% assign addons = page.addons | default:site.hydejack.project_addons %}
{% unless addons %}{% assign addons = "about,newsletter,other" | split:"," %}{% endunless %}
{% for addon in addons %}
{% case addon %}
{% when 'about' %}
{% include_cached components/about.html author=page.author %}
{% when 'newsletter' %}
{% include if-non-null try="pro/newsletter.html" %}
{% when 'other' %}
{% include if-non-null try="pro/other-projects.html" %}
{% when 'comments' %}
{% include body/comments.html %}
{% else %}
{% endcase %}
{% endfor %}
Not quite sure if I got you right. The code below checks if a page have an image and if you have an alt text. Conditions check both and display it accordingly.
If you have a frontmatter like this
image:
path: /assets/img/projectsImages/image1.jpg
alt: 'A brief description of the image'
caption: 'some caption'
you can use something like this in your layout code:
{% assign alt_text = page.image.alt | default: '' %}
{% if page.image %}
<figure>
<img src="{{ page.image.path }}" alt="{{ alt_text }}">
{% if page.image.caption %}
<figcaption>{{ page.image.caption }}</figcaption>
{% endif %}
</figure>
{% endif %}