diff options
Diffstat (limited to 'templates/shortcodes/imagehover.html')
| -rw-r--r-- | templates/shortcodes/imagehover.html | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/templates/shortcodes/imagehover.html b/templates/shortcodes/imagehover.html index 68f25be..99dd4e4 100644 --- a/templates/shortcodes/imagehover.html +++ b/templates/shortcodes/imagehover.html @@ -8,22 +8,33 @@ {%- else %} <div id="{{ sourcename }}">## {{ sourcename }} </div> - <a onmouseover="document.getElementById('{{ sourcename }}').innerHTML='{{ bgname }}';" onmouseout="document.getElementById('{{ sourcename }}').innerHTML='{{ sourcename }}';" href="#"><div id="{{ sourcename }}image"> </div></a> + <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 sources %} {%- set sourcename = source | split(pat=".") | first %} {%- if not loop.first %} #{{ sourcename | safe }}image { - background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ source | safe }}'); - width: 560px; - height: 650px; + background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.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('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ bg | safe }}'); + background-image: url('{{ get_url(path="/", trailing_slash=false) }}{{ page.path | safe }}{{ source | safe }}'); } {%- endif %} {%- endfor %} |