Skip to main content

Session Template

The session template in PhotoBerry Studio defines how sessions are displayed on the frontend. It includes essential information like the session title, date, welcome message, and more, offering a clean and user-friendly layout.

How It Works​

Compatibility with Themes​

The session template has been tested with several popular themes, including both block-based and non-block-based themes. While it is designed to work across a variety of themes, the display may vary slightly depending on the theme you’re using. If you encounter any display issues, please contact our support team for assistance.

Elements​

  1. Header

    • The session template includes a header: website name, action buttons, a link to logout (if the user is logged in), and a link to view the page with all the client's assigned sessions. The authenticated client (if any) will be shown at the top right of the session header, indicating who is logged in and viewing the session.

  2. Session Title and Date

    • The session title and date of the photoshoot or event are displayed prominently at the top of the session, making it easy for clients to identify their session.

  3. Welcome Message

    • If you've set a welcome message in the session settings, it will be displayed beneath the session title. This message can provide clients with additional context or instructions.

  4. Image Display

    • Images are displayed in the layout you select, such as grid, masonry, or cropped. You can refer to the Gallery Layouts article for more details on adjusting layouts.
    • If you have marked any images as suggested, these will be featured and highlighted in the session.

  5. Favorites

    • Clients can interact with the session by marking images as favorites. This allows them to easily indicate their preferred images. For more details, see Favorites

  6. Comments

    • Clients can leave comments on individual images, providing feedback or sharing thoughts directly in the session. For more information, see Commenting on Images.

Customizing the Session Layout​

Currently, the only way to customize the session layout is through the session settings by choosing a display option such as grid, masonry, or grid-cropped. More options for customizing the styling and layout will be coming soon.

Using CSS Variables for Styling​

We have introduced CSS variables that control various aspects of the session's styling, such as font sizes, colors, and layout. While these variables cannot be changed directly, you can add custom CSS to your theme to overwrite the existing variables.

Here are some of the available CSS variables:

:root {
  --ps-font-size               : 13px;
  --ps-h1-font-size            : clamp(22px, 32px, 1.8vw);
  --ps-h2-font-size            : clamp(20px, 28px, 1.7vw);
  --ps-h3-font-size            : clamp(18px, 24px, 1.5vw);
  --ps-h4-font-size            : clamp(16px, 22px, 1.4vw);
  --ps-primary-color           : #f0eee7;
  --ps-font-color              : #160342;
  --ps-secondary-color         : #6b7094;
  --ps-background-color-header : #fff;
  --ps-background-color        : #fff;
  --ps-box-shadow-header       : 0 0 10px rgba(73, 67, 196, 0.09);
  --ps-logo-font-family        : "Roboto";
  --ps-font-family             : "Roboto";
  --ps-logo-font-weight        : 600;
  --ps-logo-font-size          : clamp(16px, 25px, 1.5vw);
  --ps-max-section-width       : 1800px;
  --ps-section-width           : 90%;
}

To customize the session template, you can add custom CSS to your theme or use WordPress custom CSS functionality to overwrite these variables with your preferred values.

Conclusion​

The session template in PhotoBerry Studio is designed to offer a seamless viewing experience for clients while allowing photographers to manage their sessions effectively. Currently, layout customization is available through session settings, with more styling options coming soon. If you have any issues or need assistance, feel free to contact our support.