Search

Layouts API Reference /developer-docs/api-reference/common/layouts Layout Categories API Reference /developer-docs/api-reference/common/layout-categories Layouts /books/layouts-and-components/layouts Layouts /books/user-documentation/customization/layouts The layout chooses the template /books/start-here/request-to-template/layout-chooses-the-template Page and component layouts /books/layouts-and-components/layouts/page-and-component-layouts Layout areas, groups and attributes /books/layouts-and-components/areas-groups-attributes A checklist for a well-built layout /books/layouts-and-components/areas-groups-attributes/layout-checklist What a layout is, field by field /books/layouts-and-components/layouts/layouts-and-areas Layout Categories /books/user-documentation/customization/layout-categories Create the layout /books/start-here/first-page-end-to-end/create-the-layout Pattern: attributes to CSS classes /books/layouts-and-components/patterns/layout-patterns The chain from input type to template /books/layouts-and-components/the-model/the-layout-model Thumbnails, categories and the author's picker /books/layouts-and-components/layouts/thumbnails-and-categories Development starts with a layout /books/start-here/building-on/starts-with-a-layout The fields of a layout area /books/layouts-and-components/areas-groups-attributes/layout-area-fields Custom fields or layout areas /books/content-types/fields/custom-fields Site scoping, identifiers and hiding /books/layouts-and-components/layouts/sites-identifiers-hiding Reserve layout space with the aspect ratio to avoid layout shift A resized image rendered with getHtml() gets width and height attributes automatically, which is all a browser needs. For unresized images and for wrappers, use getWidth(), getHeight() and an aspect-ratio style. /how-to/reserve-space-aspect-ratio Input types, layouts, components and images /books/layouts-and-components Build your first standalone component A component layout is a layout with no controller whose template lives under components/. Create the template, register the layout, add it to a collection's supported layouts, and read your areas from component. /how-to/first-component The model, end to end /books/layouts-and-components/the-model Input types: what an editor can enter /books/layouts-and-components/inputs Renaming and retiring without losing content /books/layouts-and-components/patterns/renaming-and-retiring The shorthand, and working with each input type /books/layouts-and-components/shorthand Images end to end /books/layouts-and-components/images Patterns, live preview and upkeep /books/layouts-and-components/patterns Create your first layout and template, from the admin to the repo Deploy the template file first, create the layout that points at it in the admin, add the layout areas, then create a page that uses it. The admin only offers templates that already exist on the server. /how-to/first-layout-and-template Add a layout area and render it in the template Add the layout area to the layout in the admin with a permanent name, an input type and an editor-facing label; it appears empty on every record using the layout. Then read it with the getter for its type. /how-to/add-a-layout-area Add a component collection an author can fill A collection is a layout area whose input type has the collection category. Add it to the layout, name the component layouts it accepts, and loop its elements in the template, rendering each element's component. /how-to/component-collection Restrict which components an author may add to a collection Supported layouts on the layout area decide what the add menu offers. Fill them in on every collection and component area; an empty list offers every component layout on the site, including the block itself. /how-to/restrict-collection-components Read a page with its sections and images in one request One GET with properties returns a page's name, address, layout and every layout area, with the components and image paths inside them. Read it by path, walk the collection by component layout, and take each layout area's value from the key its input type uses. /how-to/read-a-page-in-one-request One table, four types /books/content-types/built-in-content-types/built-in-types Resizing, converting and rendering an image /books/layouts-and-components/images/in-templates Image settings /books/layouts-and-components/images/settings Where content is stored, and what a change does to it /books/layouts-and-components/the-model/where-content-lives How a form is put together /books/forms/building/structure Components, collections and global components /books/layouts-and-components/components-and-collections Rendering areas in templates /books/layouts-and-components/rendering-areas Add the platform's form scripts to a form layout Load js-forms.js and its stylesheet with the page's nonce, wrap the steps in a .coredna-js-form container, print the form's conditionals for js-forms-conditionals.js, add js-payment-element.js for a payment, and point the container at a result callback, so a failed submission shows its errors to the visitor. /how-to/add-the-form-scripts-to-a-layout Core dna for site builders /books/start-here How the area shorthand resolves /books/layouts-and-components/shorthand/area-shorthand Limits of the shorthand, and the rule /books/layouts-and-components/shorthand/shorthand-limits Resize strategies /books/layouts-and-components/images/resize-strategies Image URL parameters /books/layouts-and-components/images/url-parameters Compression, image services and imported images /books/layouts-and-components/images/compression-and-services Live preview and testing in-place editing /books/layouts-and-components/patterns/live-preview Naming conventions and auditing a site /books/layouts-and-components/patterns/naming-and-auditing A component gallery for authors /books/layouts-and-components/patterns/component-gallery Nesting components, and what depth costs /books/layouts-and-components/components-and-collections/nesting