Use <figure> to nest {% picture %}

[inetbiz]

Since <figure> is a block element and <picture> being an inline element. For my sub-headings, I'd like to nest picture tag within the figure. When I try, it will not render.

Code

## [**Edit _layouts head tag**](#step-one "Edit the Jekyll Article Schema head tag Step: 1")
<figure>
{% picture blog-header jekyll-article-schema-1.png --alt "Edit Head Tag Step: 1" --link {{post.url}}#step-one --a title="Edit Head Tag Step: 1" %}
<figcaption>Edit Head Tag Step: 1</figcaption>
</figure>

Result

s

[rbuchberger]

Looks like you've run into this issue

Add nomarkdown: false to the relevant preset.

[rbuchberger]

Looks like you assign variables with colons - I'm not sure if these will be scoped to the include file or to the whole page:

{% include figure.html preset: 'blog-header' file: 'jekyll-article-schema-5.png' img_alt: 'Gather Facts for Jekyll Article Schema Step: 5' link: '{{post.url}}#step-five' title: 'Gather Facts for Jekyll Article Schema Step: 5' %}

The other option is to keep the same syntax and prefix all of your parameters in the HTML file with include.:

{% picture {{ include.preset }} (...) %}

[inetbiz]

I have:

<figure>
{% include figure.html preset='blog-header' file='jekyll-article-schema-5.png' img_alt='Gather Facts for Jekyll Article Schema Step 5' title='Gather Facts for Jekyll Article Schema Step 5' link='{{page.url}}#step-five' title='Gather Facts for Jekyll Article Schema Step 5' %}
<figcaption>Gather Facts for Jekyll Article Schema Step: 5</figcaption>
</figure>

Jekyll Build

Liquid Exception: Invalid syntax for include tag. File contains invalid characters or sequences: figure.html preset='blog-header' file='jekyll-article-schema-5.png' img_alt='Gather Facts for Jekyll Article Schema Step 5' title='Gather Facts for Jekyll Article Schema Step 5' link='/technical-seo/jekyll-schema-article.html#step-five' 
Valid syntax: {% include file.ext param='value' param2='value' %}in /home/denverpr/new/_posts/2021-10-01-jekyll-schema-article.md

[inetbiz]

Making progress! It's in the --link params being passed.

[inetbiz]

OK what you can add to documentation is this:

1. In your preset, add nomarkdown: false
2. Create figure.html in your includes.

Tag would be

{% include figure.html preset="preset name" file="filename.ext" img_alt="Image ALT" link="optional link fragment" title="link title" %}

figure.html include

{% picture {{ include.preset }} {{ include.file }} --alt {{ include.img_alt }} --link {{ site.url }}{{page.url}}{{ include.link }} --a title="{{ include.title }}" %}

[rbuchberger]

Glad it's working! I'll add a note to the docs. Thanks for your help1

[inetbiz]

@rbuchberger Is this valid tag output? The <source> tags are getting a malformed closing tag. The image alt= is being populated outside the parameter.

Outputted Source

<a href="/technical-seo/create-jump-to-links-serp.html" class="image featured" title="Jump To Links SEO in SERP Snippet!">
  <h3>Jump To Links SEO in SERP Snippet!</h3>
</a>
<figure>
  <a class="u-url url" title="Jump To Links SEO in SERP Snippet!" href="/technical-seo/create-jump-to-links-serp.html">
    <picture loading="lazy" class="image featured u-photo">
      <source srcset="/assets/images/generated/serp-jump-to-links-400-53478ab24.webp 400w, /assets/images/generated/serp-jump-to-links-600-53478ab24.webp 600w, /assets/images/generated/serp-jump-to-links-800-53478ab24.webp 800w, /assets/images/generated/serp-jump-to-links-1000-53478ab24.webp 1000w" type="image/webp">
        <source srcset="/assets/images/generated/serp-jump-to-links-400-0f864a4ad.png 400w, /assets/images/generated/serp-jump-to-links-600-0f864a4ad.png 600w, /assets/images/generated/serp-jump-to-links-800-0f864a4ad.png 800w, /assets/images/generated/serp-jump-to-links-1000-0f864a4ad.png 1000w" type="image/png">
          <img class="image thumbnail1 u-photo" src="/assets/images/generated/serp-jump-to-links-342-0f864a4ad.png" alt="" jump to links seo in serp snippet> 
        </source>
      </source>
    </picture>
  </a>
  <figcaption>Jump To Links in Rich Results that may provide additonal hyperlinks in the footer of your result that are clickable. This article shows you how to do that on any content plaform with a bit of javascript you copy/paste.</figcaption>
</figure>

picture.yml

  blog-feature:
    formats:
      - webp
      - original
    widths:
      - 200
      - 400
      - 649
    sizes:
      mobile: calc(100vw - 16px)
      tablet: 80vw
    size: 649px
    link_source: false
    quality: 75
    format_quality:
      webp: 50
      avif: 30
      jp2: 30
    strip_metadata: true
    dimension_attributes: false
    nomarkdown: false
    attributes:
      picture: loading="lazy" class="image featured u-photo"
      img: class="image u-photo"
      a: class="u-url url"

Include File

<figure>
{% include figure.html preset="blog-feature" file="serp-jump-to-links-1.png" img_alt="Copy Javascript Snippet Step: 1" link="#copy-javascript-snippet" title="Copy Javascript Snippet Step: 1" %}
<figcaption>Copy Javascript Snippet - Step: 1</figcaption>
</figure>

Liquid Shortcode

{% picture {{ include.preset }} {{ include.file }} --alt {{ include.img_alt }} --link {{ site.url }}{{page.url}}{{ include.link }} --a title="{{ include.title }}" %}