Creating a Grid of Images

I. Introduction

Some of the cleanest pages across the network contain a featured list of images laid out into columns which then stack into a single column on mobile. For example, check out the artist images on do512.com/p/strange-inquiry which link through to each individual interview or the circular images on dothebay.com/p/how-to-do-treasure-island which link to the subpages of DoTheBay's Treasure Island coverage.
   
desktop
 mobile
 



       


 

II. How to build your own grid

1. First, make sure to save your /p/ page's current content by switching to HTML view and copying everything into a text file saved on your computer.  

2. In order to create a grid of images, we'll first need some images.  Create all of your images at the same size.  If you're planning to feature square images, we'd suggest somewhere around 400x400px .jpgs (unless they have transparency).  Rectangles?  400x300px or whatever your creative heart desires.

3. Once you've got your images, upload them via radmin.dostuffmedia.com/property_assets/new

4. Drop this CSS onto your /p/ page's custom CSS field to give you the freedom to use 2 / 3 / 4-wide columns:
ul.rig {
    list-style: none;
    font-size: 0px;
    margin-left: -2.5%; /* should match li left margin */
}
ul.rig li {
    display: inline-block;
    padding: 0px;
    margin: 0 0 2.5% 2.5%;
    background: none;
    border: none;
    vertical-align: top;
    box-shadow: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
ul.rig li img {
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
}
ul.rig li h3 {
    margin: 0 0 5px;
}
ul.rig li p {
    font-size: .9em;
    line-height: 1.5em;
    color: #999;
}
/* class for 2 columns */
ul.rig.columns-2 li {
    width: 47.5%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
    width: 30.83%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
    width: 22.5%; /* this value + 2.5 should = 25% */
}
@media (max-width: 600px) {
    ul.grid-nav li {
        display: block;
        margin: 0 0 5px;
    }
    ul.grid-nav li a {
        display: block;
    }
    ul.rig {
        margin-left: 0;
    }
    ul.rig li {
        width: 100% !important; /* over-ride all li styles */
        margin: 0 0 20px;
    }
}

5. How does it work?   The CSS looks for the following HTML class structure and makes the content lay out 2-wide, 3-wide, etc and always 1-wide on mobile.
a. 2-wide:
<ul class="rig columns-2" style="font-weight: bold;">
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
</ul>
 
b. 3-wide:
<ul class="rig columns-3" style="font-weight: bold;"> 
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
</ul>

c. 4-wide
<ul class="rig columns-4" style="font-weight: bold;"> 
     <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
     <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
     <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
     <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
</ul>

6. Take the HTML structure above (depending on how many columns you want in your grid) and build out your page's grid HTML with the image URLs from step 4 and the links where you want each image to link through.  Once completed, drop it into your page's HTML in the spot where the grid should begin.  

III. Notes

1. You can have more than 2 <li> in the 2-wide layout, it'll just make another row of 2-wide items.  Same with 3-wide and 4-wide such as the following which would create a 3x3 grid of 9 images:
<ul class="rig columns-3" style="font-weight: bold;"> 
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
      <li><a href="http://example-link.com"><img src="http://example-image-location-url.com"></a></li>
</ul>

2. No need to put multiple <ul>s just a single one where the grid begins and a single </ul> where the grid ends.

IV. Having Trouble?

Reach out to support@dostuffmedia.com with...
a)  a link to the page
b)  your previously saved HTML from the page's content
c)  all of the image links / files in an organized list
d)  the links where each image should point to 
e)  clarify where the grid should be located on the page

Comments