1. Home
  2. Docs
  3. Gossh Framework
  4. Template pages
  5. Portfolio Gallery Page

Portfolio Gallery Page

Main setup instructions

Looking for videos, please see below.

In this section are included the main steps you would have to follow in order to set this page, more options and settings are described in the “Other Gallery Page Options” section below.

Creating The Page:

  1. Create a new page (Page » Add New)
  2. Select “Portfolio Gallery” in the “Template” field (located in the right sidebar of the edit page section
  3. If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page displays » Select “A static page” and select the page that you have just created in the Front Page list:

Creating the portfolio/gallery items (adding images to the gallery)

Each of the images in the gallery represents a single Portfolio Item. For each of the portfolio items:

1. Creating new items
You can create a new item in “Portfolio” » Add New section. You can set the title in the “Title” field of the item.

2. Add Images to the item

1. Click on the “Add Media” button above the main content area of the portfolio item

2. Open the “Create Gallery” section. If you would like to upload new images click on the “Upload Files” tab and upload the images. If you would like to add existing Media Library images, click on the “Media Library” tab and select the images you like. After you select the images, click on the “Create a new gallery” button.

 

3. After this when you click on each image in the gallery, in its Caption field you can set a description to it. You can also change the default image order by dragging and dropping the images on different positions.

4. When you finish editing the images Click on the “Insert Gallery” button. This will insert a gallery object into the content section of the portfolio item.

5. Later if you would like to edit the images, click on the gallery object and click on its “Edit Gallery” button.

3. Setting the thumbnail of the item

By default the first image of the images you have added will be used as the item’s thumbnail. If you would like to set another image as thumbnail, you have to set it as featured image to the item.

As the images uploaded would be bigger, the thumbnail image will be resized automatically to the size in which it should be displayed. However, if you prefer to use your custom thumbnail image, you can set it in the “Custom Thumbnail URL” field of the item.

4. Selecting the type of the item

Each portfolio item supports different formats in which it can be displayed. You can select the type of the item in the “Item Type” field:

Slider with side description / Full-width slider
These two options display the same type of content, but in a different layout. The slider with side description displays a slider of images and a description on the side and the full-width slider displays a full-width slider with a description located below it.

You can read about how to add the images to the slider in the “Add images” section above.

The slider description is the actual post content – the content that you insert in the portfolio post content editor area will be displayed as a description to the item.

Slider options

You can change the default slider options in the Gossh Options » Slider Settings » Portfolio Slider section. In this section you can select whether the images to be automatically resized or not and select whether to display a related projects carousel below the slider and you can also customise the default carousel options.

  • Lightbox

With this type selected, the single portfolio item page will automatically include a Quick gallery with option to open the images in lightbox. Setting a single preview image per item

By default the lightbox items are designed to display albums of images – each items displays a set of images in the lightbox. However if you would like to have only one preview image per item and have all the lightbox images in the gallery page related in a group, so that when you click on the first item’s image and then click on the “Next” arrow of the lightbox, the second item’s image will be displayed, you can enable the “Make lightbox items preview images related to each other” option in the gallery page settings section.

  • Standard Page
    The item will be displayed in a standard page format. In the Gossh Options » Post and Page Settings » Portfolio Posts section you can select the layout and sidebar for the page.
  • Video with side description / Full-width videoDisplays a video either in a full-width layout or with a side description. You can set the video URL in the “Video URL” custom field of the portfolio item. The theme uses the WordPress shortcode to insert the video, you can see the supported formats on the WordPress Embeds page. We have also included support for Flash videos (with .swf extension).
  • Custom LinkThe item will be linking to a custom link that you have set in the custom field “Custom Link URL” of the item

Ordering the items in the gallery

You can select how the items will be ordered in the “Order items by” and “Order” fields of the gallery page settings section

 

The default options are set to order the items by date in a descending order. This means that the newest items will be displayed first. You can also select the items to be ordered by “Custom order”. In this case, you can set an order number to the portfolio item in its “Order” field. We have also created a Portfolio » Custom Order page where you can easily drag and drop the portfolio items to reorder them:

Other gallery page options

The gallery page includes some customization options in its settings section which is located below the main content editor of the page.

  • Select the categories to be included/excluded from the pageIn the Filter portfolio categories section when the Filter Type option is set to “Exclude” the select categories will be excluded from the page. If the “Include” option is selected, only the items from the selected categories will be displayed.
  • Show/hide the category filterYou can disable/enable the category filter within the “Show portfolio category filter” field
  • Set the number of items to be displayed per pageYou can set the number of items that will be displayed per page in the “Number of portfolio items per page” field
  • Change the number of columnsYou can change the number of columns in the “Number of columns” field
  • Change the image layoutYou can enable a Masonry layout in the “Masonry layout” field. If you enable this option, the images height will vary depending on the original image ratio and also the images will be positioned one below another by filling all the space. If the “Masonry layout” option is disabled, you can set the image height in the “Thumbnail image height” field.

Customising the item thumbnails

The theme includes some options to change the appearance of the thumbnails, such as hiding the title/category of the thumbnails or removing some of the hover effects in the Gossh Options » Post & Page Settings » Portfolio Posts » Portfolio Thumbnail Settings section.

 

Portfolio Videos

 

 

 

 

 

 

 

 

 

Was this article helpful to you? Yes No

How can we help?