This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-04-05
Channels
- # aleph (2)
- # announcements (3)
- # architecture (5)
- # beginners (51)
- # biff (5)
- # cider (1)
- # clerk (8)
- # clj-kondo (6)
- # cljsrn (5)
- # clojure (31)
- # clojure-europe (42)
- # clojure-nl (1)
- # clojure-norway (21)
- # clojure-uk (3)
- # emacs (11)
- # fulcro (2)
- # graphql (6)
- # hugsql (1)
- # jobs (2)
- # leiningen (3)
- # lsp (3)
- # malli (13)
- # missionary (1)
- # off-topic (7)
- # pathom (7)
- # polylith (27)
- # reagent (14)
- # reitit (3)
- # remote-jobs (7)
- # shadow-cljs (20)
- # spacemacs (4)
- # sql (3)
- # tools-build (4)
- # xtdb (7)
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?
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
right, but perhaps we should have an option for this or somehow make it work with ::clerk/css-class
on a higher level
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.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. 😉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)
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. 😉