> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/post-types/portfolio/creating-a-portfolio-item/side-portfolio.md). # Side Portfolio Gallery and description side by side. This layout features a horizontal separation between the gallery and the content, creating a side-by-side arrangement. The gallery is displayed alongside the project content, offering a clear distinction between visual and textual information.

## Side Portfolio Options After selecting the **Side Portfolio** item type, a new section will appear in **Parameters and Options** called **Side Portfolio**, along with custom **Project Gallery** options:

These options are specific to this portfolio type and allow further customization of the layout. ### Content Alignment By default, the content is aligned to the left. To change this, set the **Item Description Alignment** to **Right**. Additionally, you can adjust the width of the content container using the **Item Description Width** setting, one of *One fourth (1/4)*, *One third (1/3)* or *Half width (1/2)* of the wrapper container width.

### Sticky Description The description for the item can be set to stick to the top of the viewport, just below the header if it is sticky. Enable the **Sticky Description** option to keep the content aligned with the gallery while scrolling, enhancing the viewing experience.

### Stretched Gallery Container For a fullscreen gallery experience, you can stretch the gallery items to the edge of the viewport. Select the **Full Background** option in the **Gallery Type** to enable this feature and make the gallery extend to the full width and height of the viewport:

The result after enabling stretched gallery:

Please note that this effect is only visible on larger screens; on mobile devices, the gallery will retain its normal behavior. ### Stick Photos to Top **Stick Photos to Top** pins the gallery column to the top of the viewport instead of the description, which is the right way round when the description is the longer of the two. ### Gallery Columns Layout The gallery columns layout can be adjusted to use Masonry style of positioning items by enabling **Masonry Mode Gallery**. This will align the items and removes any unused gap:

## Project Gallery You can customize your Project Gallery with several options, including: * **Images Reveal Effect**: *None*, *Fade* or *Slide and Fade* as gallery items come into view. * **Image Spacing**: *Default spacing* or *No spacing (merged)*. * **Image Captions Position**: *Use from Theme Options*, *On hover* or *Below image*. * **Gallery Columns Gap**: The gap between items, in pixels.

The Project Gallery section lets you add various media types, including: * **Image**: Display a single image in your gallery. This is ideal for showcasing individual visuals or key elements of your project. * **Images Slider**: Add a slider containing multiple images. This allows viewers to scroll through a series of images, which is useful for showing different angles or stages of your project. * **Comparison Images**: Use an interactive slider to compare two images side by side. This is particularly effective for before-and-after shots or contrasting different design options. * **YouTube Video**, **Vimeo Video** and **Self-Hosted Video**: Embed a video, whether hosted on one of those platforms or uploaded to your site. Videos can include project demonstrations, tutorials, or any other relevant content. * **Text Quote**: Insert a text quote or message. This can be used to highlight key feedback, project descriptions, or significant statements related to your work. * **HTML**: Add custom HTML to include additional elements such as interactive widgets, forms, or any other bespoke features that enhance your gallery. These options allow you to create a versatile and engaging gallery for each portfolio item, showcasing your work in a dynamic and interactive manner. To add a gallery item, click **Add New** and select from the available media types:

Each gallery item type has its own set of options with inline explanations for their functionality and usage. {% hint style="info" %} The **Columned** item type shares the same gallery item options as the **Side Portfolio** type. {% endhint %}