OPF
CatalogsLayouts recordView source

Image beside

Explain a visual alongside its supporting text. Use the text to direct attention to the meaningful parts of the image.

Metadata

ID
image-beside
Catalog
layouts
Source
catalog/layouts/image-beside.json

Attributes

FieldValue
tagsVisuals
areas[ [ "title", "title" ], [ "media", "body" ] ]
columns1, 1
rowsauto, 1
regions{ "media": { "accepts": [ "image", "video" ], "role": "media", "flow": "none" }, "body": { "accepts": [ "text", "list", "metric", "quote", "group" ], "role": "primary", "flow": "auto", "anchor": "middle" } }
preview{ "vectorSrc": "https://www.pptx.gallery/layout-previews/image-beside.svg" }
design{ "imageFit": "contain" }

Source JSON

image-beside.json
{
  "$schema": "https://openpresentation.org/schema/opf-layout/v2",
  "id": "image-beside",
  "name": "Image beside",
  "summary": "A picture or video beside text.",
  "tags": [
    "Visuals"
  ],
  "areas": [
    [
      "title",
      "title"
    ],
    [
      "media",
      "body"
    ]
  ],
  "columns": [
    1,
    1
  ],
  "rows": [
    "auto",
    1
  ],
  "regions": {
    "media": {
      "accepts": [
        "image",
        "video"
      ],
      "role": "media",
      "flow": "none"
    },
    "body": {
      "accepts": [
        "text",
        "list",
        "metric",
        "quote",
        "group"
      ],
      "role": "primary",
      "flow": "auto",
      "anchor": "middle"
    }
  },
  "description": "Explain a visual alongside its supporting text. Use the text to direct attention to the meaningful parts of the image.",
  "preview": {
    "vectorSrc": "https://www.pptx.gallery/layout-previews/image-beside.svg"
  },
  "design": {
    "imageFit": "contain"
  }
}