How do I use Article_image scaling?

mistersugar · Yesterday 01:12:03

Quick background: I am updating the style and layout of my site using the splendid developer view (thanks a million!). I’m stuck on getting the article image to display within the main column (I’m using the older Mustard CSS that uses Flexbox) since most of the stored images have much larger dimensions. I’ve tried various combinations of the article image tag and object-fit: contain with not much luck.

I realized I needed first to understand how to use the article_image tag on its own.

Observation: I am referencing the txp:article_image documentation page here. In the Attributes section, the explanation for height=“integer” has incorrect information (to my eye), in which “width attribute” should really be “height attribute”:

Use height="0" to turn off the output of a width attribute in the <img> tag (thus the browser will scale the height if a width is used).

My question: I would like to test this tag to see the scaling in action, in that <txp:article_image width=“500” height=“0” will correctly scale the image. What’s the best way to test this in my Txp install on a simple page or the demo site?

jakob · Yesterday 05:35:37

mistersugar wrote #339652:

Observation: I am referencing the txp:article_image documentation page here. In the Attributes section, the explanation for height=“integer” has incorrect information (to my eye), in which “width attribute” should really be “height attribute”…

Yes, that’s probably a copy-paste error and should read as you say: it switches off the height attribute.

I’m using Mustard CSS that uses Flexbox) since most of the stored images have much larger dimensions. I’ve tried various combinations of the article image tag and object-fit: contain with not much luck.

There are various approaches. For images that will be full width as maximum, you can control behaviour with css, e.g.

img.full-width {
    max-width: 100%;
    height: auto;
}

That should constrain them to the container width and allow the height to adapt automatically. You shouldn’t need to set any height or width attributes on the article_image tag, only a class="full-width".

If you want to use CSS’s object-fit, you need to constrain the size of the image in your CSS, for example by setting a specific height and width in your css, or alternatively using aspect-ratio, then use whichever object-fit attribute you want. This only makes sense if you specifically want to constrain the image’s aspect ratio.
Here again, you can allow txp:article_image to output the actual image dimensions, as this helps the browser calculate the resulting fit.

My question: I would like to test this tag to see the scaling in action, in that <txp:article_image width=“500” height=“0” will correctly scale the image. What’s the best way to test this in my Txp install on a simple page or the demo site?

If you log into a Textpattern demo, and assign some image id numbers from the sample images to the welcome article, you’ll see the template automatically adds the images to the top of the article. If you open your browser’s dev tools, and select (or find) the images in the code, you’ll see the css for img, video is exactly as above, and the images fit with column width while the height adjusts according to the original image’s aspect ratio.

Note: if you want that behaviour for all images, unless you specify an class to override default behaviour, you can dispense with the full-width class and use:

img::not([class]) { … }

(if you’re wrapping your images in figure elements, then you should address the figure container rather than the image.)

jakob · Yesterday 05:53:45

mistersugar wrote #339652:

I’m using the older Mustard CSS …

Quick follow-up. If you’re compiling your Mustard CSS from SCSS, you could add a new file under components e.g. images.scss and then include that in the components section of mustard-ui-scss. Then recompile the css from your scss.

If, on the other hand, you’re using Mustard’s pre-compiled CSS, just add your additional CSS as a separate CSS file and then include that file manually in after the Mustard CSS. Or if you want to use Textpattern’s Presentation › Styles panel, add the styles using txp:css after the Mustard CSS.

phiw13 · Yesterday 08:30:04

As an aside: you should never set the width and height of your images in the HTML file to 0. Always specify the (real) width and height, and then size them in your stylesheet(s). The code snippet given by Jakob above is all you basically need.

Reason: performance and layout redrawning. By setting the width and height (in your HTML), the browser knows upfront the aspect-ratio of the image, and – given the constrains set by the stylesheets – knows how much space, horizontally and vertically, must be (p)reserved for the image. Once the image(s) is/are actually downloaded and ready for display, the rest of the layout won’t jump up and down to adjust for the image.

That hack of setting width="0" height="0" in the HTML should really need to vanish from the web.

Bloke · Yesterday 09:50:14

phiw13 wrote #339656:

That hack of setting width="0" height="0" in the HTML should really need to vanish from the web.

Where’s the Like button for posts here?!

mistersugar · Yesterday 11:08:56

Great way to wake up in North Carolina this morning, bird chorus and Txp/CSS master class. Thanks, all. I’ll make my coffee and follow your guidance. I am compiling from SCSS (actually learned how to do that as part of this redesign) and will add the style that way.

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 01:12:03