The Portfolio block: Content and Layout

Adding the block

The Sparrow Portfolio block shows your projects on any page, post or template. One page can hold several blocks, each with its own settings.

Add it

1. Open a page in the block editor.
2. Click + and choose Sparrow Portfolio, or type /sparrow on an empty line.
3. Select the block and open the Block tab in the right sidebar.

The settings panel

The settings are grouped into four panels and a Tools section. Click a panel to open it.

Panel	What it controls
Content	Which projects are shown and in what order
Layout	Layout type, columns, gap, projects per page, where the text sits on a card
Toolbar & Pagination	Category filter, sorting, search, pagination, AJAX
Style	Thumbnail, overlay, title, category, date, hover and scroll effects, video
Tools	Custom CSS and the shortcode

Many settings sit on cards with a switch and a small arrow. The switch turns the element on or off; clicking the card opens its options in a window to the left of the sidebar.

Screenshot

The preview in the editor follows your settings.

Content

The Content panel chooses which projects the block shows, their order, and what happens when there are none.

Screenshot

Source

Setting	Options	Default
Show	All Projects, By Category, By Author, By ID	All Projects
Category	Appears for By Category: pick one category	none
Author	Appears for By Author: pick one user	none
Select Post	Appears for By ID: search projects by title and add them one by one	none
Order By	Date, Title, Menu Order, Random	Date
Direction	ASC (ascending) or DESC (descending)	DESC

Notes on each source:

• All Projects shows every published project.
• By Category shows one category. The category filter can still switch to other categories if you turn it on.
• By Author shows projects of one user.
• By ID shows only the projects you picked, in the order you added them.

The category filter is not available with By Author and By ID.

Order

• Date with DESC shows the newest project first.
• Title sorts alphabetically; ASC is A to Z.
• Menu Order uses the number in each project’s Page Attributes → Order. ASC shows the lowest number first. Projects with the same number fall back to their date, newest first.
• Random reshuffles on every page load.

Fallback

If No Projects Found decides what visitors see when nothing matches, for example an empty category.

Option	Result
Show a Notice (default)	A short “No projects yet” message in place of the grid
Hide the Block	The whole block, toolbar included, is left out of the page

In the editor the notice is always shown, so the block never disappears while you edit.

Layout

The Layout panel sets how projects are arranged and where the text sits on each card.

Layout Type

Four layouts are built in. Click a tile to switch; all other settings are kept.

Layout	What it looks like	Good for
Grid	Equal cards in columns, all thumbnails the same shape	Most portfolios
Masonry	Columns with thumbnails of their natural height, packed without gaps	Mixed portrait and landscape images
List	One row per project: title on the left, category and date on the right, no thumbnail	Text-first, minimal pages
Carousel	A horizontal slider with arrows and dots	Featured work on a home page

PRO add-ons add more tiles here, for example Sway Slider.

Screenshot

Display

Setting	What it does	Range	Default
Columns (Carousel: Slides)	Number of columns, or slides visible at once. Not shown for List	1–8	3
Gap (Carousel: Space)	Space between cards in pixels	0–80	24
Per Page	How many projects are shown before pagination or Load More takes over	1–40	6

On tablets (below 782 px) Grid and Masonry drop to two columns, on phones (below 480 px) to one.

Text Position

The Text Position button opens a window with five tiles. It is available in Grid, Masonry and Carousel.

Position	Result
Above	Title and meta text sit above the thumbnail
Below (default)	Title and meta text sit below the thumbnail
Overlay	Text sits on top of the image, over a tinted wash
Boxed	Text in a white card over the bottom of the image
Fade In	Like Overlay, but only appears when the card is hovered

Screenshot

Options in the same window:

Setting	What it does	Default
Position picker (Overlay and Fade In only)	A 3×3 grid that places the text block inside the image: top, middle or bottom, and left, centre or right	Bottom centre
Align	Text alignment: Left, Center, Right	Left
Meta	Where category and date sit relative to the title: Top, Left, Right, Bottom	Bottom
Title / Meta Gap	Space between the title and the category/date line. Vertical for Top and Bottom, horizontal for Left and Right	0.25em (1em for Left and Right)
Padding	Inner spacing of the whole text block; set all four sides at once or each side separately, in px, %, em, rem or vw	none
Border Radius (Boxed only, shown under the button)	Corner rounding of the boxed card	6 px

Screenshot

Slider settings

When the layout is Carousel, a Slider Settings button appears in the Layout panel and opens the slider options.

Setting	What it does	Default
Transition Speed (ms)	Duration of the slide transition itself	300
Loop	After the last slide the slider continues from the first	Off
Autoplay	Slides advance on their own	Off
Autoplay Delay (ms)	How long each slide stays before autoplay advances. Shown when Autoplay is on	3000
Mousewheel Control	Let visitors navigate slides with their scroll wheel	Off
Centered Slides	Center the active slide instead of aligning it to the start	Off
Show Navigation Arrows	Previous and next arrows at the sides	On
Show Pagination Dots	Dots under the slider, one per slide	On

Screenshot

Things to know:

• Slides in the Display group sets how many slides are visible at once; Space sets the distance between them.
• Pagination and Load More are not used in Carousel. Per Page sets how many projects are loaded into the slider.
• The slider script is downloaded only on pages that contain a Carousel, so grids stay light.
• In the editor the slider is shown as a static row. Check arrows, autoplay and looping on the published page.