diff --git a/example/_src/posts/2013-06-19-a-scribble-post.scrbl b/example/_src/posts/2013-06-19-a-scribble-post.scrbl index 0b908cfe..84440945 100644 --- a/example/_src/posts/2013-06-19-a-scribble-post.scrbl +++ b/example/_src/posts/2013-06-19-a-scribble-post.scrbl @@ -99,3 +99,9 @@ Here's a fancier one: (standard-fish 30 30 #:color "red" #:direction 'right) (standard-fish 25 20 #:color "blue" #:direction 'left))) ] + +@subsection[#:style 'unnumbered]{B SubSection} + +A responsive big black image: + +@image["img/800px-image.gif" #:style "img-responsive"] \ No newline at end of file diff --git a/frog/enhance-body.rkt b/frog/enhance-body.rkt index a6fd79c6..6c8ec1b2 100644 --- a/frog/enhance-body.rkt +++ b/frog/enhance-body.rkt @@ -32,17 +32,19 @@ (define responsive-images (let ([magick-notice-displayed? #f]) (λ (xs) + (define (remote-host url) + (url-host (string->url url))) (define (do-it xs) (for/list ([x xs]) (match x [`(div ([class ,classes]) - (img ([src ,url] ,attrs ...)) + (img ,(list-no-order `[src ,url] attrs ...)) ,content ...) #:when (and (regexp-match #px"\\bfigure\\b" classes) - (not (url-host (string->url url)))) + (not (remote-host url))) (let ([sizes-attr (assq 'sizes attrs)]) `(div ([class ,classes]) - (img ([class "img-responsive"] ; Bootstrap class + (img ([class "img-responsive"] ; Add Bootstrap class ,@(make-responsive url (cond [sizes-attr => second] [#t #f])) ,@(if sizes-attr @@ -50,6 +52,13 @@ attrs))) ,@content)) ] + ;; xexpr-map? + [`(p () (img ,(list-no-order `[src ,url] `[class ,classes] attrs ...))) + #:when (and (regexp-match #px"\\bimg-responsive\\b" classes) + (not (remote-host url))) + `(p () (img ([class ,classes] + ,@(make-responsive url #f) ; TODO honor custom sizes? + ,@attrs)))] [x x]))) (cond [(current-responsive-images?) (if magick-available? @@ -86,6 +95,18 @@ [src "/img/1x1.gif"] [srcset "/img/1x1.gif 2w"] [sizes "some-custom-size-spec"]))))) + (test-equal? "Img with img-responsive class inside p tag" + (responsive-images + '((p () (img ([src "/img/1x1.gif"] + [alt ""] + [class "img-responsive among-others"] + [foo-attr "bar"]))))) + '((p () (img ([class "img-responsive among-others"] + [src "/img/1x1.gif"] + [srcset "/img/1x1.gif 2w"] + [sizes "(max-width: 2px) 100vw, 2px"] + [alt ""] + [foo-attr "bar"]))))) (test-equal? "Image bigger than maximum size" (responsive-images '((div ([class "figure pull-right"])