next
previous
items
European Union flag
Home
Topics
Analysis and data
Countries
Newsroom
About us

Folder Views

Page Last modified 31 Jul 2023
2 min read
This page was archived on 31 Jul 2023 with reason: Other (new version on http://eea.github.io/)
Examples of folder views found within our site.
Contents
  1. Folderish content types views
    1. Folder accordion view
    2. Folder atct album view
    3. Folder gallery view
    4. Folder listing view
    5. Folder summary view
    6. Folder tabs view
    7. Folder tabular view
 

Folderish content types views

These views are available for content types that can house other content types as children such as:

  • Collections
  • Folders
  • Topics

All of the children will be visible on these views with differences in the amount and the presentation of attributes and information displayed.

Folder accordion view

This view is making use of the Accordion component to show folder contents grouped into 2 sections:

  1. Folderish content types with accordion title set to first element title.
  2. Non Folder content types with accordion title set to Other resources.

Getting started

EEA webdesign guide broken into individual sections.

Typography
Images

Other resources 


<div class="eea-accordion-panels">

  <div class="eea-accordion-panel">
    <h2 class="eea-icon-right-container current notoc">
      <a href="https://www.eea.europa.eu/code/design-elements/getting-started">Getting started</a>
      <span class="eea-icon eea-icon-right"></span>
    </h2>
    <div class="pane">
      <p class="subfolder-description">EEA webdesign guide broken into individual sections.</p>
      <div class="subfolder-contents">

        <div class="photoAlbumEntry">
          <a href="https://www.eea.europa.eu/code/design-elements/typography">
            <span class="photoAlbumEntryWrapper">
              <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/typography/image_mini&quot;);"><!----></span>
            </span>
            <span class="photoAlbumEntryTitle">Typography</span>
          </a>
        </div>

        <div class="photoAlbumEntry">
          <a href="https://www.eea.europa.eu/code/design-elements/images">
            <span class="photoAlbumEntryWrapper">
                <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/images/image_mini&quot;);"><!----></span>
            </span>
            <span class="photoAlbumEntryTitle">Images</span>
          </a>
        </div>

      </div>
    </div>
  </div>

  <div class="eea-accordion-panel">
    <h2 class="eea-icon-right-container notoc">
      <a href="#">Other resources</a>
      <span class="eea-icon eea-icon-right"></span>
    </h2>

    <div class="pane" style="display: none;">
      <div class="subfolder-contents">

        <div class="photoAlbumEntry">
          <a href="https://www.eea.europa.eu/code/design-elements/giraffe/view">
            <span class="photoAlbumEntryWrapper">
                <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/giraffe/image_mini&quot;);"><!----></span>
            </span>
            <span class="photoAlbumEntryTitle">giraffe</span>
          </a>
        </div>

        <div class="photoAlbumEntry">
          <a href="https://www.eea.europa.eu/code/design-elements/monkey-with-makeup/view">
            <span class="photoAlbumEntryWrapper">
                <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/monkey-with-makeup/image_mini&quot;);"><!----></span>
            </span>
            <span class="photoAlbumEntryTitle">Monkey with makeup</span>
          </a>
        </div>

      </div>
    </div>
  </div>
</div>

Folder atct album view

This view lists every child with the Photo album component.

giraffe
Monkey with makeup 

<!--  added extra clearfix div as photoAlbumEntry classes are floated -->
<div class="clearfix">
  <div class="photoAlbumEntry">
    <a href="https://www.eea.europa.eu/code/design-elements/giraffe/view">
          <span class="photoAlbumEntryWrapper">
              <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/giraffe/image_mini&quot;);"><!----></span>
          </span>
      <span class="photoAlbumEntryTitle">giraffe</span>
    </a>
  </div>

  <div class="photoAlbumEntry">
    <a href="https://www.eea.europa.eu/code/design-elements/monkey-with-makeup/view">
          <span class="photoAlbumEntryWrapper">
              <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/monkey-with-makeup/image_mini&quot;);"><!----></span>
          </span>
      <span class="photoAlbumEntryTitle">Monkey with makeup</span>
    </a>
  </div>
</div>

Folder gallery view

This view is making use of the Gallery component to show folder contents that have images as fields which can then be used in this presentational view. 


<ul id="galleryView">

  <li>
    <span class="panel-overlay">
        Demo image.
        <a target="_blank" href="https://www.eea.europa.eu/code/design-elements/giraffe/image_view_fullscreen">Click to view full-size image… <span>402.4 KB</span></a>
    </span>
    <img class="skip_lazy" src="/code/design-elements/giraffe/image_large">
  </li>

  <li>
    <span class="panel-overlay">
        This monkey tries to impress with makeup.
        <a target="_blank" href="https://www.eea.europa.eu/code/design-elements/monkey-with-makeup/image_view_fullscreen">Click to view full-size image… <span>91.3 KB</span></a>
    </span>
    <img class="skip_lazy" src="/code/design-elements/monkey-with-makeup/image_large">
  </li>
</ul>

Folder listing view

This view is a simple Plone view used only when there is a need to have a brief list of children information such as title and description.

Image giraffe - 17 Feb 2010 — by alec — last modified 26 Oct 2020, 05:09 PM
Image Pascal source code Monkey with makeup — 18 Feb 2010 — by alec — last modified 22 Oct 2020, 05:56 PM
This monkey tries to impress with makeup.

<div class="entries">
  <dt>
    <span class="summary">
      <img src="/image.png" alt="Image" width="16" height="16">
      <a class="contenttype-image state-visible url" href="https://www.eea.europa.eu/code/design-elements/giraffe/view">giraffe</a>
    </span>

    <span class="documentByLine">- 17 Feb 2010 —
      <span>by <a href="https://www.eea.europa.eu/author/alec">alec</a>
      </span>
        — last modified 26 Oct 2020, 05:09 PM
    </span>
  </dt>

  <dt>
    <span class="summary">
      <img src="/image.png" alt="Image Pascal source code" width="16" height="16">
      <a class="contenttype-image state-published url" href="https://www.eea.europa.eu/code/design-elements/monkey-with-makeup/view">Monkey with makeup</a>
    </span>
    <span class="documentByLine">— 18 Feb 2010 —
      <span>by <a href="https://www.eea.europa.eu/author/alec">alec</a></span>
        — last modified 22 Oct 2020, 05:56 PM
    </span>
  </dt>
  <dd>This monkey tries to impress with makeup.</dd>

</div>

Folder summary view

This view is used on folderish content types making use of the Plone tile component to show children as media objects.

Typography

Typography

26 Oct 2020

Site typography, including global settings, headings, body text, lists.

Read more

Typography

Typography

26 Oct 2020

Site typography, including global settings, headings, body text, lists.

Read more 


<div class="entries">

  <div class="tileItem visualIEFloatFix">
    <a class="tileImage " title="Typography" href="https://www.eea.europa.eu/code/design-elements/typography">
      <img class="lazy" src="/code/design-elements/typography/image_mini" title="Typography" alt="Typography">
    </a>

    <div class="tileContent">
      <h2 class="tileHeadline notoc no-anchor">
        <a href="https://www.eea.europa.eu/code/design-elements/typography">Typography</a>
      </h2>
      <span class="date">
        26 Oct 2020
      </span>
    </div>

    <p class="tileBody">
      <span class="description">Site typography, including global settings, headings, body text, lists.</span>
    </p>

    <p class="tileFooter">
      <a class="moreLink" href="https://www.eea.europa.eu/code/design-elements/typography">Read more</a>
    </p>
  </div>


  <div class="tileItem visualIEFloatFix">
    <a class="tileImage " title="Typography" href="https://www.eea.europa.eu/code/design-elements/typography">
      <img class="lazy" src="/code/design-elements/typography/image_mini" title="Typography" alt="Typography">
    </a>

    <div class="tileContent">
      <h2 class="tileHeadline notoc no-anchor">
        <a href="https://www.eea.europa.eu/code/design-elements/typography">Typography</a>
      </h2>
      <span class="date">
        26 Oct 2020
      </span>
    </div>

    <p class="tileBody">
      <span class="description">Site typography, including global settings, headings, body text, lists.</span>
    </p>

    <p class="tileFooter">
      <a class="moreLink" href="https://www.eea.europa.eu/code/design-elements/typography">Read more</a>
    </p>
  </div>

</div>

Folder tabs view

This view is making use of the Tabs component behaving just like the accordion view, with the only difference being the use of tabs instead of accordions for headers.

EEA webdesign guide broken into individual sections.

Typography
Images
All Items 

<ul class="eea-tabs two-rows">
  <li>
    <a id="tab-getting-started" class="current" href="https://www.eea.europa.eu/code/design-elements/getting-started">Getting started</a>
  </li>
  <li>
    <a class href="https://www.eea.europa.eu/code/design-elements">Other resources</a>
  </li>
</ul>

<div class="eea-tabs-panels">
  <div class="eea-tabs-panel">
    <p class="eea-tabs-description">EEA webdesign guide broken into individual sections.</p>
    <div class="eea-tabs-contents">

      <div class="photoAlbumEntry">
        <a href="https://www.eea.europa.eu/code/design-elements/typography">
          <span class="photoAlbumEntryWrapper">
            <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/typography/image_mini&quot;);"><!----></span>
          </span>
          <span class="photoAlbumEntryTitle">Typography</span>
        </a>
      </div>

      <div class="photoAlbumEntry">
        <a href="https://www.eea.europa.eu/code/design-elements/images">
          <span class="photoAlbumEntryWrapper">
              <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/images/image_mini&quot;);"><!----></span>
          </span>
          <span class="photoAlbumEntryTitle">Images</span>
        </a>
      </div>

    </div>
    <div class="portletFooter">
      <a class="standardButton" href="https://www.eea.europa.eu/code/design-elements/getting-started">All Items</a>
    </div>
  </div>
  <div class="eea-tabs-panel">
    <div class="photoAlbumEntry">
      <a href="https://www.eea.europa.eu/code/design-elements/giraffe/view">
          <span class="photoAlbumEntryWrapper">
                  <span class="photoAlbumEntryWrapperImg lazy" style="background-image: url(&quot;/code/design-elements/giraffe/image_mini&quot;);"><!----></span>
          </span>
        <span class="photoAlbumEntryTitle">giraffe</span>
      </a>
    </div>
  </div>
</div>

Folder tabular view

This view is making use of the Listing table markup to show folder content's following attributes:

  1. Title
  2. Author
  3. Portal type
  4. Last modification date
Content listing
 Title   Author   Type   Modified 
Image giraffe alec Image 26 Oct 2020, 05:09 PM
Image Pascal source code Monkey with makeup alec Image 22 Oct 2020, 05:56 PM 

<div class="entries">
  <table class="listing">
    <caption class="hiddenStructure">Content listing</caption>

    <thead>
    <tr>
      <th class="nosort">&nbsp;Title&nbsp;</th>
      <th class="nosort">&nbsp;Author&nbsp;</th>
      <th class="nosort">&nbsp;Type&nbsp;</th>
      <th class="nosort">&nbsp;Modified&nbsp;</th>
    </tr>
    </thead>

    <tbody>
    <tr class="odd">
      <td>
        <img src="/image.png" alt="Image" width="16" height="16">
        <a class="contenttype-image" title="Demo image." href="https://www.eea.europa.eu/code/design-elements/giraffe/view">giraffe</a>
      </td>

      <td>
        <a href="https://www.eea.europa.eu/author/alec">alec</a>
      </td>
      <td>Image</td>
      <td>26 Oct 2020, 05:09 PM</td>
    </tr>

    <tr class="even">
      <td>
        <img src="/image.png" alt="Image Pascal source code" width="16" height="16">
        <a class="contenttype-image" href="https://www.eea.europa.eu/code/design-elements/monkey-with-makeup/view">Monkey with makeup</a>
      </td>

      <td>
        <a href="https://www.eea.europa.eu/author/alec">alec</a>
      </td>
      <td>Image</td>
      <td>22 Oct 2020, 05:56 PM</td>
    </tr>
    </tbody>

  </table>
</div>

Permalinks

Geographic coverage

For references, please go to https://www.eea.europa.eu/code/design-elements/views or scan the QR code.

PDF generated on 11 Aug 2025, 02:24 PM

EEA Page URL QR

Tags

Filed under: corporate design
Document Actions
The EEA is an agency of the European Union

Engineered by: EEA Web Team

Software updated on 26 September 2023 08:13 from version 23.8.18

Software version: EEA Plone KGS 23.9.14

Code for developers

Systems Status

Legal notice

Creative commons license

CMS login