Skip to content

Commit e2e1db4

Browse files
NicolaSaundersNicolaSaunders
authored
Merge pull request #103 from studio24/hotfix/add-img-dimensions
fix: add width/height attributes to images
2 parents 64c99f6 + 7761322 commit e2e1db4

8 files changed

Lines changed: 20 additions & 20 deletions

File tree

‎web/amplify/advanced-components/cards.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ <h3 class="card__heading"><a class="card__link" href="https://en.wikipedia.org/w
105105
<p>Examining the popularity of cat-related media content online.</p>
106106
</div>
107107
<div class="l-frame card__image">
108-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
108+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
109109
</div>
110110
</div>
111111
</div>
@@ -118,7 +118,7 @@ <h3 class="card__heading"><a class="card__link" href="https://en.wikipedia.org/w
118118
<div class="button" aria-hidden="true">Read more</div>
119119
</div>
120120
<div class="l-frame card__image">
121-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
121+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
122122
</div>
123123
</div>
124124
</div>
@@ -141,7 +141,7 @@ <h3 class="card__heading"><a class="card__link" href="https://en.wikipedia.org/w
141141
</ul>
142142
</div>
143143
<div class="l-frame card__image">
144-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
144+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
145145
</div>
146146
</div>
147147
</div>

‎web/amplify/advanced-components/carousel.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,17 +99,17 @@ <h2>Simple image carousel</h2>
9999
<ul class="splide__list">
100100
<li class="splide__slide">
101101
<div class="l-frame">
102-
<img src="../../dist/images/jpg-cat-1.jpg" alt="A brown tabby cat with green eyes faces the camera">
102+
<img src="../../dist/images/jpg-cat-1.jpg" alt="A brown tabby cat with green eyes faces the camera" width="640" height="491">
103103
</div>
104104
</li>
105105
<li class="splide__slide">
106106
<div class="l-frame">
107-
<img src="../../dist/images/jpg-cat-1.jpg" alt="A second copy of the tabby cat from slide 1">
107+
<img src="../../dist/images/jpg-cat-1.jpg" alt="A second copy of the tabby cat from slide 1" width="640" height="491">
108108
</div>
109109
</li>
110110
<li class="splide__slide">
111111
<div class="l-frame">
112-
<img src="../../dist/images/jpg-cat-1.jpg" alt="A third copy of the tabby cat from slide 1">
112+
<img src="../../dist/images/jpg-cat-1.jpg" alt="A third copy of the tabby cat from slide 1" width="640" height="491">
113113
</div>
114114
</li>
115115
</ul>

‎web/amplify/core-components/avatars.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ <h1>Avatars</h1>
9898
</div>
9999
<div class="component">
100100
<div class="avatar">
101-
<img alt src="https://www.w3.org/2006/05/u/1682ihk1hqqo-sm.jpg">
101+
<img alt src="https://s3.studio24.net/wp-content/uploads/2018/09/Close-Simon-150x150.jpg" width="150" height="150">
102102
</div>
103103
</div>
104104
<div class="component component--text">

‎web/amplify/core-components/cards.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ <h3 class="card__heading">Cats and the Internet</h3>
111111
<a class="button" href="https://en.wikipedia.org/wiki/Cats_and_the_Internet"><span class="visuallyhidden">Cats and the Internet:</span> Read more</a>
112112
</div>
113113
<div class="l-frame card__image">
114-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
114+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
115115
</div>
116116
</div>
117117
</div>

‎web/amplify/core-components/image-component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ <h1>Image component</h1>
9797
</div>
9898
<figure class="component component--image">
9999
<div class="l-frame">
100-
<img src="../../dist/images/jpg-cat-1.jpg" loading="lazy" alt="">
100+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" loading="lazy" alt="">
101101
</div>
102102
<figcaption>
103103
<p>The figcaption is not a replacement for the image's <code>alt</code> attribute. It should be used for providing relevant supporting content.</p>

‎web/amplify/core-components/shelves.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ <h3 class="card__heading">Cats and the Internet</h3>
115115
<a class="button" href="https://en.wikipedia.org/wiki/Cats_and_the_Internet"><span class="visuallyhidden">Cats and the Internet:</span> Read more</a>
116116
</div>
117117
<div class="l-frame card__image">
118-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
118+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
119119
</div>
120120
</div>
121121
</li>
@@ -127,7 +127,7 @@ <h3 class="card__heading">Cats and the Internet</h3>
127127
<a class="button" href="https://en.wikipedia.org/wiki/Cats_and_the_Internet"><span class="visuallyhidden">Cats and the Internet:</span> Read more</a>
128128
</div>
129129
<div class="l-frame card__image">
130-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
130+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
131131
</div>
132132
</div>
133133
</li>
@@ -139,7 +139,7 @@ <h3 class="card__heading">Cats and the Internet</h3>
139139
<a class="button" href="https://en.wikipedia.org/wiki/Cats_and_the_Internet"><span class="visuallyhidden">Cats and the Internet:</span> Read more</a>
140140
</div>
141141
<div class="l-frame card__image">
142-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
142+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
143143
</div>
144144
</div>
145145
</li>
@@ -151,7 +151,7 @@ <h3 class="card__heading">Cats and the Internet</h3>
151151
<a class="button" href="https://en.wikipedia.org/wiki/Cats_and_the_Internet"><span class="visuallyhidden">Cats and the Internet:</span> Read more</a>
152152
</div>
153153
<div class="l-frame card__image">
154-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
154+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
155155
</div>
156156
</div>
157157
</li>
@@ -163,7 +163,7 @@ <h3 class="card__heading">Cats and the Internet</h3>
163163
<a class="button" href="https://en.wikipedia.org/wiki/Cats_and_the_Internet"><span class="visuallyhidden">Cats and the Internet:</span> Read more</a>
164164
</div>
165165
<div class="l-frame card__image">
166-
<img src="../../dist/images/jpg-cat-1.jpg" alt="" loading="lazy">
166+
<img src="../../dist/images/jpg-cat-1.jpg" width="640" height="491" alt="" loading="lazy">
167167
</div>
168168
</div>
169169
</li>

‎web/amplify/layout-helpers/frame.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ <h2>CSS custom properties</h2>
9898
</div>
9999
<div class="component">
100100
<div class="l-frame">
101-
<img src="../../dist/images/jpg-cat-1.jpg" alt>
101+
<img src="../../dist/images/jpg-cat-1.jpg" alt width="640" height="491">
102102
</div>
103103
</div>
104104
<div class="component">
105105
<div class="l-frame" data-shape="circle">
106-
<img src="../../dist/images/jpg-cat-1.jpg" alt>
106+
<img src="../../dist/images/jpg-cat-1.jpg" alt width="640" height="491">
107107
</div>
108108
</div>
109109
<div class="component component--text">

‎web/amplify/typography-test/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -437,19 +437,19 @@ <h2>Forms</h2>
437437
</div>
438438
</form>
439439
<h2>Images, figures, pictures and videos</h2>
440-
<p>Under no circumstances should you have an image without an <code>alt</code> attribute. At a minimum, it should be an empty value like this one. That should only be used for purely decorative images though. </p>
441-
<img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MjA3NzQ4Mg&ixlib=rb-4.0.3&q=80&w=1080" alt="">
440+
<p>Under no circumstances should you have an image without an <code>alt</code> attribute. At a minimum, it should be an empty value like this one. That should only be used for purely decorative images though.</p>
441+
<img src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MjA3NzQ4Mg&ixlib=rb-4.0.3&q=80&w=1080" width="1080" height="720" alt>
442442
<h3>An image in a figure with a caption</h3>
443443
<figure>
444-
<img src="https://images.unsplash.com/photo-1696251143046-2d32fb985b59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=4470&q=80" alt="A Tokyo street in the early evening dusk. The shot is from under a steel bridge where there is a store, lit up, which in turn, lights up the surrounding area.">
444+
<img src="https://images.unsplash.com/photo-1696251143046-2d32fb985b59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=4470&q=80" width="4470" height="2980" alt="A Tokyo street in the early evening dusk. The shot is from under a steel bridge where there is a store, lit up, which in turn, lights up the surrounding area.">
445445
<figcaption>Tokyo, Japan, looking stunning in the early evening. By <a href="https://unsplash.com/@ayumikubo">ayumi kubo</a>
446446
</figcaption>
447447
</figure>
448448
<h3>A picture element</h3>
449449
<picture>
450450
<source srcset="https://images.unsplash.com/photo-1692946573219-2257a4a29cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&h=1500&q=80" media="(min-width: 1500px)">
451451
<source srcset="https://images.unsplash.com/photo-1692946573219-2257a4a29cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" media="(orientation: portrait)">
452-
<img src="https://images.unsplash.com/photo-1692946573219-2257a4a29cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" alt="An above shot of some very green leaves">
452+
<img src="https://images.unsplash.com/photo-1692946573219-2257a4a29cad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&h=500&q=80" width="500" height="500" alt="An above shot of some very green leaves">
453453
</picture>
454454
<h3>A video element</h3>
455455
<video controls src="https://assets.codepen.io/174183/flower.mp4"></video>

0 commit comments

Comments
 (0)