2

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?

user1026169
  • 5,345
  • 5
  • 21
  • 35

1 Answers1

5

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>

)

huon
  • 94,605
  • 21
  • 231
  • 225
  • thanks, thats a great solution! is this becuase liquid is the templating language? would it be possible to do this without YAML head matter if i was using a different templating languge? – user1026169 Mar 25 '12 at 03:01
  • 1
    @user1026169, the syntax of the for loop and the fact that the header is in YAML is because Liquid is the templating language. The header contains the information about the page, so even in some other templating language there would still need to be some metadata containing that information. – huon Mar 25 '12 at 03:06
  • yeah, that makes perfect sense. one last question: if i was using a different static website generator, template engine, and even layout languate - would it then be possible to do this without relying on metadata? – user1026169 Mar 25 '12 at 03:11
  • 1
    @user1026169, you need some way of telling the generator what pictures/captions/etc to use in the gallery, and what template to use for each page, so no, you'll always need metadata unless you're typing each page out in its entirety. (also, I've expanded on my last remark in the answer, just in case you hadn't noticed.) – huon Mar 25 '12 at 03:15
  • thanks, i upvoted all your answers. that cleared up a ton of misconceptions that were holding me back. i had been doing many pages in their entirety unnecessarily. – user1026169 Mar 25 '12 at 03:21