What are the project details and how to use it for portfolios?
Project details is a special kind of TheGem custom fields used for personalizing portfolio items/projects by adding additional data / information about your project. Using project details it is possible to add different type of additional content fields per project basis and personalize these fields with project individual values.
You can check some examples of using project details for personalizing portfolio pages in this examples:
And here is an example of displaying project details fields in portfolio grids/listings:
How To Add Project Details?
In TheGem’s Theme Options you can add project details for portfolio pages as follows:
1. Go to Theme Options -> Single Pages -> Portfolio Page
2. Scroll down to the “Project Details” section
3. Enable project details in “Add Project Details”
Now you can add your first project detail.
Label: This is the field label which will appear in Page Options → Portfolio Item Settings -> Project Details in portfolio items
Field Type: Select between “text”, “number” or “link” field type. Fields with “number” type can then be automatically formatted using WP Locale or custom locale specified in “Custom Fields” element.
Name (Meta Key): This is the field name (meta key).
Default Value: Appears when creating a new portfolio item
Apply on All: In case you wish to apply the default value changes to all existing projects
You can add multiple project details by clicking on “Add Field” button.
After saving your project details in Theme Options:
1. Go to edit any portfolio page
2. Scroll down to “Page Options”
3. Click on “Portfolio Item Settings”
4. In “Project Details” section you can see the project details added in Theme Options and now you can fill these fields with the respective personalized values.
Note: the values for the “number” fields should be entered without thousands separator; for decimals use (.), e.g. instead of writing 9.999.999,99 write 9999999.99. This is important for automatically applying the WP Locale for number formatting when displaying these numbers in portfolio grids and for displaying the number range filter in portfolio grids filter (see chapter “Portfolio Grid” ).
How To Display Project Details In Portfolio Page?
You can display project details in your portfolio page template, portfolio page or in portfolio grids/listings.
Portfolio Page Template
With TheGem templates builder you can create global templates for portfolio pages. When creating/editing the template for portfolio page, you can use “Project Meta/Details” content element to add project details:
In the repeater control of this element you can add multiple project details. Using the “Type” field you can select which project detail field to display. You can choose between different customizable pre-built design skins and layout for displaying project details:
Learn more about portfolio page templates in “Portfolio Page Builder” chapter.
Portfolio Page
You can also use project details to be displayed in the content of the portfolio page.
Dynamic Tags (Elementor)
While editing the content of your portfolio page in page builder, you can use any content elements and activate “Dynamic Tags” option to display the values of the project details fields. For example, let’s add the “Project Info” element to the portfolio page:
By default, the repeater items in this content element are static. However, you can activate the Dynamic Tags for title/description, select “Project Detail (TheGem)” as the source and select the respective field to display:
In the same way you can use the project details with any content element. Check “Dynamic Tags” chapter for more details on how to use dynamic tags with custom fields and project details.
Dynamic Data (WPBakery)
In TheGem WPBakery you can use following content elements to display project details using dynamic data source:
- Project Info
- Infotext
- Heading
- TheGem Button
- Custom Fields (manual input)
Let’s check for example “Project Info” element with dynamic data source. After adding this element to your portfolio page, open any of the repeater items and select project details in the “Source” field. After that you can select respective project detail field to be displayed:
In the “Field Type” field you can choose between “Text” and “Number” field types. Use “number” to auto-format the number values according to your current WP Locale
Another example is the “Custom Fields” element. After adding this element to your content, select “Manual Input” in the “Source” field. After that, in the repeater control, you can add multiple fields and select these fields by entering the field’s name:
Check more details in “Dynamic Data (TheGem WPBakery)" chapter.
How To Display Project Details In Portfolio Grid/List?
To display your portfolios you can use “Portfolio Grid” content element as described above in section “How to display portfolio?”
After adding the Portfolio Grid, go to the “Caption” settings section and activate Project Details:
Project details are organized as a repeater control, allowing you to show multiple different project details in grid items.
Following settings are available:
Details Layout
Select between vertical or horizontal (inline) layout for displaying project details
Title
Specify the title/label of the project detail
Type
You can select between Project Details, TheGem Custom Fields (see description on chapter “Custom Fields”), ACF/Toolset custom field groups and taxonomies.
Select Field/Taxonomy
Choose the field (or taxonomy) to be displayed in the item’s caption
Field Type
Select between “text” and “number” field type. The “number” field type helps to auto-format the number values when displaying in grid using the current WP Locale (see description on chapter “Custom Fields”).
Prefix/Suffix
Optionally add prefix/suffix to the “number” value
Icon
Optionally select an icon for the selected field/taxonomy.
How To Use Project Details To Filter Projects?
In the “Filters & Sorting” section of the Portfolio Grid element you can activate the extended AJAX filter including different project details and taxonomies. In the “Attributes” setting you will find a repeater control for adding multiple different filter attributes:
Following settings are available:
Title
Specify the filter’s title
Filter By
Choose between taxonomies, project details, TheGem Custom Fields (see description on chapter “Custom Fields”) and ACF/Toolset custom field groups
Select Field/Taxonomy
Choose the field or taxonomy for filtering
Field Type
Select between “text” and “number” field type. The “number” field type helps you to display slider control (like price range slider) in filter:
