I have gallery is based on my twitter bootstrap css files. I ended up using Kramdown with inline HTML+Markdown because I couldnt get it to work in Liquid the way I had hoped.
The markdown template parsed by Kramdown looks like this:
---
layout: gallery
title: Gallery
group: dropnavigation
root: .\
---
{% include root %}
{::options parse_block_html="true" /}
<li class="span3">
<div class="thumbnail">
[![image](http://placehold.it/260x180)](#)
#####Thumbnail label
Thumbnail caption right here...
</div>
</li>
<li class="span3">
<div class="thumbnail">
[![image](http://placehold.it/260x180)](#)
#####Thumbnail label
Thumbnail caption right here...
</div>
</li>
The gallery Layout looks like this:
---
layout: core
---
{% include root %}
<div class="page-header">
<h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1>
</div>
<ul class="thumbnails">
{{ content }}
</ul>
Is there a way to do this so that I only include The image tag and label, then it gets styled by the ul, li and div classes via the template? Perhaps by some kind of loop?
Yes. You can do it via a loop by defining a list that contains the information for each picture.
---
layout: gallery
title: Gallery
group: dropnavigation
root: .\
pictures:
- url: http://placehold.it/260x180
label: Label 1
caption: Caption 1
- url: http://placehold.it/260x180
label: Label 2
caption: Caption 2
- url: http://placehold.it/260x180
label: Label 3
caption: Caption 3
---
{% include root %}
{::options parse_block_html="true" /}
{% for pic in page.pictures %}
<li class="span3">
<div class="thumbnail">
[![image]({{ pic.url }})](#)
##### {{ pic.label }}
{{ pic.caption }}
</div>
</li>
{% endfor %}
(This could even by done by just having the YAML header with the list, and the loop and other processing done in the gallery layout, so that you only need to change the pictures
list to have multiple galleries (this would mean that the caption and labels would have to be written in HTML rather than markdown). EDIT: e.g. each gallery file is like so:
---
layout: gallery
title: Gallery
group: dropnavigation
root: .\
pictures:
- url: http://placehold.it/260x180
label: Label 1
caption: Caption 1
- url: http://placehold.it/260x180
label: Label 2
caption: Caption 2
- url: http://placehold.it/260x180
label: Label 3
caption: Caption 3
---
and the gallery template looks like:
---
layout: core
---
{% include root %}
<div class="page-header">
<h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1>
</div>
<ul class="thumbnails">
{% for pic in page.pictures %}
<li class="span3">
<div class="thumbnail">
<a href="#"><img src="{{ pic.url }}" alt="image" /></a>
<h5>{{ pic.label }}</h5>
<p>{{ pic.caption }}</p>
</div>
</li>
{% endfor %}
</ul>
)