Adding Images to a Page

This article outlines how to upload, resize and position images on your website pages. You'll also learn how to insert icons from Oncord's extensive icon library, as well as managing interactive image galleries. 

Tip: Before uploading images to Oncord, consider optimizing them for use on the web - to improve page load speed and reduce storage and bandwidth usage.

Getting Started

Get started by editing the website page where the image will be placed: 

1. Navigate to Website > Pages in the left sidebar menu.
2. Select a page to open the visual editor, or create a new page, or clone an existing page.

Uploading an Image

To upload an image:

1. Click the Media button located in the left toolbar.
2. A media folder will appear, corresponding to the current page. To upload elsewhere, use the breadcrumb menu or create a new folder using the + Folder button.
3. Click Upload Files, and select the image(s) you'd like to upload.
4. After uploading an image, drag the image from the left media panel directly onto the page.

Tip: Dragging an image over an existing image will replace it.

Adding an Image Element

1. Click the Insert button located in the left toolbar.
2. Under the Common heading, drag the Image element onto the page.
3. Select the image element, then click the arrow icon and choose Edit.
4. In the left panel, select an image from:

• Oncord’s free stock image library
• Previously uploaded media
• Or upload a new image
  

Resizing and Positioning Images

To resize and position an image:

• Click the image to display resize handles.
• Drag a corner handle to resize proportionally.
• Drag a side handle to crop horizontally or vertically.

Alignment Options (Top Toolbar)

• None: Content will not flow around the image. 
• Left / Right: Content flows around the image.
• Center: Image is centered, and content does not flow around the image.
• Stretch: The image stretches to fill the width of its container.
• You can also define specific width or height values in either pixels or percentages.

Tips:

• For responsiveness, consider using the Stretch option to allow images to scale with screen size.
• Using a Row/Column layout element provides better control of positioning, than the alignment settings alone. Not just for images!

Adding Icons to a page

To insert an icon from Oncord's built-in icon library:

1. Click the Insert option in the left toolbar.
2. Locate the Icon element, found under the Common heading.
3. Drag the icon element into position on the page. 
4. Select the icon, then click the arrow icon and choose Edit.
5. In the left panel, adjust the icon type, size, and appearance.
6. Adjust the size of the icon by using the resize handles.

Adding a Gallery to a Page

The gallery element allows you to display multiple images in a responsive, interactive layout.

To add a gallery:

1. Click the Insert button in the left toolbar.
2. Locate the Gallery element, found under the Layout heading.
3. Drag the Gallery element into position on the page.
4. Replace placeholder images with uploaded media or stock images.

To update the gallery:

• Add images by dragging them into the gallery.
  
• Replace images by dragging over an existing image.
  
• Remove images using the delete key, or the element’s menu.

Gallery Options

Responsive Items Per Row

Defines the minimum and maximum number of images to display per row, based on screen width.

• Example: A value of "4 - 6" allows the gallery to adjust between 4 and 6 images per row, depending on the screen size.
• A fixed value (eg. "4 - 4") locks the row to exactly 4 items per row, if space allows.

Gallery Spacing

Controls the amount of space between items within the gallery.

Gallery Sizing Tolerance

Determines how much image sizing can be adjusted to create even rows. Useful when working with images of varying aspect ratios.

Enable Modals

When enabled, clicking on an image will open it in a modal (lightbox) view.