First time posting, so thanks in advance for your time c:
I'm using Jekyll to serve a portfolio. I'm using a portfolio plugin as well as a JS library called Lightbox. I have the portfolio plugin working. The ideal action is that every time the user clicks a portfolio item, it executes the lightbox (that's working). In order to for more images to be stored in the lightbox, I must give them the same data-title name.
My understanding is that I need to nest a for-loop within my current loop, to check for all items within the array to return any additional lightbox items.
My .yml file reads like so:
title: Portfolio Title
description: A crazy portfolio item
bg-image: Test-01.png
lb-images:
- Test-01.png
- Test-02.png
- Test-03.png`
My .md file reads like so:
<div class="flex-container">
<!-- portfolio-item -->
{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
{% for project in projects reversed %}
<div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
<a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
<div id="overlay">
<span id="reveal-text">
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
<p>{{ project.category }}</p>
</span>
</div>
</a>
</div>
{% for project in projects %}
{% endfor %}
{% endfor %}
</div>
I assumed that the forloop.index would begin at [1] and then continue through that array until there are no more lb-images. But something's up. My guess is syntax or how I'm calling the data from the .yml file, or both.
Again thanks for your time.
Daniel
(edit: took out space in nested endfor loop, runs now but returns: href="../images/projects/] }}" and data-title and data-lightbox returns are for each data.project file instead of for each item in data.project.lb-images)
Correct loop to expose images for a project is:
{% assign projects = site.data.projects | get_projects_from_files | sort:'date' %}
<div class="flex-container">
{% for project in projects reversed %}
<!-- portfolio-item -->
<div class="flex-item" style="background-image: url(/img/projects/{{ project.bg-image }}); background-repeat: no-repeat">
<a href="../images/projects/{{ project.lb-images[0] }}" data-lightbox="{{ project.title }}" data-title="{{ project.bg-image }}">
<div id="overlay">
<span id="reveal-text">
<h3>{{ project.title }}</h3>
<p>{{ project.description }}</p>
<p>{{ project.category }}</p>
</span>
</div>
</a>
</div>
{% for img in project.lb-images %}
{% if forloop.first != true %}
{% endif %}
{% endfor %}
{% endfor %}
</div>
Liquid forloop documentation
Related
I have posts within my blog that have 2 categories: project, and then whatever the name of the project is (i.e. project1 and project2). I've built out a page to display all my projects, with a loop that looks like this:
<div class="container">
{% for post in site.categories.project %}
{% assign remainder = forloop.index | modulo: 3 %}
{% if remainder == 1 or forloop.first %}
<div class="row">
{% endif %}
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card" href="{{ site.baseurl }}{{ post.url }}">
<div class="m-2">
<h3>{{post.title}} {{post.categories[1]}}</h3>
{% if post.image %}
<img src="{{ post.image }}" />
{% endif %}
<p>{{post.projectInfo}}</p>
</div>
<div class="m-2 mt-auto">
{% if post.projectLink %}
Project Link |
{% endif %}
Blog Post
</div>
</div>
</div>
{% if remainder == 0 or forloop.last %}
</div>
{% endif %}
{% endfor %}
</div>
However, when I make an update to the project, I'd like to ONLY display the most recent post, and skip over all the others. I've tried assigning a variable thisProject, and then doing a limit: 1, but because I've grabbed each post already in the outermost for loop, it'll actually show multiple iterations of lastest post for the project that has multiple posts.
Any way I can better limit this?
I've built the following liquid for loop to retrieve & output data from a repeating advanced custom field in Shopify. The ACF namespace is faq, and contains heading and content data. My current loop is as follows:
<div class="feed-faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq %}
{% for item in faqs %}
{% assign i = forloop.index %}
<div class="item item--{{ i }}">
{{ heading[i] }}
{{ content[i] }}
</div>
{% endfor %}
{% endif %}
</div>
However, on the frontend, this loop returns the following:
<div class="feed-faqs">
<div class="item item--1">
</div>
<div class="item item--2">
</div>
</div>
Is what I'm trying to achieve (to output multiple values from a repeating ACF field) possible with this approach, and if so, where have I gone wrong in fetching the header & content data?
Worked it out, so leaving this answer for anyone else in the future:
<div class="feed--faqs">
{% if page.metafields.faq != blank %}
{% assign faqs = page.metafields.faq.heading %}
{% for value in faqs %}
{% assign i = forloop.index0 %}
<div class="item item--{{ i }}">
<h4>{{ page.metafields.faq.heading[i] }}</h4>
<p>{{ page.metafields.faq.content[i] }}</p>
</div>
{% endfor %}
{% endif %}
</div>
Metafield value type is set to 'Json String'.
For reference, I'm using the ArenaCommerce Advanceds Custom Fields app: https://apps.shopify.com/advanced-custom-field.
I am build a megamenu in Shopify that will show a mix of collection image, product images and a generic image for any other link that might be in there.
Currently the collection image displays fine and the generic image, but having some trouble getting the product image to display. My code for the mega menu is show below:
<ul class="megaMenu">
<div class="megaMenuWrapper">
{% for child_link in link.links %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}>
<a href= "{{ child_link.url }}">
{% if child_link.type == "collection_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% elsif child_link.type == "product_link" and child_link.object.image %}
<div class="menuImage" style="background-image: url('{{ child_link.object.image | img_url: '500x' }}')"></div>
{% else%}
<div class="menuImage" style="background-image: url('https://cdn.shopify.com/s/files/1/0924/5464/files/map_macarons_paris.jpg?1158498038497005180')"></div>
{% endif %}
<span>{{ child_link.title }}</span>
</a>
</li>
{% endfor %}
</div>
</ul>
Any ideas on what might be wrong are welcome.
Products doesn't have an image object, it has a featured_image or images.
So you should call {{ child_link.object.featured_image | img_url: '500x' }} instead.
The same applies for your if check where you check if the image is present.
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
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!
Im using Jekyll and liquid syntax and would like to add a custom background colour and thumbnail image for each of my projects on my homepage. How can I achieve this using YAML frontmatter?
liquid syntax outputting projects
{% for post in site.categories['project'] %}
<div class="project">
<h3 class="project__title">{{ post.title }}</h3>
<p class="project__description">{{ post.description }}</p>
<a class="project__link" href="{{ post.url}}">view project</a>
</div>
{% endfor %}
In your project posts add background and thumbnail variables
myprojectpage.html
---
front matter variables ...
background: #ffffff
thumbnail: images/myproject.jpg
---
You can then use them in your loop :
{% for post in site.categories['project'] %}
<div class="project" style="background:{{post.background}};">
<h3 class="project__title">{{ post.title }}</h3>
<img src="{{ site.baseurl }}/{{ post.thumbnail }}" alt="post.title">
<p class="project__description">{{ post.description }}</p>
<a class="project__link" href="{{ post.url}}">view project</a>
</div>
{% endfor %}
Another option can be to simply add a class to your post and manage style in your css/scss/less file.