refactor: always include dimensions on images (#1405)

mfranzke · web-flow · commit f30b21e2a433 · 2022-01-06T21:18:48.000+01:00
* refactor: always include dimensions on images

* chore: corrected that filename

* chore: we should advocate for including dimensions as well

* chore: we should advocate for including dimensions as well

* chore: we should advocate for including dimensions as well

* chore: added missing dimensions
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src='/patternlab.png' width="300" alt="Pattern Lab Logo" style="max-width: 100%;" />
+  <img src='/patternlab.png' width="300" height="166" alt="Pattern Lab Logo" style="max-width: 100%;" />
 </p>
 
 # Pattern Lab
diff --git a/packages/docs/src/docs/data-json-mustache.md b/packages/docs/src/docs/data-json-mustache.md
@@ -17,10 +17,10 @@ sitemapPriority: '0.8'
 At its core JSON is a simple key-value store. This means that any piece of data in JSON has a key and a value. The key is the name of an attribute and the value is what should be shown when that attribute is referenced. Here's a simple example:
 
 ```javascript
-"src": "../../images/fpo-avatar.png"
+"src": "../../images/fpo_avatar.png"
 ```
 
-In this case the key is `src` and the value is `../../images/fpo-avatar.png`. Let's look at how we might reference this data in a pattern template. Mustache variables are denoted by the double-curly braces (or mustaches).
+In this case the key is `src` and the value is `../../images/fpo_avatar.png`. Let's look at how we might reference this data in a pattern template. Mustache variables are denoted by the double-curly braces (or mustaches).
 
 ```html
 <img src="{% raw %}{{ src }}{% endraw %}" alt="Avatar" />
@@ -29,7 +29,7 @@ In this case the key is `src` and the value is `../../images/fpo-avatar.png`. Le
 The Mustache variable is `{% raw %}{{ src }}{% endraw %}`. Note that `src` matches the name of the key in our JSON example. When the Node version of Pattern Lab compile this template the end result will be:
 
 ```html
-<img src="../../images/fpo-avatar.png" alt="Avatar" />
+<img src="../../images/fpo_avatar.png" alt="Avatar" />
 ```
 
 Note that `{% raw %}{{ src }}{% endraw %}` was replaced by the value for `src` found in our JSON example.
@@ -40,28 +40,34 @@ We may want our JSON file to be a little more organized and our Mustache variabl
 
 ```javascript
 "square": {
-    "src": "../../images/fpo-square.png",
-    "alt": "Square"
+    "src": "../../images/fpo_square.png",
+    "alt": "Square",
+    "width": "600",
+    "height": "600"
 },
 "avatar": {
-    "src": "../../images/fpo-avatar.png",
-    "alt": "Avatar"
+    "src": "../../images/fpo_avatar.png",
+    "alt": "Avatar",
+    "width": "300",
+    "height": "300"
 }
 ```
 
-Note how their are attributes ( `src`, `alt` ) nested within a larger container ( `square` ). Also note how the attributes are separated by commas. If we wanted to use the attributes for the square image in our pattern we'd write:
+Note how their are attributes ( `src`, `alt`, `width`, `height` ) nested within a larger container ( `square` ). Also note how the attributes are separated by commas. If we wanted to use the attributes for the square image in our pattern we'd write:
 
 ```html
 <img
 	src="{% raw %}{{ square.src }}{% endraw %}"
 	alt="{% raw %}{{ square.alt }}{% endraw %}"
+	width="{% raw %}{{ square.width }}{% endraw %}"
+	height="{% raw %}{{ square.height }}{% endraw %}"
 />
 ```
 
 This would compile to:
 
 ```html
-<img src="../../images/fpo-square.png" alt="Square" />
+<img src="../../images/fpo_square.png" alt="Square" width="600" height="600" />
 ```
 
 This nesting makes it easier to read how the attributes are organized in our patterns. The default `data.json` file has several examples of this type of nesting of attributes.
diff --git a/packages/starterkit-handlebars-demo/dist/_data/blocks.json b/packages/starterkit-handlebars-demo/dist/_data/blocks.json
@@ -1,6 +1,8 @@
 {
     "stackedBlockMedia": {
-        "src": "https://via.placeholder.com/600x400"
+        "src": "https://via.placeholder.com/600x400",
+        "width": "600",
+        "height": "400"
     },
     "stripeField": true,
     "cartPrice": {
diff --git a/packages/starterkit-handlebars-demo/dist/_data/images.json b/packages/starterkit-handlebars-demo/dist/_data/images.json
@@ -1,5 +1,7 @@
 {
     "src" : "https://via.placeholder.com/1200x800",
     "alt": "landscape image",
-    "logoImg" : "../../images/logo.png"
+    "logoImg" : "../../images/logo.png",
+    "width": "1200",
+    "height": "800"
 }
diff --git a/packages/starterkit-handlebars-demo/dist/_data/lists.json b/packages/starterkit-handlebars-demo/dist/_data/lists.json
@@ -5,7 +5,9 @@
 			"url": "#",
 			"stackedBlockMedia": {
 				"src": "https://via.placeholder.com/600x400",
-				"alt": "placeholder image"
+				"alt": "placeholder image",
+				"width": "600",
+				"height": "400"
 			},
 			"headline": "Heading ipsum dolor sit (39 characters)",
 			"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
@@ -16,7 +18,9 @@
 			"url": "#",
 			"stackedBlockMedia": {
 				"src": "https://via.placeholder.com/600x400",
-				"alt": "placeholder image"
+				"alt": "placeholder image",
+				"width": "600",
+				"height": "400"
 			},
 			"headline": "Heading ipsum dolor sit (39 characters)",
 			"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
@@ -27,7 +31,9 @@
 			"url": "#",
 			"stackedBlockMedia": {
 				"src": "https://via.placeholder.com/600x400",
-				"alt": "placeholder image"
+				"alt": "placeholder image",
+				"width": "600",
+				"height": "400"
 			},
 			"headline": "Heading ipsum dolor sit (39 characters)",
 			"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
@@ -38,7 +44,9 @@
 			"url": "#",
 			"stackedBlockMedia": {
 				"src": "https://via.placeholder.com/600x400",
-				"alt": "placeholder image"
+				"alt": "placeholder image",
+				"width": "600",
+				"height": "400"
 			},
 			"headline": "Heading ipsum dolor sit (39 characters)",
 			"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
@@ -49,7 +57,9 @@
 			"url": "#",
 			"stackedBlockMedia": {
 				"src": "https://via.placeholder.com/600x400",
-				"alt": "placeholder image"
+				"alt": "placeholder image",
+				"width": "600",
+				"height": "400"
 			},
 			"headline": "Heading ipsum dolor sit (39 characters)",
 			"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
@@ -60,7 +70,9 @@
 			"url": "#",
 			"stackedBlockMedia": {
 				"src": "https://via.placeholder.com/600x400",
-				"alt": "placeholder image"
+				"alt": "placeholder image",
+				"width": "600",
+				"height": "400"
 			},
 			"headline": "Heading ipsum dolor sit (39 characters)",
 			"excerpt": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/atoms/images/landscape-4x3.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/atoms/images/landscape-4x3.hbs
@@ -1 +1 @@
-<img src="{{ src }}" alt="{{ alt }}" class="{{ styleModifier }}" />
+<img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" class="{{ styleModifier }}" />
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/atoms/images/stacked-block-image.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/atoms/images/stacked-block-image.hbs
@@ -1 +1 @@
-<img src="{{ src }}" alt="{{ alt }}" class="c-stacked-block__img" />
+<img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" class="c-stacked-block__img" />
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/atoms/images/stacked-block-image.json b/packages/starterkit-handlebars-demo/dist/_patterns/atoms/images/stacked-block-image.json
@@ -1,3 +1,5 @@
 {
-	"src": "https://via.placeholder.com/600x400"
+	"src": "https://via.placeholder.com/600x400",
+	"width": "600",
+	"height": "400"
 }
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/hero.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/hero.hbs
@@ -1,6 +1,6 @@
 <div class="c-hero">
 
-	<img src="{{ src }}" alt="{{ alt }}" class="c-hero__img" />
+	<img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" class="c-hero__img" />
 	<div class="c-hero__body">
 		<h2 class="c-hero__headline">{{ heading }}</h2>
 	</div>
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/promo-block.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/promo-block.hbs
@@ -14,7 +14,7 @@
 		{{#with promoBlockLink }}
 		<a href="{{ url }}" class="c-promo-block__link">
 		{{/ with }}
-			<img src="{{ src }}" alt="{{ alt }}" class="c-promo-block__img" />
+			<img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" class="c-promo-block__img" />
 		{{#if promoBlockLink }}
 		</a>
 		{{/ if }}
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/stacked-block.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/stacked-block.hbs
@@ -3,7 +3,7 @@
 	<div class="c-stacked-block__header">
 		{{#with stackedBlockMedia }}
 		<div class="c-stacked-block__media">
-			{{> atoms-stacked-block-image }}
+			{{> atoms-stacked-block-image width="1200" height="800" }}
 		</div>
 		{{/ with }}
 		{{# with onSale }}
@@ -22,4 +22,4 @@
 		<span class="c-stacked-block__optional">{{ price }}</span>
 		{{/ with }}
 	</div>
-</a><!-- end c-stacked-block -->
+</a><!-- end c-stacked-block -->
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/stripe.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/stripe.hbs
@@ -2,7 +2,7 @@
 
     <div class="c-stripe__left-container">
 		<a href="{{ url }}" class="c-stripe__link">
-            <img src="{{ src }}" alt="{{ alt }}"  class="c-stripe__img" />
+            <img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}"  class="c-stripe__img" />
 		</a>
     </div>
 
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/stripe.json b/packages/starterkit-handlebars-demo/dist/_patterns/molecules/blocks/stripe.json
@@ -1,3 +1,5 @@
 {
-    "src": "https://via.placeholder.com/495x330"
+    "src": "https://via.placeholder.com/495x330",
+    "width": "495",
+    "height": "330"
 }
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/pages/cart.json b/packages/starterkit-handlebars-demo/dist/_patterns/pages/cart.json
@@ -8,6 +8,8 @@
 			"url": "#",
 			"src": "../../images/women-boot-wedges.jpg",
 			"alt": "placeholder image",
+			"width": "1200",
+			"height": "800",
 			"stripeField": {
 				"styleModifier": "c-field--small",
 				"label": "Quantity",
@@ -23,6 +25,8 @@
 			"url": "#",
 			"src": "../../images/men-brown-dress-shoes.jpg",
 			"alt": "placeholder image",
+			"width": "1200",
+			"height": "800",
 			"stripeField": {
 				"styleModifier": "c-field--small",
 				"label": "Quantity",
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/pages/category~holiday-guide.json b/packages/starterkit-handlebars-demo/dist/_patterns/pages/category~holiday-guide.json
@@ -6,6 +6,8 @@
 		"url": "link.pages-detail",
 		"src": "../../images/holiday.jpg",
 		"alt": "Group of shoes",
+		"width": "1920",
+		"height": "1280",
 		"heading": "2019 Holiday Gift Guide"
 	},
 	"paginationList": false
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/pages/detail.json b/packages/starterkit-handlebars-demo/dist/_patterns/pages/detail.json
@@ -5,7 +5,9 @@
     },
     "featureImage": {
         "src": "../../images/women-boot-wedges.jpg",
-        "alt": "Boot wedges"
+        "alt": "Boot wedges",
+        "width": "1200",
+        "height": "800"
     },
     "htmlText": "<p>These suede booties are the perfect shoes to accent your outfit whether heading to a casual dinner or an elaborate gala.</p><p>These booties come in a sepia (shown) or a stark black. These are made of 100% suede in U.S.A.</p><h2>$120</h2>",
     "priceSection": {
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/pages/homepage.json b/packages/starterkit-handlebars-demo/dist/_patterns/pages/homepage.json
@@ -3,6 +3,8 @@
 		"url": "link.pages-detail",
 		"src": "../../images/group-shoes.jpg",
 		"alt": "Group of shoes",
+		"width": "1200",
+		"height": "801",
 		"heading" :  "Shoes For The Soul"
 	},
 	"promoBlock": [
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/templates/category.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/templates/category.hbs
@@ -8,7 +8,7 @@
 
 			{{#if hero }}
 			{{#with hero }}
-			{{> molecules-hero }}
+			{{> molecules-hero width="1200" height="800" }}
 			{{/with }}
 			{{/if}}
 
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/templates/detail.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/templates/detail.hbs
@@ -9,7 +9,7 @@
 
 			<div class="l-page-layout__main">
 				{{# featureImage }}
-				<img src="{{ src }}" alt="{{ alt }}" />
+				<img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" />
 				{{/ featureImage }}
 			</div><!--end .l-main-->
 
diff --git a/packages/starterkit-handlebars-demo/dist/_patterns/templates/homepage.hbs b/packages/starterkit-handlebars-demo/dist/_patterns/templates/homepage.hbs
@@ -3,11 +3,11 @@
 
 	<div class="l-container">
 		{{# hero }}
-		{{> molecules-hero }}
+		{{> molecules-hero width="1200" height="800" }}
 		{{/ hero }}
 
 		{{# promoBlock }}
-		{{> molecules-promo-block }}
+		{{> molecules-promo-block width="1200" height="800" }}
 		{{/ promoBlock }}
 
 
diff --git a/packages/starterkit-twig-demo/dist/_data/data.json b/packages/starterkit-twig-demo/dist/_data/data.json
@@ -5,23 +5,33 @@
   "img": {
     "landscape_4x3": {
       "src": "../../images/fpo_4x3.png",
-      "alt": "4x3 Image"
+      "alt": "4x3 Image",
+      "width": "600",
+      "height": "450"
     },
     "landscape_16x9": {
       "src": "../../images/fpo_16x9.png",
-      "alt": "16x9 Image"
+      "alt": "16x9 Image",
+      "width": "1280",
+      "height": "720"
     },
     "square": {
       "src": "../../images/fpo_square.png",
-      "alt": "Square Thumbnail"
+      "alt": "Square Thumbnail",
+      "width": "600",
+      "height": "600"
     },
     "avatar" : {
       "src" : "../../images/fpo_avatar.png",
-      "alt" : "Person Name"
+      "alt" : "Person Name",
+      "width": "300",
+      "height": "300"
     },
     "rectangle": {
       "src": "https://placeimg.com/400/300/tech",
-      "alt": "Rectangle"
+      "alt": "Rectangle",
+      "width": "400",
+      "height": "300"
     }
   },
   "headline" : {
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/avatar.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/avatar.twig
@@ -1 +1 @@
-<img src="{{img.avatar.src}}" alt="Avatar" />
+<img src="{{img.avatar.src}}" width="{{img.avatar.width}}" height="{{img.avatar.height}}" alt="Avatar" />
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/favicon.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/favicon.twig
@@ -1 +1 @@
-<img src="../../images/favicon_32x32.jpg" />
+<img src="../../images/favicon_32x32.jpg" width="32" height="32" />
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/landscape-16x9.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/landscape-16x9.twig
@@ -1 +1 @@
-<img src="{{ img.landscape_16x9.src }}" alt="{{ img.landscape_16x9.alt }}" />
+<img src="{{ img.landscape_16x9.src }}" alt="{{ img.landscape_16x9.alt }}" width="{{ img.landscape_16x9.width }}" height="{{ img.landscape_16x9.height }}" />
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/landscape-4x3.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/landscape-4x3.twig
@@ -1 +1 @@
-<img src="{{ img.landscape_4x3.src }}" alt="{{ img.landscape_4x3.alt }}" />
+<img src="{{ img.landscape_4x3.src }}" alt="{{ img.landscape_4x3.alt }}" width="{{ img.landscape_4x3.width }}" height="{{ img.landscape_4x3.height }}" />
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/loading-icon.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/loading-icon.twig
@@ -1 +1 @@
-<img src="../../images/ajax-loader.gif" alt="Loading" />
+<img src="../../images/ajax-loader.gif" width="16" height="16" alt="Loading" />
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/logo.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/logo.twig
@@ -1 +1 @@
-<a href="{{ link.pages-homepage }}"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /></a>
+<a href="{{ link.pages-homepage }}"><img src="../../images/logo.png" width="350" height="100" class="logo" alt="Logo Alt Text" /></a>
diff --git a/packages/starterkit-twig-demo/dist/_patterns/atoms/images/square.twig b/packages/starterkit-twig-demo/dist/_patterns/atoms/images/square.twig
@@ -1 +1 @@
-<img src="{{ img.square.src }}" alt="{{ img.square.alt }}" />
+<img src="{{ img.square.src }}" alt="{{ img.square.alt }}" width="{{ img.square.width }}" height="{{ img.square.height }}" />
diff --git a/packages/starterkit-twig-demo/dist/_patterns/pages/article.json b/packages/starterkit-twig-demo/dist/_patterns/pages/article.json
@@ -8,11 +8,15 @@
 	"img": {
 		"landscape_4x3": {
 			"src": "../../images/sample/landscape-16x9-mountains.jpg",
-			"alt": "Mountains"
+			"alt": "Mountains",
+			"width": "1151",
+			"height": "638"
 		},
 		"landscape_16x9": {
 			"src": "../../images/sample/landscape-16x9-mountains.jpg",
-			"alt": "Mountains"	
+			"alt": "Mountains",
+			"width": "1151",
+			"height": "638"
 		}
 	},
 	"inset_blocks" : [
@@ -25,4 +29,4 @@
 			"headline" : "This is the headline for the latest block"
 		}
 	]
-}
+}
diff --git a/packages/starterkit-twig-demo/dist/_patterns/pages/homepage.json b/packages/starterkit-twig-demo/dist/_patterns/pages/homepage.json

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"src" : "https://via.placeholder.com/1200x800",`
`3`	`3`	`"alt": "landscape image",`
`4`		`- "logoImg" : "../../images/logo.png"`
	`4`	`+ "logoImg" : "../../images/logo.png",`
	`5`	`+ "width": "1200",`
	`6`	`+ "height": "800"`
`5`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<img src="{{ src }}" alt="{{ alt }}" class="{{ styleModifier }}" />`
	`1`	`+<img src="{{ src }}" alt="{{ alt }}" width="{{ width }}" height="{{ height }}" class="{{ styleModifier }}" />`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
`1`	`1`	`{`
`2`		`- "src": "https://via.placeholder.com/600x400"`
	`2`	`+ "src": "https://via.placeholder.com/600x400",`
	`3`	`+ "width": "600",`
	`4`	`+ "height": "400"`
`3`	`5`	`}`