clerk/image should have an option to set the size

[phronmophobic]

I wanted to embed an image. The source image was large, but I just wanted it to take up 100-200px of vertical space rather than the full screen.

I couldn't figure out any better way to do it than to manually resize the image locally.

[zampino]

You might want to override the image-viewer and replace its :render-fn.

https://github.com/nextjournal/clerk/blob/8d2929b99cfa2164f1fbaf54915b9dcaaa6fe46d/src/nextjournal/clerk/viewer.cljc#L941-L951

with a (quoted) function that best suits your needs.

(clerk/add-viewers! [(assoc viewer/image-viewer :render-fn my-render-fn)])

Alternatively you might nest clerk/image inside clerk/html and wrap it in some markup for the desired sizing to apply (using extra style if tailwind classes are not enough) approx like so

(ns scratch.debug
  (:require [nextjournal.clerk :as clerk]))

(clerk/html [:style "div.container img {
  width: 200px;
  height: 200px;
  object-fit: fit;}"])

(clerk/html [:div.container (clerk/image "trees.png")])

[phronmophobic]

@zampino Very nice!

I do think it would be nice to have some of these options as part of clerk/image so I don't have to lean on my rudimentary CSS skills. Also, not sure how well that CSS would across mobile, tablet, and desktop screen sizes.