dark mode image shortcode

phiw13 · 2020-09-16 09:54:08

This is a preliminary shortcode to display either a “light” theme or a “dark” theme image image depending on the OS / user theming preferences (the same mechanism could be used for those who need different images for different layouts – small vs large screens etc). The toggle is based on the prefers-color-scheme: dark media query.

The main problem is that <txp:images /> is not aware of multiple “views”, so far. This means I cannot use the usual txp:image and/or txp:smd_thumbnail tags for the dark mode image insertions. As a work around, ATM, I cheated a little and hard coded the path to the dark mode image(s).

The shortcode is named screenshot – that is what I am currently using it for
For this discussion I have simplified the code below as muc as possible

<txp:images yield='id' break=''>
  <figure>
    <picture>
     <txp:if_yield name='dm-id'><source srcset="/images/screen-M/<txp:yield name='dm-id' />.png 800w, <txp:image_url id='<txp:yield name="dm-id" />' /> 1600w" sizes="(max-width: 60em) 90vw, 100%" media="(prefers-color-scheme: dark)"></txp:if_yield>
      <img src="<txp:smd_thumbnail type='screen-M' format='url' />" srcset="<txp:smd_thumbnail type='screen-M'><txp:smd_thumbnail_info item='url' /> <txp:smd_thumbnail_info item='w' />w</txp:smd_thumbnail>,  <txp:image_url /> <txp:image_info type='w' />w" alt="<txp:image_info type='alt' />" sizes="(max-width: 60em) 90vw, 100%">
    </picture>
    <txp:evaluate><figcaption itemprop="caption"><txp:image_info type="caption" escape="tidy, textile" /></figcaption></txp:evaluate>
  </figure>
</txp:images>

and then insert as

<txp::screenshot id="XX" dm-id="XX" />

Suggestions, comments and so on welcome.

Edit: shortcode form updated based on suggestions from Oleg below.

Last edited by phiw13 (2020-09-17 04:47:09)

etc · 2020-09-16 11:03:41

Nice to see the shortcodes collection growing. Just a remark, you can replace

<txp:images id='<txp:yield name="id" />' break=''>

with

<txp:images yield="id" break=''>

and remove test="image_info" from <txp:evaluate />, since it’s the only tag anyway.

gaekwad · 2020-09-16 12:47:23

This is super.

phiw13 · 2020-09-17 04:54:07

etc wrote #325910:

Thanks for this suggestions. I’ve update the shortcode form above with those.

I keep forgetting about the yield="id" when used as an attribute. You have mentioned before, I made a mental note and then poof gone out my memory :-(.

the <txp: evaluate /> is leftover of a more complex construction which I simplified for the use here.

BTW – the type="caption" is still the default value for txp:image_info /> as far as I can see (and the docs). I could eventually remove it too, although for clarity I am inclined to leave it.

Textpattern CMS

Textpattern CMS support forum

#1 2020-09-16 09:54:08

dark mode image shortcode

#2 2020-09-16 11:03:41

Re: dark mode image shortcode

#3 2020-09-16 12:47:23

Re: dark mode image shortcode

#4 2020-09-17 04:54:07

Re: dark mode image shortcode

etc wrote #325910:

Board footer