Skip to content

Commit 1ee554d

Browse files
philwarehamphilwareham
committed
Native dark mode images
1 parent 5e77bcb commit 1ee554d

File tree

2 files changed

+42
-22
lines changed

2 files changed

+42
-22
lines changed

‎src/mockups/index.html‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -186,17 +186,15 @@ <h2 class="index-feature-contribute">Contributors are welcomed</h2>
186186
<div class="wrapper-inner zebra">
187187
<div class="container">
188188
<p>
189-
<img class="screen-large prefers-color-scheme" width="1150" height="494" alt="Textpattern Screenshots"
190-
src="/assets/img/com/index-device-screens.png"
191-
data-src-light="/assets/img/com/index-device-screens.png"
192-
data-src-dark="/assets/img/com/dark-index-device-screens.png"
193-
srcset="/assets/img/com/index-device-screens@2x.png 2x"
194-
data-srcset-light="/assets/img/com/index-device-screens@2x.png 2x"
195-
data-srcset-dark="/assets/img/com/dark-index-device-screens@2x.png 2x">
196-
<img class="screen-small prefers-color-scheme" width="620" height="477" alt="Textpattern Screenshot"
197-
src="/assets/img/com/index-device-screen.png"
198-
data-src-light="/assets/img/com/index-device-screen.png"
199-
data-src-dark="/assets/img/com/dark-index-device-screen.png">
189+
<picture class="screen-large">
190+
<source srcset="/assets/img/com/dark-index-device-screens.png, /assets/img/com/dark-index-device-screens@2x.png 2x" media="(prefers-color-scheme: dark)">
191+
<source srcset="/assets/img/com/index-device-screens.png, /assets/img/com/index-device-screens@2x.png 2x">
192+
<img loading="lazy" decoding="async" width="1150" height="494" alt="Textpattern Screenshots" src="/assets/img/com/index-device-screens.png">
193+
</picture>
194+
<picture class="screen-small">
195+
<source srcset="/assets/img/com/dark-index-device-screen.png" media="(prefers-color-scheme: dark)">
196+
<img loading="lazy" decoding="async" width="620" height="477" alt="Textpattern Screenshot" src="/assets/img/com/index-device-screen.png">
197+
</picture>
200198
</p>
201199
</div><!-- /.container -->
202200
</div><!-- /.wrapper-inner -->
@@ -244,7 +242,11 @@ <h1><a href="showcase-landing.html">Site showcase</a></h1>
244242

245243
<div class="ads">
246244
<a href="https://textpattern.com/contact" itemprop="url" title="Want to advertise here? Please contact us to discuss.">
247-
<img loading="lazy" class="prefers-color-scheme" width="300" height="250" itemprop="image" alt="Want to advertise here? Please contact us to discuss." src="/assets/img/com/ad-300x250-placeholder.png" data-src-light="/assets/img/com/ad-300x250-placeholder.png" data-src-dark="/assets/img/com/dark-ad-300x250-placeholder.png" srcset="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-light="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-dark="/assets/img/com/dark-ad-300x250-placeholder@2x.png 2x">
245+
<picture>
246+
<source srcset="/assets/img/com/dark-ad-300x250-placeholder.png, /assets/img/com/dark-ad-300x250-placeholder@2x.png 2x" media="(prefers-color-scheme: dark)">
247+
<source srcset="/assets/img/com/ad-300x250-placeholder.png, /assets/img/com/ad-300x250-placeholder@2x.png 2x">
248+
<img loading="lazy" decoding="async" width="300" height="250" itemprop="image" alt="Want to advertise here? Please contact us to discuss." src="/assets/img/com/ad-300x250-placeholder.png">
249+
</picture>
248250
</a>
249251
</div>
250252

@@ -260,13 +262,11 @@ <h1><a href="showcase-landing.html">Site showcase</a></h1>
260262
<section class="layout-3col-2span" itemscope itemtype="https://schema.org/Blog">
261263
<h2>Latest from <a href="#">the blog</a>…</h2>
262264
<p>
263-
<img class="prefers-color-scheme" width="756" height="160" alt="The Textpattern blog"
264-
src="../assets/img/com/index-blog-header.png"
265-
data-src-light="../assets/img/com/index-blog-header.png"
266-
data-src-dark="../assets/img/com/dark-index-blog-header.png"
267-
srcset="../assets/img/com/index-blog-header@2x.png 2x"
268-
data-srcset-light="../assets/img/com/index-blog-header@2x.png 2x"
269-
data-srcset-dark="../assets/img/com/dark-index-blog-header@2x.png 2x">
265+
<picture class="screen-large">
266+
<source srcset="/assets/img/com/dark-index-blog-header.png, /assets/img/com/dark-index-blog-header@2x.png 2x" media="(prefers-color-scheme: dark)">
267+
<source srcset="/assets/img/com/index-blog-header.png, /assets/img/com/index-blog-header@2x.png 2x">
268+
<img loading="lazy" decoding="async" width="756" height="160" alt="The Textpattern blog" src="/assets/img/com/index-blog-header.png">
269+
</picture>
270270
</p>
271271
<article class="teaser" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
272272
<h1 itemprop="headline"><a itemprop="url mainEntityOfPage" title="Full article" href="blog-article.html">Blog example 1 title</a></h1>

‎src/templates/pages/default.txp‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,17 @@ echo '<a class="count-bubble" rel="external" href="https://github.com/textpatter
159159
</div>
160160
<div class="wrapper-inner zebra">
161161
<div class="container">
162-
<p><img loading="lazy" decoding="async" class="screen-large prefers-color-scheme" width="1150" height="494" alt="Textpattern Screenshots" src="/assets/img/com/index-device-screens.png" data-src-light="/assets/img/com/index-device-screens.png" data-src-dark="/assets/img/com/dark-index-device-screens.png" srcset="/assets/img/com/index-device-screens@2x.png 2x" data-srcset-light="/assets/img/com/index-device-screens@2x.png 2x" data-srcset-dark="/assets/img/com/dark-index-device-screens@2x.png 2x"><img loading="lazy" decoding="async" class="screen-small prefers-color-scheme" width="620" height="477" alt="Textpattern Screenshot" src="/assets/img/com/index-device-screen.png" data-src-light="/assets/img/com/index-device-screen.png" data-src-dark="/assets/img/com/dark-index-device-screen.png"></p>
162+
<p>
163+
<picture class="screen-large">
164+
<source srcset="/assets/img/com/dark-index-device-screens.png, /assets/img/com/dark-index-device-screens@2x.png 2x" media="(prefers-color-scheme: dark)">
165+
<source srcset="/assets/img/com/index-device-screens.png, /assets/img/com/index-device-screens@2x.png 2x">
166+
<img loading="lazy" decoding="async" width="1150" height="494" alt="Textpattern Screenshots" src="/assets/img/com/index-device-screens.png">
167+
</picture>
168+
<picture class="screen-small">
169+
<source srcset="/assets/img/com/dark-index-device-screen.png" media="(prefers-color-scheme: dark)">
170+
<img loading="lazy" decoding="async" width="620" height="477" alt="Textpattern Screenshot" src="/assets/img/com/index-device-screen.png">
171+
</picture>
172+
</p>
163173
</div>
164174
</div>
165175
<div class="wrapper-inner">
@@ -217,7 +227,11 @@ echo '<a class="count-bubble" rel="external" href="https://github.com/textpatter
217227
</div>
218228
<div class="ads">
219229
<a href="<txp:site_url />contact" itemprop="url" title="Want to advertise here? Please contact us to discuss.">
220-
<img loading="lazy" decoding="async" class="prefers-color-scheme" width="300" height="250" itemprop="image" alt="Want to advertise here? Please contact us to discuss." src="/assets/img/com/ad-300x250-placeholder.png" data-src-light="/assets/img/com/ad-300x250-placeholder.png" data-src-dark="/assets/img/com/dark-ad-300x250-placeholder.png" srcset="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-light="/assets/img/com/ad-300x250-placeholder@2x.png 2x" data-srcset-dark="/assets/img/com/dark-ad-300x250-placeholder@2x.png 2x">
230+
<picture>
231+
<source srcset="/assets/img/com/dark-ad-300x250-placeholder.png, /assets/img/com/dark-ad-300x250-placeholder@2x.png 2x" media="(prefers-color-scheme: dark)">
232+
<source srcset="/assets/img/com/ad-300x250-placeholder.png, /assets/img/com/ad-300x250-placeholder@2x.png 2x">
233+
<img loading="lazy" decoding="async" width="300" height="250" itemprop="image" alt="Want to advertise here? Please contact us to discuss." src="/assets/img/com/ad-300x250-placeholder.png">
234+
</picture>
221235
</a>
222236
</div>
223237
</aside>
@@ -228,7 +242,13 @@ echo '<a class="count-bubble" rel="external" href="https://github.com/textpatter
228242
<div class="layout-container">
229243
<section class="layout-3col-2span" itemscope itemtype="https://schema.org/Blog">
230244
<h2>Latest from <a href="<txp:site_url />weblog">the blog</a>…</h2>
231-
<p><img loading="lazy" decoding="async" class="prefers-color-scheme" width="756" height="160" alt="The Textpattern blog" src="/assets/img/com/index-blog-header.png" data-src-light="/assets/img/com/index-blog-header.png" data-src-dark="/assets/img/com/dark-index-blog-header.png" srcset="/assets/img/com/index-blog-header@2x.png 2x" data-srcset-light="/assets/img/com/index-blog-header@2x.png 2x" data-srcset-dark="/assets/img/com/dark-index-blog-header@2x.png 2x"></p>
245+
<p>
246+
<picture>
247+
<source srcset="/assets/img/com/dark-index-blog-header.png, /assets/img/com/dark-index-blog-header@2x.png 2x" media="(prefers-color-scheme: dark)">
248+
<source srcset="/assets/img/com/index-blog-header.png, /assets/img/com/index-blog-header@2x.png 2x">
249+
<img loading="lazy" decoding="async" width="756" height="160" alt="The Textpattern blog" src="/assets/img/com/index-blog-header.png">
250+
</picture>
251+
</p>
232252
<txp:etc_cache id="homepage-blog"><txp:article form="article_listing_blog" limit="2" /></txp:etc_cache>
233253
</section>
234254
<div class="layout-3col">

0 commit comments

Comments
 (0)