update broken image demos.

phase2 · May 29, 2020 · dfdf8b8 · dfdf8b8
1 parent cbe1ae0
commit dfdf8b8
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.twig b/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.twig
@@ -42,26 +42,28 @@
     <div class="background-image-demo m-3">
       <h2>Background Images</h2>
       <div class="flex flex-wrap">
-        <div class="lg:w-1/2 pr-4 pl-4">
+        <div class="w-full lg:w-1/2 pr-4 pl-4">
           <h3>SVG</h3>
           {% set image_bg_logo_demo = {
             variant: 'bg',
             src: paths.images ~ '/logo.svg',
-            alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
+            alt: 'Early Particle logo!',
           } %}
           {% include '@atoms/image/_image.twig' with {
-            image: image_bg_logo_demo
+            image: image_bg_logo_demo,
+            image_classes: ['h-64','w-full','bg-center'],
           } %}
         </div>
-        <div class="lg:w-1/2 pr-4 pl-4">
+        <div class="w-full lg:w-1/2 pr-4 pl-4">
           <h3>PNG</h3>
           {% set image_bg_astrogoat_demo = {
             variant: 'bg',
             src: paths.images ~ '/astrogoat.png',
             alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
           } %}
           {% include '@atoms/image/_image.twig' with {
-            image: image_bg_astrogoat_demo
+            image: image_bg_astrogoat_demo,
+            image_classes: ['h-64','w-full','bg-contain','bg-center'],
           } %}
         </div>
       </div>

diff --git a/source/default/_patterns/01-atoms/image/_image--bg.twig b/source/default/_patterns/01-atoms/image/_image--bg.twig
@@ -9,4 +9,4 @@
  *  - image.repeat [string]: Background repeat value for image.
  */
 #}
-<div style="background-image: url({{ image.src }}); background-repeat: {{ image.repeat|default('no-repeat') }}" class="{{ image_classes }}"></div>
+<div style="background-image: url({{ image.src }}); background-repeat: {{ image.repeat|default('no-repeat') }}" class="{{ image_classes }}" role="img" aria-label="{{ image.alt }}"></div>
diff --git a/source/default/_patterns/01-atoms/image/_image--picture.twig b/source/default/_patterns/01-atoms/image/_image--picture.twig
@@ -16,7 +16,7 @@
 <picture>
   {% for item in image.srcset %}
     {% set key = bp[loop.index]|default('xl') %}
-    <source srcset="{{ item }}" media="(max-width: {{ scssBreakpoints[key] }})">
+    <source srcset="{{ item }}" media="(max-width: {{ tokens.screens[key] }})">
   {% endfor %}
   {% include '@atoms/image/_image--primary.twig' with {
     image: image,

diff --git a/source/default/_patterns/01-atoms/image/_image.twig b/source/default/_patterns/01-atoms/image/_image.twig
@@ -14,7 +14,6 @@
 
 {% set image_classes = image_classes|default([])|merge([
   'image',
-  'img-fluid',
   image.style ? 'image--' ~ image.style : '',
   image.variant ? 'image--' ~ image.variant : '',
 ]) | sort | join(' ') | trim %}