Jekyll's streamlined functionality for handling data rows automatically

I am looking to filter out pages with the YAML frontmatter type 'project' from site.pages.

My approach so far is as follows:

{% sorted_for page in site.pages sort_by:title %}                       
{% if page.type == 'project' %}
do something
{% endif %}
{% endfor %}

This method utilizes the sorted_for plugin. Now, I want to organize these filtered pages into CSS rows of four.

<div class="row">
<div class="span3">{{ page1.title }}</div>
<div class="span3">{{ page2.title }}</div>
<div class="span3">{{ page3.title }}</div>
<div class="span3">{{ pagen.title }}</div>
</div>
...

However, the challenge lies in correctly accessing the information needed for this layout. The iterator number in the for loop may not align perfectly since it will also include non-project pages. Is there a more elegant solution to handle this issue?

Answer №1

Important Note:
I encountered difficulties while trying to use the sorted_for plugin on my local machine, so I decided to proceed with testing my solution using a standard for loop instead.

Step 1

If you are unable to utilize forloop.index due to filtering out certain pages, you will need to manually count the loops by assigning values to a variable using assign.

The code provided below lists your pages with an accurate loop iterator (counting only the pages that are actually listed):

{% assign loopindex = 0 %}
{% for page in site.pages %}                       
  {% if page.type == 'project' %}
    {% assign loopindex = loopindex | plus: 1 %}
    <div class="span3">{{ loopindex }} {{ page.title }}</div>
  {% endif %}
{% endfor %}

Step 2

You must display <div class="row"> at the start of every first row and </div> at the end of every fourth row.

To determine the first and fourth rows, you can make use of the modulo function:

{% assign loopindex = 0 %}
{% for page in site.pages %}                       
  {% if page.type == 'project' %}
    {% assign loopindex = loopindex | plus: 1 %}
    {% assign rowfinder = loopindex | modulo: 4 %}
    <div class="span3">{{ loopindex }} {{ rowfinder }} {{ page.title }}</div>
  {% endif %}
{% endfor %}

rowfinder will cycle through the sequence 1, 2, 3, 0.

Step 3:

Show <div class="row"> when rowfinder is 1, and </div> when rowfinder is 0:

{% assign loopindex = 0 %}
{% for page in site.pages %}                       
  {% if page.type == 'project' %}
    {% assign loopindex = loopindex | plus: 1 %}
    {% assign rowfinder = loopindex | modulo: 4 %}
    {% if rowfinder == 1 %}
      <div class="row">
      <div class="span3">{{ page.title }}</div>
    {% elsif rowfinder == 0 %}
      <div class="span3">{{ page.title }}</div>
      </div>
    {% else %}
      <div class="span3">{{ page.title }}</div>
    {% endif %}
  {% endif %}
{% endfor %}

Step 4:

One final detail remains: when the total number of pages is not a multiple of 4, there will be a missing </div> at the end.

If the number of pages is divisible by 4, the last value of rowfinder will be 0.
Therefore, you simply need to display the closing </div> when the value of rowfinder is anything other than 0.
Add this line after the for loop to address this issue:

{% if rowfinder != 0 %}
      </div>
{% endif %}

...and that concludes the process!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine the percentage of one color in relation to another color using AngularJS

I'm trying to make a div element change color based on another div element's color. For example: <div style="background-color:{{main_color}};"> In a separate div, the color should be 70% lighter than the main color. <div style="backg ...

What is the best way to position a <label> to the left of an <input> field?

Examining the HTML and CSS code below: * { box-sizing: border-box; } .field { overflow: auto; } .field label { float: left; width: 80px; } .field input { display: block; width: 100%; } <div class="field"> <label>Test< ...

Floating Ship Animation Using CSS3

I am currently working on creating a floating animation effect. The concept involves having the element swing with an axis at its lower part, similar to the image provided below: My challenge lies in figuring out how to coordinate the two movements and en ...

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

What steps can be taken to stop Internet Explorer from interfering with a hover trigger on a child element?

I'm encountering an issue with my HTML and CSS code that seems to work perfectly in all browsers except for IE10 and below. The problem arises on a user profile page where there is a profile picture (avatar). When hovering over the avatar, the CSS tr ...

Style of markup replacement in PCRE

Looking for a PCRE expression (regex) to identify and update a specific attribute and value linked to a particular markup element. Here's an example: <div style="width:200px;"></div> The goal is to change it to: <div style="width:100 ...

Disable password styling in Angular by changing the type attribute to "none."

I'm curious about something, I want to add a checkbox in my application that can toggle the visibility of the password input field. HTML <input type="text" ng-model="data.username" placeholder="username" value="username" class="form-control" popo ...

Switching up the size of individual components in the Bootstrap grid system: The ultimate guide

Is it possible to adjust the width of specific elements in Bootstrap's grid system without affecting the default customization? Here is an example of what I am referring to: For example, I would like to make col-xs-1 smaller as seen in the top row ( ...

Tips for positioning div elements in Bootstrap 4 with consistent spacing

Is there a way to align these 3 divs with more margin? I attempted using col-3, but it didn't have the desired effect. I want the first div on the left, the second in the center, and the third on the right. I tried incorporating CSS for margin, but i ...

Arrange Bootstrap Grid by column for smaller screens

I have a unique setup in my Bootstrap grid, featuring 2 rows and 3 columns. On desktop, it displays like this: |A|B|C| |D|E|F| However, the mobile view changes to: |A| |B| |C| |D| |E| |F| My goal is for it to appear as follows on mobile: |A| |D| |B| |E ...

The side modal features a full-height design with headers, bodies, and footers that are

I have created a side modal that extends to full height. The content in the modal body is quite lengthy, but I am facing an issue where the header, body, and footer are not equal in size. I am considering using scrollspy on the HTML body tag to potentially ...

After invoking an ajax request to retrieve the modal's element and appending it to a div, the Bootstrap modal fails to display

I am attempting to use $.ajax to retrieve the HTML text of my bootstrap modal. Here is an example of what I have tried: $.ajax({ url: ..., success: function(data){ $("#modal_div").html(data.html); $("#myModal").mo ...

"Utilize input within the div element to occupy the entire cell of the

There is a form input enclosed within a div which is nested inside a table cell. <td align="left" id="subformAttachments_Htmltable1td10" style="border:solid 1px black;width:316px;" class="tbldroppable ui-droppable ...

Javascript Challenges in Wordpress

Looking to create an element on a Wordpress site where content starts partway down the screen and then sticks to the top while scrolling. I've tried different approaches without success. My latest attempt involves using Javascript to add and remove a ...

When the flexbox is nested in a container with a flex-direction of column, the scrolling

I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's hei ...

positioning three background images in the same place

I have three images img1.png, img2.png, img3.png with heights 600px,400px and 200px respectively. My goal is to position these images in a specific order: img1.png in the back, img2.png in the middle, and img3.png in the front. I attempted to use CSS posit ...

Place a radio button on top of a div once the available space is depleted

Is there a way to make these radiobuttons hover over the topchoice and bottomchoice divs? I may need to adjust the width of choicefirstleft and choicesecondleft, potentially making it 100%. However, when the width approaches 100%, the radiobutton shifts do ...

Tips for selecting specific regions on an Angular SVG map

For my Angular TypeScript project, I included a map. Does anyone know how to create a select region on the map? Click here for StackBlitz Here is the jsFiddle code link CSS styles here p { font-size: 12px; } #core { fill: #ff4f81; animatio ...

CSS3 divs scattered everywhere

I am really struggling with this CSS3 code: * { margin: 0px; padding: 0px; border: none; } body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), co ...

Click to enlarge font size across the entire project

I'm working on a project for elderly users and my client wants a feature where they can easily adjust the font size throughout the application with just one click of a button. What is the best approach for implementing this functionality? My initial ...