University of Minnesota Extension
/
612-624-1222
Menu Menu

Extension > Template documentation > Page types > Gallery page example

Gallery page example

This page is part of the program site package. Download the program site package here (54 K ZIP).

Section one

Section two

Section three

Other XXXXXXXXXXX resources we recommend

Code

Page menu

<div id="pageMenu">
  <h2>On this page</h2>
  <ul class="column">
    <li><a href="#section-one">Section one</a></li>
    <li><a href="#section-two">Section two</a></li>
  </ul>
  <ul class="column last">
    <li><a href="#section-three">Section three</a></li>
    <li><a href="#other">Other XXXXXXXXXXX resources we recommend</a></li>
  </ul>
</div>

Feature section

This is just a normal module with the gallery class applied to it. It also uses two standard columns. This section is optional.

<div class="module gallery">
  <div class="column"> 
    <!--feature-->
    <div class="feature"> <a href="http://www.maes.umn.edu/11varietaltrials/"><img src="/features/img/01-12-2011.jpg" alt="Kura Clover" /></a>
      <h3><a href="http://www.maes.umn.edu/11varietaltrials/">Minnesota Varietal Trials Results 2011</a></h3>
      <p>Research on best varieties for an area. <a href="http://www.maes.umn.edu/11varietaltrials/">More</a></p>
    </div>
    <!--/feature--> 
  </div>
  <!--/col-->
  <div class="column last"> 
    <!--feature-->
    <div class="feature"> <a href="/distribution/housingandclothing/DK1068.html"><img src="/features/img/02-15-2010.jpg" alt="Ice dams" /></a>
      <h3><a href="/distribution/housingandclothing/DK1068.html">Ice Dams</a></h3>
      <p>Prevent roof and interior damage now; long term action can save energy use 20-30%. <a href="/distribution/housingandclothing/DK1068.html">More</a></p>
    </div>
    <!--/feature--> 
  </div>
  <!--/col--> 
</div>
<!--/module-->

Gallery lists

Note how wrap is used on the h2's to clear the columns above. Also note how the column and last classes are applied directly to the ul to create the columns.

<h2 id="section-one" class="wrap">Section one</h2>
<ul class="galleryList column">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>
<ul class="galleryList column last">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>
<h2 id="section-two" class="section02 wrap">Section two</h2>
<ul class="galleryList column">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>
<ul class="galleryList column last">
  <li>
    <h3><a href="">Vivamus a massa non</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat dolor non arcu malesuada commodo.</p>
  </li>
</ul>

Recommended links section

<h2 id="other" class="section wrap">Other XXXXXXXXXXX resources we recommend</h2>
<ul>
  <li><a href="http://www.example.com/">Praesent tincidunt dictum est</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Mauris dapibus dictum tortor</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Nam aliquam</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Aenean dui leo</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Vivamus a massa non purus</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Phasellus commodo dolor sit amet</a> &ndash; Source of document</li>
  <li><a href="http://www.example.com/">Vivamus lacinia nisi eu tortor</a> &ndash; Source of document</li>
</ul>
  • © 2013 Regents of the University of Minnesota. All rights reserved.
  • The University of Minnesota is an equal opportunity educator and employer. Privacy