Zallery theme for Zola

Gallery and portfolio theme for Zola.

Demo Site:
Personal Portfolio:


Light modeDark mode
light modedark mode



Clone the theme into the themes folder:

git clone 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"


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:


Customize the header navigation links

menu = [
    {url = "atom.xml", name = "Feed"},
    {url = "", name = "Github"},

Browser Bar Theme Color

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

theme_color = "#313131"

Author Url

Url used for the name in the copyright

author_url = ""

To hide the copyright set this to true

hide_copyright = false

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

hide_poweredby = false

Settings for the gallery view's thumbnails

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

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

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

Javascript libraries


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

modelviewer = true


Set to the goatcounter tag to enable goatcounter support

goatcounter = ""



{{ img(src="image.jpg", mobile_src="image-mobile.jpg", alt="alt text", text="text", fit="") }}


{{ video(src="image.jpg", autoplay=false) }}

youtube / vimeo

{{ youtube(id="", autoplay=false) }}
{{ vimeo(id="", autoplay=false) }}


Note: Requires modelviewer to be enabled in config.toml

{{ model(src="image.jpg", skybox="", poster="") }}


{{ sketchfab(id="") }}