The Advanced Portfolio Gallery widget is a powerful tool for creating filterable, dynamic, or manually curated portfolios to showcase your work. It supports both the Digishift custom “Portfolio” post type and manual selections, offering extensive styling options for a professional presentation.

Content Settings: #

Choose the source and behavior of your portfolio items.

Display Type: #

• Dynamic (From Portfolio Post Type): (Default) Automatically pulls items from the Portfolio posts that are in the WordPress admin. This is ideal for a main portfolio section.
• Manual Selection: Allows you to hand-pick specific images and add custom details, perfect for a curated highlight reel.

Dynamic Settings (When “Dynamic” is selected) #

• Number of items: Set how many portfolio posts to display.
• Order By / Order: Control the order of items (e.g., by Date, Title, ASC/DESC).
• Categories: Filter the dynamic content to show only items from specific portfolio categories.

Manual Settings (When “Manual” is selected) #

Portfolio Items: Click ‘Add Item’ to create manual entries.

• Title: Add a project title.
• Image: Upload the project image.
• Link: Set a URL for the item to link to.
• Category: Enter a comma-separated list of categories for filtering (e.g., Web Design, Development).

Common Options #

• Show Filter: Enable a clickable filter bar above the gallery, allowing visitors to sort items by category (e.g., ALL, WEB DESIGN, DEVELOPMENT).
• “All” Filter Label: Customize the text for the default “Show all” filter button.
• Show Title: Toggle the visibility of the project title on the gallery item.
• Show Lightbox: Enable to allow users to click an item to view it in a full-size lightbox popup.
• Show Link / Title Linkable: Control if the item links to its single portfolio page.

Content Tab: Layout Settings #

This section defines the structural arrangement of your gallery grid.

• Columns: Select the number of projects to display per row (e.g., 3).
• Gallery Distance: Adjust the vertical space between the category filter and the start of the image grid.
• Item Height: Set a specific height in pixels for the gallery item containers.
• Gallery Item Gap: Control the horizontal and vertical spacing between individual projects in the grid.
• Border Radius: Round the corners of the gallery items by entering pixel values for the Top, Right, Bottom, and Left corners.

Style Tab #

The Style tab provides detailed control over the filter bar and the gallery items themselves.

Filter Styles #

Style the category filter buttons.

• Typography: Control the font for the filter text.
• Text Color: Set colors for Normal, Hover, and Active states.
• Background Color: Set background colors for different states.
• Padding: Adjust the internal spacing (Top, Right, Bottom, Left) of each filter button to control its size and clickable area.
• Border Type & Radius: Add and style borders. Use high radius values (e.g., 30px) to create pill-shaped buttons.
• Filter Row Gap / Column Gap: Control the spacing between the filter buttons.
• Box Shadow: Apply a shadow effect to the portfolio items.

Overlay Styles #

Style the overlay that appears when hovering over a portfolio item.

• Background Color: Set the color and opacity of the overlay background. This is crucial for ensuring text readability on hover.
• Title Color: Set the color of the project title that appears on the overlay.
• Typography: Style the font of the overlay title.

Icon Styles #

Style the lightbox and link icons that appear on the overlay.

• Icon Size: Control the size of the icons.
• Icon Color: Set the color of the icons in Normal and Hover states.
• Icon Background: Set a background color for the icon container.
• Border Type: Choose a border style or keep it as the default.
• Border Radius: Make the icon background circular (e.g., 50%) or rounded.

Common Use Cases #

• Main Portfolio Page: The primary use case is to create a dynamic, filterable grid of all your portfolio projects.
• Featured Work Section: Use the Manual Selection mode to curate a specific set of best projects on your homepage.
• Case Study Gallery: Showcase projects within a specific case study page.
• Category-Specific Gallery: Use the dynamic source filtered by a single category to create a dedicated page for a specific type of work (e.g., only “Web Design” projects).

Example Output #

The widget outputs a fully interactive gallery:

• A row of filter buttons (if enabled).
• A grid of portfolio items. Clicking on the icon item reveals an overlay with the project title and action icons (zoom/link).
• Clicking a filter button dynamically filters the grid to show only items from that category.
• Clicking an item either opens a lightbox, links to the project page, or does nothing, based on your settings.