Tag image inserted with markdown

Support
1

Is it possible to tag an image that has been inserted in markdown?

Here is a real example for me:
![PCA in 3D](/PCAUnscaled3Damp.pdf)

and I have a separate style sheet _page.scss that refers to this page. I can already do things like set the background colour and size, etc… with

img {
        background-color: white;
    }

But I want to apply different formats to different images.

Cheers!

2

Solution that worked for me: [edit fixed typos]
Was: ![PCA in 3D](/PCAUnscaled3Damp.pdf)

  1. Replace markdown image definition with a HTML image definition.
    <img src="/PCAUnscaled3Damp.pdf" alt="PCA in 3D" id="img1">

  2. Inspect element and find where the image is, in my case it was in .page.

  3. in the SCSS style file add this:

.page {
    #img1 {
        property: value;
    }
}

This might be obvious to most people using Zola, but I’m picking up the details as needed. Hopefully, this might help someone else with this basic question. Still not sure if there is a native Markdown method for this, but this seems to work fine.

Cheers!

3

A hacky way:

![PCA in 3D](/PCAUnscaled3Damp.pdf "pca in 3d)

and in SCSS:

img[alt~="pca in 3d"] {
    property: value;
}

Not tested but it should work?

Otherwise you can use a shortcode if that needs to be used a lot.

4

Cool thanks! I’ll give it a go.