mirror
/
zola
mirror of https://github.com/getzola/zola
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
zola/docs/content/themes/zallery/index.md

5.5 KiB
Raw Permalink Blame History

+++ title = "zallery" description = "Gallery theme for zola" template = "theme.html" date = 2024-09-02T05:58:27Z

[extra] created = 2024-09-02T05:58:27Z updated = 2024-09-02T05:58:27Z repository = "https://github.com/gamingrobot/zallery.git" homepage = "https://github.com/gamingrobot/zallery" minimum_version = "0.19.0" license = "MIT" demo = "https://gamingrobot.github.io/zallery-demo"

[extra.author] name = "Morgan Creekmore" homepage = "https://creekmore.dev" +++

Zallery theme for Zola

Gallery and portfolio theme for Zola.

Demo Site: gamingrobot.github.io/zallery-demo
Personal Portfolio: gamingrobot.art

Screenshots

Light mode Dark mode
light mode dark mode

Features

  • Dark and Light mode
  • Auto creation of mobile friendly images
  • Auto creation of thumbnails
  • Auto conversion of images
  • Maximize button on images
  • medium-zoom support
  • ModelViewer and Sketchfab support
  • Video embed support
  • OpenGraph and Twitter embed support
  • Responsive and mobile friendly

Installation

Clone the theme into the themes folder:

git clone https://github.com/gamingrobot/zallery.git themes/zallery

Note: It is recomended that you copy the config.toml from the themes/zallery folder to the root folder of your site.

Then set your theme setting in config.toml to zallery:

theme = "zallery"

Customization

To customize the theme's colors you will need to copy the _variables.scss into your sites sass folder and create a zallery.scss file with:

@import 'variables';
@import '../themes/zallery/sass/imports';

See the demo site for an example: github.com/gamingrobot/zallery-demo/tree/master/sass

Options

Menu Items

Customize the header navigation links

[extra]
menu = [
    {url = "atom.xml", name = "Feed"},
    {url = "https://github.com/gamingrobot/zallery", name = "Github"},
]

Browser Bar Theme Color

Customize color to set the browser's url bar on mobile

[extra]
theme_color = "#313131"

Author Url

Url used for the name in the copyright

[extra]
author_url = "https://example.com"

Cover Image

Cover image to use on the main gallery pages for opengraph and twitter embeds

[extra]
cover_image = "img/cover.webp"

Copyright and Powered by

To hide the copyright set this to true

[extra]
hide_copyright = false

To hide the "Powered by Zola & Zallery" set this to true

[extra]
hide_poweredby = false

Gallery

Settings for the gallery view's thumbnails

[extra]
thumbnail_size = 400 # size in pixels, you may need to adjust the media queries in _gallery.scss
thumbnail_format = "webp" # auto, jpg, png, webp
thumbnail_quality = 100 # value in percentage, only for webp and jpg

img shortcode settings

Settings for the img shortcode, allowing for automatic conversion and creating mobile friendly images

[extra]
covert_images = false # set to true to convert images to to the format in the image_format setting
create_mobile_images = false # set to true to create mobile friendly versions of the image
image_format = "webp" # auto, jpg, png, webp
image_quality = 90 # value in percentage, only for webp and jpg

Frontmatter settings

These settings are for the frontmatter on each artwork

[extra]
thumbnail = "image.jpg" # image to resize into a thumbnail and cover image
modelviewer = true # enable modelviewer javascript for this artwork

Javascript libraries

ModelViewer

Set to true to enable modelviewer support. This can also be set in the artwork frontmatter or in config.toml

[extra]
modelviewer = true

JSZoom

Set to true to enable javascript zoom support.

[extra]
jszoom = true

GoatCounter

Set to the goatcounter tag to enable goatcounter support

[extra]
goatcounter = ""

Shortcodes

img

{{/* img(src="image.jpg", mobile_src="image-mobile.jpg", alt="alt text", text="text", fit="") */}}
  • src (required) - Image path
  • mobile_src (optional) - Mobile friendly version
  • alt (optional) - Alt text
  • text (optional) - Text to put under the image (if alt is not specified, text will be use for alt text)
  • fit (optioanl) - Defaults to fit-view, can be set to max-width to make the image fill the width of the page

video

{{/* video(src="image.jpg", autoplay=false) */}}
  • src (required) - Video path
  • autoplay (optional) - Set to true to enable autoplay

youtube / vimeo

{{/* youtube(id="", autoplay=false) */}}
{{/* vimeo(id="", autoplay=false) */}}
  • id (required) - Id of the video
  • autoplay (optional) - Set to true to enable autoplay

model

Note: Requires modelviewer to be enabled in config.toml

{{/* model(src="image.jpg", skybox="", poster="") */}}
  • src (required) - Model path
  • skybox (optional) - Skybox HDR
  • poster (optional) - Image to show when loading
  • alt (optional) - Alt text

sketchfab

{{/* sketchfab(id="") */}}
  • id (required) - Id of the model