Create a component template to embed an image listing

In the Paint Layouts section (or the area where you keep your design assets) create a component template asset.

Click New child  Design & Layout  Content Template.

Enter a name for the asset and select Save. For example, "Image Listing".

Create the following associated template assets as child assets of the Image Listing content template using the same "Image Listing" name for consistency:

Start by going to the Details screen of the Component Template asset.

Acquire the locks and configure the following fields:

Go to the Details screen of the Metadata Schema and get the locks.

Create a new Section called "Settings".

In this section, create the following Metadata Fields:

Edit the Source screen field settings:

Edit the Details screen field settings:

Open the Edit Contents screen of the Custom edit layout and grab the locks.

If it isn’t already, convert this component from a WYSIWYG component to Code.

We still want to let the user to input free content into this container in addition to the new metadata fields we created, so the first keyword we’ll put in is %__custom-contents%. This keyword prints the standard editing area of the component. So for example, if the container is a WYSIWYG type, that keyword is replaced by a WYSIWYG content editing area.

Then we’ll want our metadata fields to follow underneath the editable content, so we’ll just add a keyword to print all editable metadata from the Metadata Schema we are applying: %metadata-F_metadata_values%. This keyword prints the editing fields for all of our metadata fields defined in our Metadata Schema.

Go to the Edit Contents screen of the Default Format component located under the Type Formats folder of the Paint Layout.

If it isn’t already, convert this component from a WYSIWYG component to Code.

In this first container, we just want to print the raw contents of the asset (the component to which the template is applied). So all we’ll put here is the asset contents keyword: %asset_contents%

Now we’ll nest our Asset Listing in, so insert another component after our first one and make it a Nested content type.

Select our Asset Listing asset we created previously as the asset to nest.

Go to the Details screen of the Asset Listing and select Edit.

Set Asset Types to List to Image. No need to select Inherit.

Set Root Nodes to the area where your images are stored. Or you can set it to 1 to list images from anywhere in the system (remember that the root node is dynamic), but only as long as If dynamic root not found is set to Return empty result.

Scroll down to Assets Per Page and enter %globals_asset_metadata_max^empty:5%. This keyword grabs the metadata value from the max field we created in our Metadata Schema. The ^empty:5 keyword modifier also gives us a fall back in case the value is empty for some reason.

In the Dynamic Parameters section, add a new parameter of type Replacement Root node for the listing and set the source to Set Value.

Select Save and scroll down to the Dynamic Parameters section again.

In the Set Value field enter %globals_asset_metadata_source%. This keyword gets the metadata value from our source field in our Metadata Schema.

Go to the test standard page in Edit+ and view the Contents screen.

Click to open the Edit component properties popup of the component and in the Template field select our Image Listing template.

Select Save and wait for the screen to reload. We should now have our template applied and see our Simple Edit Interface in effect, similar to this:

We can now enter some free text into the WYSIWYG area above, as well as interact with our 2 Metadata Fields (similar to how you do it on the Metadata screen). For example:

Save the screen and then review the page in Preview mode. The images in the example are listed as simple text links because we have not yet configured the type format of the Asset Listing.