octopress-image-caption-tag 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3e0e82cc1e3553a1963087be8c9884afc093561c
-  data.tar.gz: c1c41ecad9c622e63a3b81d987932b5b4aed5796
+  metadata.gz: 881fc86da2b6e9eea5d48c5df0cc6a449faa43ee
+  data.tar.gz: 2fcb19fc4fbb72de99af758e5f3d2f377176b153
 SHA512:
-  metadata.gz: fe5368e095b007307479aa1723b552ee2de8e5d345925041648e1fe35880c0b35efd07e864e7b23ce964ada72b2c51f3ae2881bfc110b2fbb93689a6b6c801c8
-  data.tar.gz: 7e8b5adfc78a6a995b678aa7c2f5d4e2a0ac62523104cdc0e0ecaf84ad065fca0728e9fa1ec95b60edfff7b7c03a1fc20fb0d576581db206c80df07a2eb6f7d9
+  metadata.gz: 4879a1467bc1f3d68fab416dfd5f213f3e7388bdc87e110c15c7d617af55ab6ae1950107b31a51df9910b457ae52042ba1ba319e1af94aa556828d463b8dbb9f
+  data.tar.gz: 5f864d36fde29c79833eff40aa95d27b1dcb0639d6bee7766aea7f379f3dbd97ffa8d1f57b58a16e1f27cd8fddaf6470d70a94d1c61eb7d35719a95445347d97

data/README.md

@@ -6,7 +6,7 @@ and wraps it all up in a gem.
 
 ## Using the Tag version
 ```liquid
-{% imgcap [right|left|center] url_or_path 200 200 ["Some Title Text" ["Some alt text"]] %}
+{% imgcap [right|left|center] [custom classes] url_or_path 200 200 ["Some Title Text" ["Some alt text"]] %}
 ```
 Width and height can be either absolute or as a percentage. By default, width is
 set to 33% for right and left aligned and 100% for centered images, and height
@@ -17,7 +17,7 @@ for the caption.
 
 ## Using the Block version
 ```liquid
-{% imgcaption [right|left|center] url_or_path 200 200 ["Some Title Text" ["Some alt text"]] %}
+{% imgcaption [right|left|center] [custom classes] url_or_path 200 200 ["Some Title Text" ["Some alt text"]] %}
 **Any** standard [Markdown][md] text can be used in captions using the block
 version.
 {% endimgcaption %}
@@ -27,9 +27,11 @@ the title text for the caption, a block is taken to allow Markdown formatting
 in the caption text.
 
 ## Output
-The output for either version is the same, and of the form:
+The output for either version is the same, except that CAPTION in the version
+form as wrapped in a <p> and contains markup. If absolute sizes are used, the
+`.image-caption-absolute` class is added to the enclosing figure.
 ```html
-<figure class='caption-wrapper right|left|center' style='width:WIDTH'>
+<figure class='image-caption [image-caption-absolute] right|left|center [custom classes]'>
   <a class='image-popup' href='IMGSRC'>
     <img class='caption' src='IMGSRC' width='100%' title='TITLE' alt='ALT'>
   </a>
@@ -38,10 +40,52 @@ The output for either version is the same, and of the form:
 ```
 
 ## Styling
-This gem does not include stylesheets for the image captions. [Robert
-Anderson's][zerosharp] original blog post includes a nice example of how to
-style them.
-
+This gem does not include stylesheets for the image captions. A basic sample
+stylesheet is shown below that can be adapted to your site. As of version 
+0.0.6 inline widths were removed from the enclosing figure to allow for
+better responsive design.
+```scss
+figure.image-caption {
+  // Sizing only done on larger tablets and larger
+  @media only screen and (min-width: 480px) {
+    &.right {
+      float: right;
+      width: 33%;
+    }
+    &.left {
+      float: left;
+      width: 33%;
+    }
+    &.center {
+      margin: 0 auto;
+    }
+    // Example of custom class
+    &.half {
+      width: 50%;
+    }
+    &.image-caption-absolute {
+      width:unset;
+    }
+  }
+  // Center image within the figure
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+  // Image should fill space given when not specifically sized
+  &:not(.image-caption-absolute) {
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  figcaption {
+    text-align: center;
+    font-style: italic;
+    font-size: 0.75em;
+  }
+}
+```
 
 [md]: https://daringfireball.net/projects/markdown/
 [img]: https://github.com/octopress/image-tag

data/lib/octopress-image-caption-tag.rb

@@ -35,11 +35,11 @@ module Octopress
 
         def absolute_sized_figure
           <<-EOS.gsub(/^ {10}/, '') # gsubm is to pretty up source by indenting
-          <figure class='caption-wrapper #{@class.rstrip}'>
+          <figure class='image-caption image-caption-absolute #{@class.rstrip}'>
             <a class='image-popup' href='#{@img}'>
               <img class='caption' src='#{@img}' width='#{@width}' height='#{@height}' title='#{@title}' alt='#{@alt}'>
             </a>
-            <figcaption class='caption-text' style='width:#{@width.to_i - 10}px;'>
+            <figcaption class='caption-text'>
               #{@caption}
             </figcaption>
           </figure>
@@ -48,7 +48,7 @@ module Octopress
 
         def relative_sized_figure
           <<-EOS.gsub(/^ {10}/, '') # gsubm is to pretty up source by indenting
-          <figure class='caption-wrapper #{@class.rstrip}' style='width:#{@width};'>
+          <figure class='image-caption #{@class.rstrip}'>
             <a class='image-popup' href='#{@img}'>
               <img class='caption' src='#{@img}' width='100%' height='100%' title='#{@title}' alt='#{@alt}'>
             </a>

data/lib/octopress-image-caption-tag/version.rb

@@ -1,7 +1,7 @@
 module Octopress
   module Tags
     module ImageCaptionTag
-      VERSION = '0.0.5'
+      VERSION = '0.0.6'
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: octopress-image-caption-tag
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Charles Beynon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-04-17 00:00:00.000000000 Z
+date: 2016-05-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll