imghover > imgswap, reduce complexity, fix CSP1.2.2

2 files changed, 59 insertions, 95 deletions

diff --git a/templates/shortcodes/imghover.html b/templates/shortcodes/imghover.html
deleted file mode 100644
index 1ad733c..0000000
--- a/templates/shortcodes/imghover.html
+++ /dev/null
@@ -1,95 +0,0 @@
-{%- 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>
diff --git a/templates/shortcodes/imgswap.html b/templates/shortcodes/imgswap.html
new file mode 100644
index 0000000..f8c983c
--- /dev/null
+++ b/templates/shortcodes/imgswap.html
@@ -0,0 +1,59 @@
+<div class="img-swap-div">
+  {%- set dirtest = main_src | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %}
+    {%- set reldir = true %}
+  {%- endif %}
+
+  {%- if main_src is starting_with("./") and reldir %} {# Relative Path #}
+    {%- set path = main_src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/"  %}
+
+  {%- elif main_src is starting_with("/") %} {# Root Path #}
+    {%- set rootpath = main_src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+  {%- else %} {# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- if not w or not h %}
+    {%- set metafile = page.path ~ path ~ main_src %}
+    {%- set meta = get_image_metadata(path=metafile) %}
+    {%- set w = meta.width %}
+    {%- set h = meta.height %}
+  {%- endif %}
+
+  {%- set img = main_src | split(pat="/") | last %}
+  {%- set name = img | split(pat=".") | first %}
+  <img src="{{ path | safe }}{{ img | safe }}" class="img-main{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} />
+
+  {%- set dirtest = swap_src | trim_start_matches(pat="./") %}
+  {%- if dirtest is containing("/") %}
+    {%- set reldir = true %}
+  {%- endif %}
+
+  {%- if swap_src is starting_with("./") and reldir %} {# Relative Path #}
+    {%- set path = swap_src | trim_start_matches(pat="./") | split(pat="/") | slice(end=-1) | join(sep="/") | trim_start_matches(pat="/") %}
+    {%- set path = path ~ "/"  %}
+
+  {%- elif swap_src is starting_with("/") %} {# Root Path #}
+    {%- set rootpath = swap_src | split(pat="/") | slice(end=-1) | join(sep="/") %}
+    {%- set path = config.base_url ~ rootpath ~ "/"  %}
+
+  {%- else %} {# Same Directory Path #}
+    {%- set path = "" %}
+
+  {%- endif %}
+
+  {%- if not w or not h %}
+    {%- set metafile = page.path ~ path ~ swap_src %}
+    {%- set meta = get_image_metadata(path=metafile) %}
+    {%- set w = meta.width %}
+    {%- set h = meta.height %}
+  {%- endif %}
+
+  {%- set img = swap_src | split(pat="/") | last %}
+  {%- set name = img | split(pat=".") | first %}
+  <img src="{{ path | safe }}{{ img | safe }}" class="img-swap{% if class %} {{class}}{% endif %}"{% if alt %} alt="{{alt}}"{% endif %}{% if w %} width="{{w}}"{% endif %}{% if h %} height="{{h}}"{% endif %} />
+</div>