Add Bootstrap img-responsive class

Will scale images to 100% width on mobile
greghendershott · Nov 12, 2016 · 9e21bca · 9e21bca
1 parent 3a20ca8
commit 9e21bca
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/frog/enhance-body.rkt b/frog/enhance-body.rkt
@@ -35,14 +35,15 @@
       (define (do-it xs)
         (for/list ([x xs])
           (match x
-            [`(div ((class ,classes))
-                   (img ((src ,url) ,attrs ...))
+            [`(div ([class ,classes])
+                   (img ([src ,url] ,attrs ...))
                    ,content ...)
              #:when (and (regexp-match #px"\\bfigure\\b" classes)
                          (not (url-host (string->url url))))
              (let ([sizes-attr (assq 'sizes attrs)])
                `(div ([class ,classes])
-                     (img (,@(make-responsive url (cond [sizes-attr => second]
+                     (img ([class "img-responsive"] ; Bootstrap class
+                           ,@(make-responsive url (cond [sizes-attr => second]
                                                         [#t #f]))
                            ,@(if sizes-attr
                                  (remove sizes-attr attrs)
@@ -77,26 +78,28 @@
     (when magick-available?
       (test-equal? "Element-specific custom sizes attribute"
                    (responsive-images
-                    '((div ((class "figure"))
-                           (img ((src "/img/1x1.gif")
-                                 (sizes "some-custom-size-spec"))))))
+                    '((div ([class "figure"])
+                           (img ([src "/img/1x1.gif"]
+                                 [sizes "some-custom-size-spec"])))))
                    '((div ((class "figure"))
-                          (img ((src "/img/1x1.gif")
-                                (srcset "/img/1x1.gif 2w")
-                                (sizes "some-custom-size-spec"))))))
+                          (img ([class "img-responsive"]
+                                [src "/img/1x1.gif"]
+                                [srcset "/img/1x1.gif 2w"]
+                                [sizes "some-custom-size-spec"])))))
       (test-equal? "Image bigger than maximum size"
                    (responsive-images
-                    '((div ((class "figure pull-right"))
-                           (img ((src "/img/1300px-image.gif") (alt "")))
-                           (p ((class "caption")) "some text"))))
+                    '((div ([class "figure pull-right"])
+                           (img ([src "/img/1300px-image.gif"] (alt "")))
+                           (p ([class "caption"]) "some text"))))
                    `((div ((class "figure pull-right"))
-                          (img ((src "/img/resized/600/1300px-image.gif")
-                                (srcset
+                          (img ([class "img-responsive"]
+                                [src "/img/resized/600/1300px-image.gif"]
+                                [srcset
                                  ,(string-join
                                    (for/list ([s (current-image-sizes)])
                                      (format "/img/resized/~a/1300px-image.gif ~aw" s s))
-                                   ", "))
-                                (sizes "(max-width: 1300px) 100vw, 1300px")
+                                   ", ")]
+                                [sizes "(max-width: 1300px) 100vw, 1300px"]
                                 (alt "")))
                           (p ((class "caption")) "some text"))))
       (test-equal? "Image smaller than biggest size but bigger than smallest size"
@@ -105,7 +108,8 @@
                            (img ((src "/img/800px-image.gif") (alt "")))
                            (p ((class "caption")) "some text"))))
                    `((div ((class "figure"))
-                          (img ((src ,(format "/img/resized/~a/800px-image.gif"
+                          (img ([class "img-responsive"]
+                                (src ,(format "/img/resized/~a/800px-image.gif"
                                               (current-image-default-size)))
                                 (srcset
                                  ,(string-append
@@ -123,7 +127,8 @@
                            (img ((src "/img/600px-image.gif") (alt "")))
                            (p ((class "caption")) "some text"))))
                    '((div ((class "figure"))
-                          (img ((src "/img/600px-image.gif")
+                          (img ([class "img-responsive"]
+                                (src "/img/600px-image.gif")
                                 (srcset "/img/resized/320/600px-image.gif 320w, /img/600px-image.gif 600w")
                                 (sizes "(max-width: 600px) 100vw, 600px")
                                 (alt "")))
@@ -134,7 +139,8 @@
                            (img ((src "/img/1x1.gif") (alt ""))) ; Tiny image
                            (p ((class "caption")) "some text"))))
                    '((div ((class "figure"))
-                          (img ((src "/img/1x1.gif")
+                          (img ([class "img-responsive"]
+                                (src "/img/1x1.gif")
                                 (srcset "/img/1x1.gif 2w")
                                 (sizes "(max-width: 2px) 100vw, 2px")
                                 (alt "")))
@@ -250,6 +256,7 @@
                                  "&hide_thread=true"))))
          (define js (call/input-url oembed-url get-pure-port read-json))
          (define html ('html js))
+
          (cond [html (~>> (with-input-from-string html read-html-as-xexprs)
                           (append '(div ([class "embed-tweet"]))))]
                [else x])]