Need to adjust text description in photo gallery template

Site URL: https://www.disabilityinclusiveclimate.org/advisory-panel

Hi all,

I am preparing a site for an organization, and a major concern is assuring that the site is accessible to those who use screen readers.

1. On our advisory panel page, I am using an image gallery block with circular png files. The names currently of each individual are aligned to the left, and I would like them to be aligned in the center. I've tried embedding some code from answers I found on other forum pages, but it was unsuccessful. I also want to make sure that I am injecting this code in the appropriate area, as in I just want the code to affect this page specifically (advisor page)
    
2. My second issue is that I would like these names to be hyperlinked to their individual pages as well. Right now, the pictures themselves are linked, but it's not apparent, which is why I would like the names to be linked as well. There's no option to do this in the gallery template, and I don't want to add code to the 'image description' because that would be read out loud by a screen reader. I'm assuming I would also need to embed code to make this happen.

Any tips or help would be greatly appreciated! Thank you in advance!

Nevada

Q1. Add to Design > Custom CSS

/* Advisory panel - center caption */
body#collection-5f1e3cbe91bcb241a7c8bf5a p.gallery-caption-content {
    text-align: center;
}

Q2. Do you use Personal or Business Plan?

Hi Tuanphan thank you so much, this works perfectly.

Q2 Answer: we are using a Business plan!

On 2/10/2021 at 3:25 AM, Nevadajesse said:

Hi Tuanphan thank you so much, this works perfectly.

Q2 Answer: we are using a Business plan!

In Image description, try edit current name to this

<a href="/louise-fourier">Louise Fournier</a>

Do similar for other images