{%- set_global bg = "" %}

{%- for source in src %}

  {%- set dirtest = source | trim_start_matches(pat="./") %}
  {%- if dirtest is containing("/") %}
    {%- set reldir = true %}
  {%- endif %}

  {%- if source is starting_with("./") and reldir %} {# Relative Path #}
    {%- set pathtype = "rel-" %}
    {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
    {%- set path = path ~ "/"  %}

  {%- elif source is starting_with("/") %} {# Root Path #}
    {%- set pathtype = "root-" %}
    {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %}
    {%- set path = config.base_url ~ rootpath ~ "/"  %}

  {%- else %} {# Same Directory Path #}
    {%- set pathtype = "same-" %}
    {%- set path = "" %}
  {%- endif %}

  {%- set sourcepath = source | split(pat="/") | last %}
  {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %}

  {%- if loop.first %}
    {%- set_global bg = source | split(pat="/") | last %}
  {%- else %}
    <div id="{{ sourcename }}"><b>{{ sourcename }} on hover</b></div>
    <div id="{{ sourcename }}image" alt="{{ sourcename }}"> </div>
  {%- endif %}

{%- endfor %}

{%- if w and h and p %}
  {%- set padding = h / w * p %}
{%- elif w and h %}
  {%- set padding = h / w * 50 %}
{%- else %}
  {%- set padding = 50 %}
{%- endif %}

<style>
  {%- for source in src %}

    {%- set dirtest = source | trim_start_matches(pat="./") %}
    {%- if dirtest is containing("/") %}
      {%- set reldir = true %}
    {%- endif %}

    {%- if source is starting_with("./") and reldir %} {# Relative Path #}
      {%- set pathtype = "rel-" %}
      {%- set path = source | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
      {%- set path = path ~ "/"  %}

    {%- elif source is starting_with("/") %} {# Root Path #}
      {%- set pathtype = "root-" %}
      {%- set rootpath = source | split(pat="/") | slice(end=-1) | join(sep="/") %}
      {%- set path = config.base_url ~ rootpath ~ "/"  %}

    {%- else %} {# Same Directory Path #}
      {%- set pathtype = "same-" %}
      {%- set path = "" %}
    {%- endif %}

    {%- set sourcepath = source | split(pat="/") | last %}
    {%- set sourcename = pathtype ~ sourcepath | split(pat=".") | first %}

    {%- if not loop.first %}
      #{{ sourcename | safe }}image {
        background-image: url('{{ path | safe }}{{ bg | safe }}');
        background-size: contain;
        background-repeat: no-repeat;
        width: {{ p | default(value=50) }}%;
        height: 0;
        padding-top: {{ padding }}%;
      }
      #{{ sourcename | safe }}image:hover {
        background-image: url('{{ path | safe }}{{ sourcepath | safe }}');
      }
    {%- endif %}
  {%- endfor %}
</style>