Fork me on GitHub
#clerk
<
2023-04-05
>
Charles Comstock22:04:23

I feel kinda silly asking this, but is there a way to adjust the image size constraints for an img tag when inserting an image with clerk/image? I guess at minimum I might be able to override the render-fn for each image to generate custom img tags, but was curious if there was another way to do that? Related question, I notice that clerk/html seems to automatically add overflow-x-auto to it's outer div, anyway to tell it not to?

mkvlr10:04:13

don’t feel silly, I don’t remember this being asked before

mkvlr10:04:34

a simpler way might be using clerk/col to do layouting

mkvlr10:04:27

I don’t think we can disable the overflow-x-auto, right @U4FSZE57V? I mean you can with a custom result viewer but the attribute exists so a single result doesn’t make the page more wide

philippamarkovics11:04:51

right, but perhaps we should have an option for this or somehow make it work with ::clerk/css-class on a higher level

Charles Comstock21:04:51

My workaround for the image issue was just to resize the image itself, didn't really dive into trying to adjust width/height, but I am curious how to do that for future endeavors. In other news, grabbing a video link from github after dragging a file into an issue and then inserting it into a clerk slideshow with:

(clerk/html
 [:video {:controls true :src ""}
  [:p "alternate label"]])
Worked great for embedding videos in a presentation. I was lazy so I didn't create a video viewer but I probably should have. Onestyling issue I noticed was I tried to use clerk/col for two side by side markdown blobs, I had to use clerk/md for each, and for one of them it was cranky about including a nested itemized list in markdown syntax. Not sure if that was a problem in my syntax or an issue with the markdown processor, I worked around it. I was also using triple guarded markdown code blocks to format EDN as they looked better than letting it pass through. I only just now realized I should have been using a clerk/code` block. Not sure if that was a documentation issue or it just didn't occur to me until now. I did create too many slides than could fit in the zoomed out view and it disables scrolling but it worked out alright. It was a little odd to have all the slides so left-aligned by default, I think for future I will investigate how to override that styling a bit, but otherwise it worked great! Thanks so much, overall it was great for a simple presentation out of code. I might experiment in the future to see if it's possible generate the slides programmatically instead of delimited by ---. It might be a neat way to generate a short slide by slide animation. Something to consider anyway.

genekim00:05:22

I had this same problem of forcing resizing of a ImageIO / java.awt.image.BufferedImage, @dgtized — here’s how I forced the image into a div , shrinking it until it fit. (I needed to do this because I had to show an iPhone screenshot, that had a huge height/width ratio.)

(clerk/html
  [:div.flex.flex-col.items-center.not-prose.max-h-200.overflow-hidden.w-40.overflow-x-hidden
    (clerk/image
      "resources/test-images/homescreen.jpeg")])
(I know I have some extraneous Tailwind CSS in there — I kept hacking at it until it fit.) Posting it here, for the next time I need it. 😉

Fredrik Meyer10:05:18

I did something similar for a presentation, used the occasion to rabbit hole into the java.awt.image API:

(let [img (ImageIO/read (io/as-file "sphere_eksempel.jpg"))
      new-size 400
      resized (new BufferedImage new-size new-size BufferedImage/TRANSLUCENT)]
  (doto (.createGraphics resized)
    (.setRenderingHint RenderingHints/KEY_INTERPOLATION RenderingHints/VALUE_INTERPOLATION_BILINEAR)
    (.drawImage img 0 0 new-size new-size nil)
    (.dispose))
  resized)

genekim00:05:22

I had this same problem of forcing resizing of a ImageIO / java.awt.image.BufferedImage, @dgtized — here’s how I forced the image into a div , shrinking it until it fit. (I needed to do this because I had to show an iPhone screenshot, that had a huge height/width ratio.)

(clerk/html
  [:div.flex.flex-col.items-center.not-prose.max-h-200.overflow-hidden.w-40.overflow-x-hidden
    (clerk/image
      "resources/test-images/homescreen.jpeg")])
(I know I have some extraneous Tailwind CSS in there — I kept hacking at it until it fit.) Posting it here, for the next time I need it. 😉