[resolved, sorta] figure shortcode; 'auto' value fingering

Destry · 2021-03-22 12:25:58

In this article I’ve been wrangling about a TextMate bundle I’ve extended, I am showing a few images of the editing stage, containing text and syntax examples, but I want show them at their full screenshot scale, because any downsizing or cropping will give the wrong impression of the presentation in the images. Treating overflow scrolling as auto when screens are smaller seems to me like the best way to present images like this.

I can easily get the behaviour I want if using this in the CSS file (not cross-browser tested yet):

/* for Notes section images only */
#notes-page figure {overflow:auto;}
#notes-page figure img {width:auto; height:auto;}

But that applies it to every figure/image in Notes section articles, and I don’t always want this behaviour on every image, that section or anywhere else. An image of a flower, for example, can scale up/down easily enough without need for hiding or scrolling larger image dimensios.

It occurred to me that since the value auto is common in the CSS, maybe I could handle this inline, in my figure shortcode as a conditional yield, which would be a good use of inline styles, for once.

Leaving out most other functioning attributes of my shortcode here for simplicity, my short-tag would be: <txp::figure id="" scroll="auto" />.

Then, add this in the figure element of the shortcode:

<figure<txp:if_yield name="scroll"> style="overflow:<txp:yield name="scroll" />;" </txp:if_yield>>

Which works fine, though it does not do anything without the width and height in relation on the image.

But if I try to use the yield in the img element to manipulate width and height, images don’t output. None of the following three constructions work…

<txp:image 
  id='<txp:yield name="id" />' 
  <txp:if_yield name="scroll"> width="<txp:yield name="scroll" />"<txp:else />width="0" </txp:if_yield>
  <txp:if_yield name="scroll"> height="<txp:yield name="scroll" />"<txp:else />height="0"</txp:if_yield> 
/>

<txp:image 
  id='<txp:yield name="id" />' 
  width='<txp:if_yield name="scroll"><txp:yield name="scroll" /><txp:else />0</txp:if_yield>' 
  height='<txp:if_yield name="scroll"><txp:yield name="scroll" /><txp:else />0</txp:if_yield>' 
/>

<txp:image 
  id='<txp:yield name="id" />'
  <txp:if_yield name="scroll"> 
      style="width:<txp:yield name="scroll" />;height:<txp:yield name="scroll" />;'
    <txp:else />
      style="width:0;height:0;"
  </txp:if_yield> 
/>

My syntax is wrong? I don’t understand something about how Textpattern treats the width and height? I forgot how to use CSS? I am open to possibilities.

If not possible, is there some other way to get a case-by-case basis?

Last edited by Destry (2021-03-22 15:55:31)

etc · 2021-03-22 14:09:27

Destry wrote #329398:

My syntax is wrong?

Yes. You can imbricate html but not txp tags this way:

<this <txp:works /> />
<txp:this <txp:does_not /> />

A possible solution could be

<txp:image 
  id='<txp:yield name="id" />' 
  width='<txp:yield name="scroll" default="0"/>'
  height='<txp:yield name="scroll" default="0" />' 
/>

which is actually equivalent to your second (not working?) construction.

etc · 2021-03-22 14:14:26

Ah, actually height and width in <txp:image /> are converted to integers and become 0 instead of auto. Because they must be integer in HTML5.

Destry · 2021-03-22 15:50:35

etc wrote #329400:

Ah, actually height and width in <txp:image /> are converted to integers and become 0 instead of auto. Because they must be integer in HTML5.

Drat!

This seems to work fine in both FF and Safari, and inspector tools give no sign of any wrongdoing:

figure {overflow:auto;}
figure img {width:auto; height:auto;}

But you are right, I don’t seem to find any reference that says auto is an acceptable value. Unit-less pixel integers only. Boo.

So, now that I know what’s going on, I’ll just run rogue and apply it case-by-case with a special class for the figure element:

/* for some images in Notes only */
figure.scroll {overflow:auto;}
figure.scroll img {width:auto; height:auto;}

For example, <txp::figure id="13" class="scroll" />.

Not sure why I didn’t think of that to begin with.

When the browsers don’t let me anymore, I’ll have to figure something else out.

Last edited by Destry (2021-03-22 15:53:03)

Textpattern CMS

Textpattern CMS support forum

#1 2021-03-22 12:25:58