aboutsummaryrefslogtreecommitdiff
path: root/templates/shortcodes/imghover.html
blob: 1ad733c4fede70935232c85989ca61d11bdc501a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
{%- 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" title="{{ sourcename }}"> </div>
  {%- endif %}

{%- endfor %}

<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 %}
    {%- set sourcetype = pathtype ~ sourcepath | split(pat=".") | last %}

    {%- if w and h and p %}
      {%- set padding = h / w * p %}
    {%- elif w and h %}
      {%- set padding = h / w * 50 %}
    {%- elif p %}
      {%- set metafile = page.path ~ path ~ sourcepath %}
      {%- set meta = get_image_metadata(path=metafile) %}
      {%- set padding = meta.height / meta.width * p %}
    {%- else %}
      {%- set metafile = page.path ~ path ~ sourcepath %}
      {%- set meta = get_image_metadata(path=metafile) %}
      {%- set padding = meta.height / meta.width * 50 %}
    {%- endif %}



    {%- 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>