Mangled social card img tags generated frome events template

[willfurnass]

We currently add the following to the YAML header if we want to include a social card image:

image:
  path: /path/to/some/file.jpg

but this is incompatible with what's in the _layouts/events.html Jekyll template; the rendering of that template with headers such as the above results in mangled img tags as we currently have in that file:

                     <figure class="text-center">
                        <img src="{{page.image}}" class="img-fluid w-50" />
                     </figure>
                     {% endif %}

which I think should be:

                     <figure class="text-center">
                        <img src="{{page.image.path}}" class="img-fluid w-50" />
                     </figure>
                     {% endif %}

If we 'fix' things in this way then I think we'll get a bunch of additional images showing up on our events pages that previously weren't visible due to broken links. So perhaps we should just remove the figure tag from the template?

[davidwilby]

Ah I understand this now, I think this is the first time I've made some events since I added the social card feature.

For instance on the hacktoberfest events, where I've added image to the yaml header to create a social card image, this is what causes the page to render:

"/assets/images/hacktoberfest2020_icon.png"}" class="img-fluid w-50" />

from

                    <figure class="text-center">
                        <img src="{"path"=>"/assets/images/hacktoberfest2020_icon.png"}" class="img-fluid w-50" />
                    </figure>

(and incidentally was causing the error I was talking about the other day)

What is the figure tag meant for anyway?

[willfurnass]

Yeah, that's what I'm talking about. A good illustration of why we need site/link validation in our CI!

"What is the figure tag meant for anyway?" - I don't know, hence the question at the end of my comment above. I suspect it's superfluous.

[ptheywood]

<figure> is a HTML5 semantic tag which allows you to add a <figcaption> within the figure that is associate with the image.

The general idea behind it is that a lot of people would use a <div class="figure"> and a <p class="caption"> to achieve the same effect, but by using <figure> then it makes it clear to things like search engines and accessibility tools that its a figure and it's caption.

[willfurnass]

So do we keep the <figure> in the event template HTML or not? I'm guessing we should omit it but add a note to the README that folks might want to use a <figure> in their posts/events pages and give an example of its usage. Sound reasonable?

[ptheywood]

The figure in this case seems to be for styling purposes (centers the image, adds some margin etc), so semantically it doesn't need a figure tag but it's also not necesarily wrong.

The bad content being rendered in the events pages which attempt to use the social cards image stuff is becuase we have a conflicting use of image within the yaml header.

Our custom events page looks for the presence of page.image and uses it as the image source (see _layouts/event.html, and _events/seminar-2017-11-28.md for an example of the use.

{% if page.image %}
                    <figure class="text-center">
                        <img src="{{page.image}}" class="img-fluid w-50" />
                    </figure>
                    {% endif %}

The social card content looks for the presence of image.path in teh yaml header (as a nested yaml object). See _layouts/default.html

    {% if page.image.path %}<meta property="og:image" content="{{ site.url }}{{ page.image.path }}" />

This means that any event which attempts to use the social card implementation tries to create a figure with the serialised verison of page.image, which ends up outputting { etc, breaking the html.

I.e. the _events/seminar-2017-11-28.md event uses image: "/assets/seminar_files/img/2017_11_28_parallem.jpg",

The easiest fix (without having to go through all previous events and fixing the yaml headers) would be to modify the event template to check for image.path like the social card, and if not present then check for image (not sure how/if you can check for nested yaml within a string in liquid).

i.e.:

{% if page.image.path or page.image %}
                    <figure class="text-center">
                        <img src="{%if page.image.path%}{{page.image.path}}{%else%}{{page.image}}{%endif%}" class="img-fluid w-50" />
                    </figure>
                    {% endif %}

However, this then leads to the social card icon being included in the page too, which is not really waht is desired.

A better fix would be to change the social card implementation to look for page.social_image.path or change the event template to use page.event_image potentially.