Advice on DRY with Jekyll

Help
1

Hi all -
In my Jekyll site, I have a product grid. I’d like the product grid to appear with different products in different places on my site, but I want to only store the HTML for the grid in one place.

I’ve looked into collections (and I’m using collections for something else in my project), but collections don’t seem to be the right tool. The product grids aren’t really semantically a “group” of anything.

Is there any other way I can avoid copying the product grid HTML into multiple places?

Note: I’m new to Jekyll.

Thanks,
Scott

2

when you use the product grid, how are you generating it? with a for statement? for example are the products collection items or data items? or are you hand coding the whole thing?

I am not sure I have any help as for not duplicating the html, but I do find it very helpful to make the products either collection items or data items (or even just pages with some specific front matter) and then the html to display the grid is a for loop that can be pretty simple.

I also do this with FAQ type things - keep them in a data file and then the html is a simple for loop, and that makes it very easy to add/delete/edit an item as well as edit the html for the grid.

I could almost envision a way that you could have the for loop that generates the grid be in an include, and then you could pass in the data file name as an include parameter that populates into the liquid code (if that makes sense) but I have a feeling you won’t be able to do that inside the liquid code but not sure.

1 Like
3

I will think look into making the products into data items and then using a for loop, that will simplify things greatly. Thanks for the ideas :slight_smile:

4

You should use an ‘include’ for this. This is the easiest way. I think that using a ‘layout’ with a ‘collection’ would be a more beautiful solution.

{% include productgrid.html %}

Note that you should put the ‘productgrid.html’ file in an ‘_includes’ directory.

More info can be found here: http://jekyllrb.com/docs/includes/ or in this walkthrough: http://jekyllcodex.org/getting-started/