Back to top

Portfolio

List of images and descriptions of what you work on

Portfolio fragment can display up to 3 images in a row, which get realigned responsively. Title and subtitle are shown as overlays. An additional description can be provided and shown as a modal upon clicking the portfolio. In the case a item_url is provided the portfolio will redirect to the specified url instead of opening the modal.

Portfolio Fragment

Displaying animals with links and modals
First Title
Lorem ipsum dolor sit amet, consectetur adipiscing
Animal Cat
Second Title
Lorem ipsum dolor sit amet, consectetur adipiscing
Third Title
Lorem ipsum dolor sit amet, consectetur adipiscing
Animal Dog Smart
Code (index) 
+++
date = "2018-07-09"
fragment = "portfolio"
weight = 110
background = "secondary"

title = "Portfolio Fragment"
subtitle = "Displaying animals with links and modals"
#title_align = "left" # Default is center, can be left, right or center

#height = "110px" # Default is auto
+++
Code (subitem) ``` +++ weight = 10 title = "First Title" subtitle = "Lorem ipsum dolor sit amet, consectetur adipiscing" item_url = "#"

[asset] image = “cat-1.jpeg” +++

Ante in nibh mauris cursus mattis molestie a iaculis. Nisi porta lorem mollis aliquam. Eu consequat ac felis donec et odio pellentesque diam volutpat. Arcu dui vivamus arcu felis. Senectus et netus et malesuada fames ac turpis egestas sed. Orci eu lobortis elementum nibh.

</details>

Documentation

This fragment needs a fragment controller file and subitems. You need to create a directory for this fragment and put index.md with fragment = "portfolio" and subitems next to that file.

Variables

index.md only uses global varibales. Following variables are for subitems.

title

type: string

Title of the portfolio item. Will appear in the modal (after clicking the item) as well.

subtitle

type: string

Subtitle of the portfolio item. Will appear in the modal (after clicking the item) as well.

item_url

type: string

URL of the portfolio item. If set, then clicking the portfolio item would open the URL and modal will not be opened.

NOTE: This variable may be deprecated in the future and be renamed to url.

asset

type: asset object
size: 500x380

The image that is shown on the portfolio item.

Global variables are documented as well and have been omitted from this page.

Logo Subtext
github

Further Resources

Syna Theme

Highly customizable open source theme for Hugo based static websites

comments powered by Disqus