Adding Images to a Page

To get started：
Log in to your website dashboard and select the Pages option, which appears under the Website heading in the left sidebar.

Click the "New Page" button on the top of the page and configure a new page, or select a existing page from the list of pages.

Uploading Your Image

After opening the page editor, click the "Insert" button, located in the left-hand toolbar.
Drag the image box to the place on the page where you want the image to sit.
The sidebar will then give you the option to input an Image URL, select an image From Stock, From Media (previously uploaded files), or Upload a File.
Choose the necessary option and the image will display wherever the image box was placed.

When you upload an image to a page in Oncord, the image is stored in the attached media folder for that particular page. Images uploaded on one page won't appear in another pages attached media folder.

Resizing and Positioning Images

After placing an image on the page, you can resize it and choose how it interacts with elements around it.

Click the image to display a sizing tab in the bottom right-hand corner, and positioning handles on the bottom and the right-hand sides.

Adding Icons to a page

To add a generic image from an image library click the insert option from the toolbar on the left-hand side of the page.

Select the icon element in the insert toolbar and drag it onto the page where you want the icon to sit. A new window will open up where you can adjust the size of the icon and search for the icon you need from the icon library.

Adding a Gallery to a Page

A Gallery is an element that allows you to present photos in a space-efficient and visually attractive way, with image grid support and an integrated modal.

To add a Gallery to a page:

• In the page editor, click the “Insert” button in the left panel.
• Under the “Layout” heading, drag and drop the "Gallery" element into the page editing area (typically into a section) on the right.
• By default, the gallery element contains two rows with 6 image placeholders in each row (12 images  in total).

• You can then add image to each placeholder.

Gallery Options:

• Responsive Items Per Row: This option sets the number of images on each row within a specified range, attempting to choose the best number for the available space.
  • Example: a value of '4,6' tells the gallery to have between 4 and 6 items on each row, choosing the best number within that range according to the available space. A value of '4,4' tells the gallery that it can only have 4 items per row (if possible) at all times.

• Gallery Spacing: Controls the amount of space between images in the gallery.

• Gallery Sizing Tolerance: Determines how much image sizing can be adjusted to create balanced rows. It's helpful especially when images are in different aspect ratios.

• Enable Modals: When this option is enabled, it opens each image in a modal (light or dark box) view when clicked.