Skip to content

Commit 3d3cc2f

Browse files
committed
Add rudimentary responsive support for Scribble images
Make image responsive if image has img-responsive class, like so: @image["img/some-image.gif" #:style "img-responsive"]
1 parent 9e21bca commit 3d3cc2f

2 files changed

Lines changed: 30 additions & 3 deletions

File tree

example/_src/posts/2013-06-19-a-scribble-post.scrbl

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,9 @@ Here's a fancier one:
9999
(standard-fish 30 30 #:color "red" #:direction 'right)
100100
(standard-fish 25 20 #:color "blue" #:direction 'left)))
101101
]
102+
103+
@subsection[#:style 'unnumbered]{B SubSection}
104+
105+
A responsive big black image:
106+
107+
@image["img/800px-image.gif" #:style "img-responsive"]

frog/enhance-body.rkt

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,33 @@
3232
(define responsive-images
3333
(let ([magick-notice-displayed? #f])
3434
(λ (xs)
35+
(define (remote-host url)
36+
(url-host (string->url url)))
3537
(define (do-it xs)
3638
(for/list ([x xs])
3739
(match x
3840
[`(div ([class ,classes])
39-
(img ([src ,url] ,attrs ...))
41+
(img ,(list-no-order `[src ,url] attrs ...))
4042
,content ...)
4143
#:when (and (regexp-match #px"\\bfigure\\b" classes)
42-
(not (url-host (string->url url))))
44+
(not (remote-host url)))
4345
(let ([sizes-attr (assq 'sizes attrs)])
4446
`(div ([class ,classes])
45-
(img ([class "img-responsive"] ; Bootstrap class
47+
(img ([class "img-responsive"] ; Add Bootstrap class
4648
,@(make-responsive url (cond [sizes-attr => second]
4749
[#t #f]))
4850
,@(if sizes-attr
4951
(remove sizes-attr attrs)
5052
attrs)))
5153
,@content))
5254
]
55+
;; xexpr-map?
56+
[`(p () (img ,(list-no-order `[src ,url] `[class ,classes] attrs ...)))
57+
#:when (and (regexp-match #px"\\bimg-responsive\\b" classes)
58+
(not (remote-host url)))
59+
`(p () (img ([class ,classes]
60+
,@(make-responsive url #f) ; TODO honor custom sizes?
61+
,@attrs)))]
5362
[x x])))
5463
(cond [(current-responsive-images?)
5564
(if magick-available?
@@ -86,6 +95,18 @@
8695
[src "/img/1x1.gif"]
8796
[srcset "/img/1x1.gif 2w"]
8897
[sizes "some-custom-size-spec"])))))
98+
(test-equal? "Img with img-responsive class inside p tag"
99+
(responsive-images
100+
'((p () (img ([src "/img/1x1.gif"]
101+
[alt ""]
102+
[class "img-responsive among-others"]
103+
[foo-attr "bar"])))))
104+
'((p () (img ([class "img-responsive among-others"]
105+
[src "/img/1x1.gif"]
106+
[srcset "/img/1x1.gif 2w"]
107+
[sizes "(max-width: 2px) 100vw, 2px"]
108+
[alt ""]
109+
[foo-attr "bar"])))))
89110
(test-equal? "Image bigger than maximum size"
90111
(responsive-images
91112
'((div ([class "figure pull-right"])

0 commit comments

Comments
 (0)