Portfolio region

This section will guide you how to create the Portfolio page.

A. Create Image style

Step 1 Go to Configuration

Step 2 In MEDIA area > Image styles, click "Add style" link an set following properties:

Step 3 Click "Create new style" button.

Step 4 Under Effect, Select "Scale and crop" effect

Step 5 Click Add button > New popup is opened, set following properties:

Step 6 Click "Add effect" button.

Step 7 In MEDIA area Image styles, click "Add style" link an set following properties:

Step 8 Click "Create new style" button.

Step 9 Under Effect, Select "Scale and crop" effect

Step 10 Click Add button > New popup is opened, set following properties:

Step 6 Click "Add effect" button.

B. Create content type and add sample content

Step 1 Go to Structure > Content type > Click "Add content type" link, set following properties:

Step 2 Cick "Save and add field" button, new window is opened > add "Portfolio Image" field with following properties:

Step 3 Cick "Save " button > click "Save field settings" button. A new window is opened > set following properties:

Portfolio image

Step 4 Click "Save settings" button. Manage fields window is opened, add a new field with following properties:

Step 5 Click "Save settings" button.

Step 6 Click "Manage display" tab, at default tab set following properties:

Step 7 Click "Manage display" tab, at teaser tab set following properties:

Step 8 Click "Save" button.

Step 9 Go to Content. Click "Add content" link. Choose "Portfolio" link.

Step 10 Add a portfolio with following settings:

Step 11 Repeat steps 7-8 to add several portfolios.

C. Create View

Step 1 Go to Structure > Views. Click "Add new view" link, set following properties:

Step 2 Click "Save and edit" button. New window is opened, set following properties:

Step 3 In Format area click "setting" link and set following properties:

Step 4 In Fields area click "Add" link. Add "Content: Category" field with following properties:

Step 5 In Fields area click "Add" link. Add "Content: Portfolio image" field with following properties:

Step 6 In "FILTER CRITERIA" area click "Add" link. Add "Content: type" field > select "Portfolio" set following properties:

Step 7 In "Header" area click "Add" link > select " Global: Text area" fields. Click "Apply (All display)" button.

Step 8 New window is opened> set following properties:

HTML code:
          

Below are some of our best design works we have done for client

Step 9 Click "Save" button.

Step 10 Go to Block. Find "Portfolio view" block and assign it to Portfolio region.

D. Asign region style

Step 1 Go to Appearance . Click "Setting" link under TB Page

Step 2 Click Regions settings tab and set following properties: