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.

clerk/src/nextjournal/clerk/viewer.cljc

Lines 941 to 951 in 8d2929b

	(def image-viewer
	{#?@(:clj [:pred #(instance? BufferedImage %)
	:transform-fn (fn [{image :nextjournal/value}]
	(-> {:nextjournal/value (buffered-image->bytes image)
	:nextjournal/content-type "image/png"
	:nextjournal/width (image-width image)}
	mark-presented))])
	:name `image-viewer
	:render-fn '(fn [blob-or-url] [:div.flex.flex-col.items-center.not-prose
	[:img {:src #?(:clj (nextjournal.clerk.render/url-for blob-or-url)
	:cljs blob-or-url)}]])})

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.