Image grid layout

Hello, I’ve been trying to solve the issue of placing images in a grid like pattern so that each image can have it’s own URL link. I have tried and failed many times to do this programatically using various CSS and HTML techniques, the main issue being rendering the email correctly in Outlook…

This is basically what I’m looking to produce, does anyone have a snippet of code that will produce such a layout, I’ve looked at the grid and block-grid but I honestly don’t have a clue what I’m doing… Happy to learn but just don’t know where to start!

Thanks for any help you can provide!

Fred

Here is a screenshot of a product page. Clicking on a product brings up a larger image of that product. I have used “products.yml” to store details of the products.


If this is of interest, I would be happy to share my code. PM me.

Hi Scorpio,

That would be amazing, I’m not sure it 100% solves my issue but seeing some real-world examples will certainly help with my learning!

This page is from Foundations for Sites.
I use panini {{}} to load the data from the yml file.
The links in comments are to the Zurb site get.foundation.

<!-- data from products.yml -->
<div class="grid-container">
  <div class="grid-x grid-padding-x small-up-2 medium-up-3">
	   {{#each products}}   <!-- products.yml is a data file with the product details --> 
	   {{#ifequal cat 'pipes'}}  <!--if the cat: is pipes then use the data -->

    <div class="cell">
      <div class="card "> <!-- foundation Containers Card  https://get.foundation/sites/docs/card.html -->
        <a class="button tiny hollow" data-open="{{pname}}"><img src="assets/img/{{cat}}/{{pimage}}" width ="150"></a> <!-- images live in the assets/img folder -->

        <div class="card-section">
        <h4>{{pname}}</h4>
        <div class="reveal" id="{{pname}}" data-reveal> <!-- https://get.foundation/sites/docs/reveal.html -->
	        <h3><img src="assets/img/{{cat}}/{{pimage}}"></h3>
	        <button class="close-button" data-close aria-label="Close reveal" type="button"><span aria-hidden="true">&times;</span></button>
	        </div>
          <p>{{pdesc}}</p>
          <p>${{price}}</p>
        </div>
      </div>
    </div>
{{/ifequal}}
{{/each}}
</div>

products.yml file

#products
---
-
   cat: pipes
   pname: pipe1
   pdesc: Octopus Design
   price: 9.95
   pimage: anchor octopus-7.jpg
-
   cat: pipes
   pname: pipe2
   pdesc: smoking pipe2
   price: 9.95
   pimage: anchor octopus-8.jpg
-
   cat: pipes
   pname: pipe3
   pdesc: smoking pipe3
   price: 9.95
   pimage: anchor octopus-09.jpg 
-
   cat: pipes
   pname: pipe4
   pdesc: smoking pipe4
   price: 9.95
   pimage: anchor octopus-10.jpg 
...

Thank you! I’ll give it a go, do you know if I need to make any changes for email? Or should it work?

Thanks,

Fred

Sory Fred, but I have no experience with the Email side.