Port of Visualize template by TEMPLATED to Hugo
Visualize is a simple, one-page portfolio design with a fully functional lightbox. It is a port of Visualize by TEMPLATED.
Inside the folder of your Hugo site run:
$ cd themes$ git clone https://github.com/christianmendoza/hugo-visualize-theme
For more information read the official setup guide of Hugo.
After installing the Visualize theme successfully it requires a just a few more steps to get your site finally running.
Take a look inside the exampleSite folder of this theme. You’ll find a file called config.toml. To use it, copy the config.toml in the root folder of your Hugo site. Feel free to customize this theme as you like.
In the exampleSite folder you can find an example data folder with a gallery.toml file and static folder with images. Copy both folders to the root folder of your Hugo site. Start/restart your local server to see an example site with a few test placeholder images.
Name your background image with the filename bg.jpg and add it to your static/images folder, i.e. static/images/bg.jpg
Name your avatar image with the filename avatar.jpg and add it to your static/images folder, i.e. static/images/avatar.jpg. Or alternatively, you can change avatar in config.toml to its respective path and filename. Update intro to change the intro text. You can use markdown in intro.
[params.header]avatar = "images/avatar.jpg"intro = "This is **Visualize**, a responsive site template designed by [TEMPLATED](//templated.co)<br>and released for free under the Creative Commons License."
Data for all gallery images is stored in data/gallery.toml. Upload full and thumbnail size images to your static folder in any folder structure you wish. Use the following snippet below to add new images.
[[image]]full = "images/fulls/01.jpg"thumb = "images/thumbs/01.jpg"caption = "Lorem ipsum dolor sit amet 1"
Each image has a caption text. Update both full and thumb accordingly the image’s respective file path.
There are additional settings for the gallery lightbox functionality you can configure which are located in the static/assets/js/main.js file.
$('.thumbnails').poptrox({onPopupClose: function() { $body.removeClass('is-covered'); },onPopupOpen: function() { $body.addClass('is-covered'); },baseZIndex: 10001,useBodyOverflow: false,usePopupEasyClose: true,overlayColor: '#000000',overlayOpacity: 0.75,popupLoaderText: '',fadeSpeed: 500,usePopupDefaultStyling: false,windowMargin: (skel.breakpoint('small').active ? 5 : 50)});
The above are all default. Refer to the jquery.poptrox documentation for more configuration options.
Add icons to your social media properties. Change label, icon, and icon accordingly. Follow the same snippet to add more icon links. Remove any of those you don’t want.
[[params.social]]label = "Twitter"icon = "fa-twitter"url = "https://twitter.com"
Enable Google Analytics by adding your tracking id to googleAnalytics. Leave empty or remove if you don’t want.
googleAnalytics = "UA-XXXXXXXX-1"
In order to see your site in action, run Hugo’s built-in local server.
$ hugo server
Now enter localhost:1313 in the address bar of your browser.
Did you found a bug or got an idea for a new feature? Feel free to use the issue tracker to let me know. Or make directly a pull request.
The original template is released under the Creative Commons Attribution 3.0 License. Please keep the original attribution link when using for your own project. If you’d like to use the template without the attribution, you can check out the license option via the template author’s website.
Also thanks to Steve Francia for creating Hugo and the awesome community around the project.