Octopress中的圖片標題

我想給圖片加上標題，然後在這裏找到了答案，我把Ted Kulp的靈活解決方法整理了一下。

如下markdown

{% imgcap http://some.url.com/pic.jpg Leonhard Euler %} 

運行結果爲：

也可以像img命令一樣使用left和right.

譯註：圖片位於blog文字內容的左邊或者右邊(在命令後面加入 left或者right)。如下：

{% imgcap left http://some.url.com/pic.jpg Leonhard Euler %} 

具體變化

首先，在plugins子文件夾下創建image_caption_tag.rb插件。

plugins/image_caption_tag.rb :

# Title: Image tag with caption for Jekyll
# Description: Easily output images with captions

module Jekyll

  class CaptionImageTag < Liquid::Tag
    @img = nil
    @title = nil
    @class = ''
    @width = ''
    @height = ''

    def initialize(tag_name, markup, tokens)
      if markup =~ /(\S.*\s+)?(https?:\/\/|\/)(\S+)(\s+\d+\s+\d+)?(\s+.+)?/i
        @class = $1 || ''
        @img = $2 + $3
        if $5
          @title = $5.strip
        end
        if $4 =~ /\s*(\d+)\s+(\d+)/
          @width = $1
          @height = $2
        end
      end
      super
    end

    def render(context)
      output = super
      if @img
        "<span class='#{('caption-wrapper ' + @class).rstrip}'>" +
          "<img class='caption' src='#{@img}' width='#{@width}' height='#{@height}' title='#{@title}'>" +
          "<span class='caption-text'>#{@title}</span>" +
        "</span>"
      else
        "Error processing input, expected syntax: {% img [class name(s)] /url/to/image [width height] [title text] %}"
      end
    end
  end
end

Liquid::Template.register_tag('imgcap', Jekyll::CaptionImageTag)

然後，修改_utilities.scss文件。

sass/base/_utilities.scss ：

   border: $border;
 }

+@mixin reset-shadow-box() {
+  @include shadow-box(0px, 0px, 0px);
+}
+
 @mixin selection($bg, $color: inherit, $text-shadow: none){
   * {
     &::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; }

最後，將下列改變應用到_blog.scss文件。

sass/partials/_blog.scss ：

   article {
     font-size: 2.0em; font-style: italic;
     line-height: 1.3em;
   }
-  img, video, .flash-video {
+  img, video, .flash-video, .caption-wrapper {
     @extend .flex-content;
     @extend .basic-alignment;
     @include shadow-box;
+    &.caption {
+      @include reset-shadow-box;
+    }
+  }
+  .caption-wrapper {
+    display: inline-block;
+    margin-bottom: 10px;
+    .caption-text {
+      background: #fff;
+      text-align: center;
+      font-size: .8em;
+      color: #666;
+      display: block;
+    }
   }
   video, .flash-video { margin: 0 auto 1.5em; }
   video { display: block; width: 100%; }

重新生成你的Octopress網站，就可以開始用imgcap來代替img了。

譯註：修改後img和imgcap兩種方式都可以使用。要加標題，就用imgcap，不加則用img。

原文地址：http://blog.zerosharp.com/image-captions-for-octopress/