sorting front matter from markdown file - ruby

Question

i'm fairly new to jekyll, but i'm really loving the things you're able to do with it, and the speed for deployment.
so, my site is managed with siteleaf and deployed to github pages. right now, i'm working to build out pages to showcase my past projects, and i need to be able to create dynamic content- have the ability to add multiple meta fields with the same names i.e. multiple fields called center_image or text_block that i can display based on their sort order in the admin panel/markdown file that is creating the page. here's the code i've written so far, it's currently showing the content correctly, but it doesn't allow me to 1. have multiple iterations of the same meta field or 2. sort the content dynamically.
{% for photo in page.project_content.full_width_image %}
<div class="fullwidth-image content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for photo in page.project_content.center_image %}
<div class="center-image content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for photo in page.project_content.split_left_image %}
<div class="split-image-left content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for photo in page.project_content.split_right_image %}
<div class="split-image-right content-block">
<img src="{{ photo }}">
</div>
{% endfor %}
{% for content in page.project_content.text_content %}
<div class="text-block content-block">
{{ content | markdownify }}
</div>
{% endfor %}
so, to sum up, i need to be able to sort this content and also include multiple iterations of the same content type. does anyone have any ideas?
thanks!
jesse

Answer 1

after contacting support, here's what i found.
first, i needed to change the YAML front matter from being key fields to object fields. this creates an array of content, like so
project_content:
- type: full-width-image
image: "/uploads/hero.jpg"
- type: text
body: This is another test content block.
- type: text
body: text two.
then, my markup is like so...
{% for block in project.content %}
{% case block.type %}
{% when 'full_width_image' %}
<img src="{{ block.image }}">
{% when 'text' %}
{{ block.text | markdownify }}
{% endcase %}
{% endfor %}
and my output becomes:
<div class="full-width-image content-block">
<img src="/uploads/hero.jpg">
</div>
<div class="text content-block">
<p>This is another test content block.</p>
</div>
<div class="text content-block">
<p>text two.</p>
</div>
this is exactly what i needed to do, and i can change the sort order of the items in my siteleaf admin!