Grav theme for a camera shop/business
Sprockets is a custom theme for GRAV CMS. This theme is built with the Simple Grid framework and provides a flexible, responsive base for creating a custom, good looking site. Sprockets uses functionality that is only available in Grav 1.4+, and may not function properly on earlier versions.
The Sprockets theme is currently under active development, and in a potential unstable point. Below is a list of items that need more development:
page.mdinventory.mdcategories.mditem.mdabout.mdbio.mdcontact.mderror.mdTo install the theme into an existing GRAV site, copy the contents of the user > pages folder into the sites pages folder and the camera-shop folder into the sites themes folder and set the site.theme to camera-shop in the sites site.yaml. file in the config folder.
Note
This repo is setup so that you can simply set the repo as a ready to run GRAV site to make it easy to get it up and running locally. Refer to GRAVs documentation for more information on GRAV and GRAV Development.
All of the site settings are configured in the sprockets.yaml file.
You can set whether or not you want to use a showcase image as the page hero or a carousel slider in the Front Matter by changing either showcase.display or carousel: to true or false. The images are stored in the folder for the specific page, and defined along with the carousel or showcase. This way each page can have it’s own unique images.
Showcase also has the option of being a parralax image by setting showcase.parralax to true.
You can then define the rest of the pages content via Markdown or HTML in the page content area.
The inventory page has a built in category menu based on the child pages of the Inventory section. By adding pages to the inventory folder (page), you add categories to the menu dispayed on the page. The category image is defined by adding an image to the folder of each category. Name the image menu-image.jpg and it will automatically use that image in the menu.
The structure will look like this:
The About page can be configured to have the staff column appear on the left or right side as well as not show at all. Configure show_staff to true to have the staff menu appear, and configure staff_display to left or right to determine which side it appears. The page content will display on the opposite side of the staff menu, or take up the full page if it is hidden.
Staff are displayed in an automatically populated menu based on the children within the about folder. In each folder there will need to be a bio.md file and a bio-image.jpg file. The image should be square, and no smaller than 400px square.
The bio page also has the option of displaying social icons for each of the staff members. The social links are controlled adding the same social variables to the bio page’s front matter. Adding some of the following will display social icons/links to their social media feeds.
social:- site: 'facebook'username: 'username'text: 'Follow me on Facebook'link: 'https://www.facebook.com/'- site: 'twitter'username: 'username'text: 'Follow me on Twitter'link: 'https://www.twitter.com/'- site: 'linkedin'username: 'username'text: 'Connect with me on LinkedIn'link: 'https://www.linkedin.com/in/'- site: 'instagram'username: 'username'text: 'Follow me on Instagram'link: 'https://www.instagram.com/'- site: 'flickr'username: 'username'text: 'Follow me on Flickr'link: 'https://www.flickr.com/photos/'- site: 'behance'username: 'username'text: 'Follow me on Behance'link: 'https://www.behance.net/'- site: 'pinterest'username: 'username'text: 'Follow me on Pinterest'link: 'https://www.pinterest.com/'- site: 'google-plus'username: 'username'text: 'Find me on Google +'link: 'https://plus.google.com/u/0/+'- site: 'github'username: 'username'text: 'Code with me on Github'link: 'https://www.github.com/'
You can also enable your Instagram feed on this page and it will appear at the bottom of the page, full width.
The contact page has a custom address block that automatically populates the business address information based on the settings configured in the sprockets.yaml file. The page can be configured to be 1 or 2 columns, and the business address block can be configured to be on the right or the left if two_column is set to true, and setting address: to left or right. The page content will then appear on the opposite side as the address or below the address if two_column is set to false. This page also utilizes the contact form plugin.
The hero image of the map can be changed by editing the map.jpg file in the contact folder, and changing the hero_image: name in the page’s front matter.
reCaptcha Contact Form
Thank you to for using this theme. I put a lot of time and work into and I hop you like it. If you have any issues or would to request features, feeel free to create a new issue here in this repo.
The images used in this theme are all Copyrighted to Darryll DeCoster and not licensed to be used outside of demonstartive purposes for theme development and presentation. If yopu would like to use any of the images in the final site, please contact me directly to request permission and discuss payment options and amounts.
The files contained in this project are released under the MIT License. You can find a copy of this license in LICENSE.md file.