View alt tags in development mode

Author: scsmith

content/assets/stylesheets/docs_new.scss

@@ -221,6 +221,16 @@ a.search-result, a.search-result:hover {
     margin: 20px 0px;
     padding: 10px;
   }
+
+  .image-caption {
+    color: #666;
+    border: 1px solid $pre-border-color;
+    background-color: #f8f8f8;
+    margin-top: -20px;
+    margin-bottom: 0;
+    padding: 5px;
+    display: block;
+  }
 }
 
 #footer {

lib/common_marker_filter.rb

@@ -44,12 +44,20 @@ def code_block(node)
 
       def image(node)
         url = node.url.sub(%r{^/content}, '')
-        out('<img src="', escape_href(url), '"')
-        plain do
-          out(' alt="', :children, '"')
+
+        # Create a temporary renderer to get plain text of children
+        alt = ''
+        node.each do |child|
+          if child.type == :text
+            alt += child.string_content
+          end
         end
+
+        out('<img src="', escape_href(url), '"')
+        out(' alt="', escape_html(alt), '"')
         out(' title="', escape_html(node.title), '"') if node.title && !node.title.empty?
         out(" />")
+        out('<span class="image-caption">', escape_html(alt), '</span>') if ENV['NANOC_ENV'] == 'development'
       end
     end