0

I am creating a website gallery. There is such a structure:

my site
  artworks
    caty1
    caty2

It is necessary to display the photos in page of a given category (caty2 or caty1) by creation date.
Actually, how to realize using Jekyll and Liqiud?
Or is there a more appropriate structure for this?

wokalek
  • 192
  • 2
  • 10

1 Answers1

1

with liquid you can filter/sort an array but any of its elements attribute that you want.

in your case you need to create datafile (in yml, csv or json) representing a collection of photos, and each photo should have a date attribute (along with a name, src, ...).

then in the layout that generate a caty page you'll have some thing like:

{% assign sorted-photos = site.data.photos | sort: 'date' %}
<ul> <!-- list of sorted photos -->
{% for photo in photos %}
  <li> <img src={{photo.src}} alt={{photo.name}}></li>
{% endfor %}
</ul>

the photos collection would be a photos.yml file located in _data directory with a structure similar to:

- src = assets/img/p1.jpg
  date = 10-01-2017
  name = cute cat
  category = cats  # if you need to filter by category ?   

- src = assets/img/p2.jpg
  date = 12-01-2017
  name = grumpy cat-2
  category = cats 

- src = assets/img/p3.jpg
  date = 10-11-2016
  name = cool dog
  category = dogs
yaitloutou
  • 1,691
  • 19
  • 23
  • Thanks a lot! But can you please add to answer, how can I create a collection of photos with Jekyll in `_config.yml` in my example? – wokalek Jan 16 '17 at 20:34
  • if you're familiar with json, you can consider each element (starting with an important `-` ) as an obeject, and the whole file as a document. each object has key/values peer. – yaitloutou Jan 16 '17 at 20:46
  • Thank you! This is a solution... But сan't I just have a folder with pictures and display all by date in a simple cycle? It seems, I must set each picture as a parameter in `photos.yml`, not too comfortable? – wokalek Jan 16 '17 at 20:52
  • you can, but you'll need to have access to the `date` attribute of the file, and be able to use it to filter the photos, and i suppose that you'd like to have more control over which photo displayed in which category, hence the additional attribute. – yaitloutou Jan 16 '17 at 20:55
  • the other solution require that you create a [ruby plugin](https://jekyllrb.com/docs/plugins/#generators), to filter the photo directly from the folder and include them in the template the way you want.. – yaitloutou Jan 16 '17 at 20:58
  • I use gulp instead... May be in this I can resolve this. – wokalek Jan 16 '17 at 21:00
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133300/discussion-between-yaitloutou-and-vostoksisters). – yaitloutou Jan 16 '17 at 21:04