Photoes
Photography template
Created: 10/30/2012
latest
Update: 10/30/2012
By: tagDiv
Email: contact@tagdiv.com
Photoes V 1.2 update
- Theme customizer support Read more
- You can now upload your own wallpapers
- Different floors presets
- Configurable global color (logo, lines, links, buttons labels etc)
- Home page slider with a 460px height
- Link a picture to a post, page or url
- More frames presets
- White and yallow lights, with configurable opacity - this makes them look good with any wallpaper
FAQ
What image sizes can I add to the galleries?
Depending on the image orientation you select, the images have to be the following size:
for landscape: 800×500 px
for portrait: 370×500 px
for square: 500×500 px
Can I upload custom sized images?
The theme only supports the three sizes mentioned above, to upload custom sizes, please consider adding some padding to the picture, check out our demo: http://tagdiv.com/theme/photoes4/category/photoes-galleries/cropped-photos/
Quick start guide
- install the theme (Photoes.zip) via the upload theme feature form wordpress
- each category that is a child of photoes-galleries is a gallery (with a link on the left of the screen)
- each post with feature image is a picture in the gallery (the featured image appears in the painting frame)
- you can select in each post the picture orientation (square, landscape, portrait), 3d object to place near the painting and the title color.
Installation
Upload the theme
Upload the theme folder (photoes) via FTP to your wp-content/themes folder.
You can also install the theme via WordPress admin. Go to the Appearance -> Themes panel, choose Install Themes, click Upload and choose the photoes.zip file.
Activate the theme
Once you have uploaded the theme, you have to activate it in Appearance -> Themes panel.
If you have any troubles with the theme installation, try to read the WordPress documentation.
Recomanded Wordpress plugins
Importing the data (make your site look like the demo site)
You can load our sample content into your new website, which will help you to learn how to do certain things with Photoes Theme. The sample content file resides in the 'sample content' folder. To load it into your WordPress installation you have to install the WordPress Importer plugin. You can do this by going to the Tools -> Import WordPress panel and clicking WordPress. Once you have this plugin installed, go again to the Tools -> Import panel, click WordPress, choose the sample content file and click Upload file and import.
Once you have imported the content file, you have to set some options which can't be imported into the WordPress. Go to the Appearance -> Menus panel, pick the Header from the Header Menu dropdown list and click Save Menu button.
Setting up the home page
Video tutorial:
quick steps:
- make a new page
- set the homepage template
- the title of the page will appear with the large dancing script font
- for the short description from the homepage, use h2 (Heading 2 from the wordpress paragraph menu)
- use the slides shortcode
The homepage is a simple page that has the following structure:
Seting the new created homepage as the wordpress index page
By default the Photoes Theme home page contains the latest blog posts. You must to set up a static page, under Front page select your homepage page, for more information please read the Creating a Static Front Page article in the official WordPress documentation.
How to use the theme
Video tutorial
A. How to make a image gallery:
-
Create a new post.
-
The title of the post is the title that apears on the photo on gallery.
-
Select a category.
-
Make sure the gallery is a child of photoes-gallery (only then the theme will load the gallery skin)
-
Picture format settings. Here we have three options. (Landscape, Square, Portrait)
-
Title color. Here is the color of the title that apears on the photo.
-
3d object. From here you can select from a defined library a 3d object to apears on the floor underneath the picture.
-
On the featured image is the photo you like to put on gallery.
B. How to make a video gallery:
To make a video gallery or if you want to put a video on a photo gallery, just make a new post like above and in body of the post just paste a youtube link.
Change the post format to video.
Customize the theme via the Theme Customizer
How to open the theme customizer:
Blog settings:
Customizing the floor:
Global frames (you can also change them per image):
Setting up the lights:
Upload your custom logo:
Change the global color (lines, logo, links, buttons etc):
Uploading custom wallpapers:
Custom Sidebars
You can create a custom sidebar for every page or post. Click on Sidebars from Photoes menu.
Here you can create custom sidebars.
Go to edit a post or page and under the Post settings select the sidebar you want to use.
To add content to the sidebar go to Appearance -> Widgets.
HTML Structure
This theme is a fixed layout with two columns. The theme is based on bootstrap so it's compatible with the twitter bootstrap grid.
CSS Files and Structure
All the photoes css is located in photoes/css. Each section of the file is well documentated.
A main section is marked like this:
/*
=======================================================================================================
Name : Homepage template
File : page-home.css
=======================================================================================================
*/
A subsection is marked like this:
/* ----------------------------------------------------------------------------
lighting
*/
JavaScript
- jQuery - imported from wordpress
- All the library that the theme uses are in /external - js and css
- site.js - the themes custom js
PSD Files
I've included the following psds with this theme:
- gallery.psd - PDS layout of the gallery page
Sources and Credits
I've used the following images, icons or other files as listed.
- jQuery
- images from the themeforest assets library
- Superfast Blur
- bootstrap
- jQuery Mouse Wheel Plugin
- nivo-slider
- jquery reflect
- nice scroll
Shortcodes
The slider shortcode
[slides]
[slide caption="Commercial photography" url="category/commercial/"]http://path to image[/slide]
[slide caption="Art gallery" url="category/art/"]http://path to image[/slide]
[slide caption="Architecture photography" url="category/architecture/"]http://path to image[/slide]
[/slides]
[slides] [/slides]
- is the wrapper for the slider
- if you pass to it height="460" it will generate a 460px height slide
[slide caption="" url=""]path to image[/slide]
- this shortcode generates the actual slide
- has to be in the [slides][/slides] shortcode
- caption - the small text caption that appears on each slide
- url - the url to open on slide click
- content - the url of the image for the slide. For the homepage we recommand a 940px x 380px image or a 940px x 460px (using the [slides height="460"] shortcode)
See more details about this shortcode on the online doc.
More shortcode
plase visit the online documentation and demo for all the shortcodes: http://tagdiv.com/theme/photoes/alerts/