Visual Sections

Every foliodot web page can have three visual sections:

  • Project

    Main section containing your portfolio project inner pages.

  • Thumbnails

    Optional secondary section acts like contact-sheets or project overview. Thumbnails section is auto-generated.

  • Sidebar

    Optional section for secondary content as logo, navigation, links etc.

All sections are seamlessly interconnected with transitions and supplement each other creating feature rich portfolio experience.

Project section

Project section represents a group of project inner pages and project user interface.

Think of project page as one page of a photo book. All pages together makes photobook — all project pages together makes foliodot project section.

Each project page is defined through single html block entity defined within <main> html element.

User interface is auto generated based on setting provided in project configuration object.

Project pages Link

Project pages are set within <main> html element:

<main>
    page #1
    page #2
    etc.
</main>

Every direct child html element of <main> html element is treated as single project page - we simply call it page element.

By inserting html code into <main> element you are providing content that will be parsed by template engine as project pages:

<main>
    <!-- 1. page element -->
    <h3>My photographs</h3>

    <!-- 2. page element -->
    <img src=”photo1.jpg”/>

    <!-- 3. page element -->
    <img src=”photo2.jpg”/>

    <!-- 4. page element -->
    <article>
        <h4>My article title</h4>
        <p>Text for my article</p>
    </article>
</main>

In above example 4 page elements are defined thus 4 project pages are created: first page contains h3 element, second and third contain img element and fourth contains article element with all it's children elements.

Page element can be any html code block except html comments and <script> elements which are ignored and not processed as page elements.

Remember, FOLIO. template treats direct child element of <main> as one project page.

Page content Link

Page element can be any html element or html code block. Common foliodot page content:

User interface Link

Project section can contain any of the following user interface:

  • Next page button
  • Previous page button
  • Switch section button
  • Page enumeration
  • Pagination

Project user interface is auto-generated based on configuration provided in project configuration object. If no configuration provided default settings apply.

Configuration Link

Configuration settings for project section are defined via javascript project configuration object:

project : {
    option : value
}

Example:

project : {
    transition : 'fade',
    pagination : false
}

In above example we have set default project page transition type to 'fade' and we have removed pagination UI from project section.

Learn more:

Helpers Link

Helpers are code utilities designed for styling, handling or managing particular functionality of your foliodot web page.

Available helpers for project section:

Thumbnails section

Thumbnails section represents a group of thumbnail pages and user interface.

Fig 1. Thumbnails screenshot of the demo website

Thumbnails section (pages and UI) is auto-generated based on settings provided via thumbnails configuration object.

Pages Link

Thumbnail pages are auto-generated based on:

  1. content — number of page elements inserted in main html element and
  2. grid setting — configuration option defined in thumbnails configuration object

For example, for 20 project pages and 4x2 grid, foliodot will generate 3 thumbnail pages — first and second with 8 thumbnails while third page will contain 4 thumbnails.

User interface Link

Thumbnails section can contain any of the following user interface:

  • Next page button
  • Previous page button
  • Switch section button
  • Page enumeration
  • Pagination

Thumbnails user interface is auto-generated based on UI settings provided via thumbnails configuration object. If no configuration provided default settings apply.

Thumbnail Link

Thumbnail page contain thumbnails distributed in a grid and linked to respective project pages.

For each project page appropriate thumbnail is generated based on page content. For example, if project page is:

  • single image — thumbnail will display single image with appropriate caption
  • diptych — thumbnail will show diptych as well
  • text or article — thumbnail will be generated as truncated text

Configuration Link

Configuration settings for thumbnails section are defined via thumbnails configuration object:

thumbnails : {
    option   : value
}

For example, configuration object below sets fade as default page transition, thumbnails are distributed in 3x2 grid and thumb maximum photo size is set to 180x120 pixels:

thumbnails : {
    transition  : 'fade',
    grid        : '3x2',
    size        : '180x120'
}

Thumbnails section is optional. If you don't need this section pass false in configuration object:

thumbnails : false

Learn more:

Helpers Link

Helpers are code utilities designed for styling, handling or managing particular functionality of your foliodot web page.

Available helpers for thumbnail pages:

Sidebar section is secondary content section — ideal place for your logo, navigation, short information etc. Sidebar section is optional.

Creating sidebar section Link

Sidebar section is defined with aside html element. By inserting html code in <aside> element you are providing content that will be included in sidebar section: 

<aside>
    logo,
    navigation,
    etc.
</aside>

To remove sidebar section, remove (or don't include) <aside> element in web page html source code.

Good to know:

  • Sidebar section is optional
  • If aside element is not present, no sidebar code nor sidebar user interface will be generated
  • Only one sidebar element is allowed per html page
  • Sidebar content can be any html code block

Sidebar section contains following user interface:

  • Sidebar toggle button
  • Sidebar close button

Sidebar user interface is auto-generated based on settings provided in sidebar configuration object.

Configuration settings for sidebar section are defined via sidebar configuration object:

sidebar : {
    option : value
}

Example:

sidebar : {
    align : 'right',
    hidden : 'false'
}

In above example we have aligned sidebar to the right of the webpage and set it to be initially visible (opened) once webpage is loaded.

Learn more:

Helpers are code utilities designed for styling, handling or managing particular functionality of your foliodot web page.

Available helpers for sidebar section:

× × ×

Learn next: Introduction