The content engine of eZ Publish allows you to create relations between different objects. For example, it is possible to relate an image object to an article. The Online Editor makes it possible to insert related objects into the XML structure so that they become embedded objects. This functionality can be used to embed any type of object in the XML.

The "Object" button allows you to insert new and edit existing embedded objects. This button is located in the "Special Tools" area of the OE toolbar (look at the following screenshot).

The "Object" button

Embedded objects are inserted as block elements. A block element always begins on a new line when it is displayed. It exists in its own virtual box and is always followed by a carriage return (like if someone hit the "Enter" key after inserting the object). Even though the OE sometimes displays images as if they were inline elements, the images will become block elements in the resulting XHTML.

Please note that the system will use the " embed" XML tag for embedded objects.

Inserting an object

1. Position the cursor at a location where you wish to add an object. Click the "Object" button. You can also right click and choose the "Insert object" item from the context menu.

   Please note that it is not possible to insert an image directly inside the text without breaking it. An image can not be inserted in the same line as heading. It is recommended to create a new paragraph before inserting an image.

2. You will see a modal dialog showing a list of related objects. If there are no relations, the list will be empty. This is shown in the screenshot below.

    

   

   Online Editor: the list of related objects is empty.

   
   If the necessary object is not in the list of related objects, perform the instructions of the subsection " Adding a related object to the list", otherwise select the desired object from the list and specify its embedding properties (look at the next screenshot).
   

   

   Online Editor: the "Insert object" dialog.

   
   The screenshot shows a modal dialog with a list of related objects at the top and a table of attributes at the bottom. The related objects are arranged in two sections: "Related images" and "Related content". The related image "marble" is selected. The attribute table shows the default properties for embedding this Image object. These attributes generally correspond to the parameters of the " embed" tag. There are five built-in attributes (Size, Alignment, Class, View, and ID). These are described below.

3. Set the desired properties and click the "OK" button. The inserted object will appear in the OE text area. Image objects will appear as images, all other objects will appear as special icons (as shown below).

   

   The "Embedded object" icon

Size

Available for image objects only. You can choose a size for the embedded image. The default sizes are:

• reference (600x600 px)
• small (100x100 px)
• medium (200x200 px)
• large (300x300 px)
• rss (88x31 px)
• original

Note that "reference", "small", "medium", "large", "rss" may decrease the size of the image but they will not increase it. "Original" will keep the original image size. These default sizes are specified in the "image.ini" configuration file. These can be re-configured from within a configuration override for this file. More information about image variations can be found in the reference documentation of the "Image" datatype.

Alignment

You can choose "center", "left" or "right" positioning of the embedded object. The selection will result in a CSS class that will be used in the resulting XHTML.

Class

This parameter allows you to specify a custom stylesheet that will be used for the embedded object.

View

You can choose the view that should be used to render the embedded object. For example, if you insert an image object, the "embed" view will show the image along with its caption, the full view will display additional information such as the object name, current version, etc.

ID

It is possible to assign a unique identifier to the embedded object (it will become the ID attribute in the resulting XHTML code).

You can add custom attributes by clicking the "New attribute" button. To remove custom attributes, select one or more attributes using the checkboxes and click the "Remove selected" button.

Classified objects

To set the " class" parameter for an object, edit its properties. This is described in following text.

Embedded object properties

You can edit the properties of the embedded objects. To do this, click on an embedded object so that it will become a selected element (you will see that it will be encapsulated in a rectangular frame). Click the "Object" button. The dialog that was described earlier will appear. The currently selected object will be highlighted in the list of related objects. You can make changes in the property table. You can also select another related object for inserting instead of the current one. The changes will take effect after clicking the "OK" button.

Please note that you can also edit the embedded object by right clicking on it and choosing the "Properties" item from the context menu (this is shown in the screenshot below).

Online Editor: accessing the properties of the embedded object.

Adding a related object to the list

If the needed/desired object is not in the list of related objects, you should add it by using one of the two buttons located below the list itself. It is possible to either add/relate an already existing object or upload a new file and use that as a related object.

Uploading new objects

The "Upload new" button makes it possible to create a new related object from a local file. Click this button and choose a file (for example an image). The dropdown list allows you to choose where the newly created object should be placed. This is shown in the screenshot below.

Upload related content.

After clicking the "OK" button the system will upload your file, place it at the selected location and relate it to the object that is currently being edited. Once this is done, the object (the uploaded file) is ready for use. Please refer to the " Inserting an object" section for details.

Adding existing objects

The "Add existing" button makes it possible to relate existing objects to the one which is currently being edited. When you click this button, you will see a modal dialog called "Choose objects". This dialog will display the nodes that are located inside the "Content structure" tree. The dialog is shown in the following screenshot.

Browse for related objects.

Use the list to select the node which encapsulates the object that you want to use. Please note that it is possible to select multiple nodes/objects at the same time. You can navigate the list by clicking on the names of the nodes. If the desired node is located outside the "Content structure" tree then simply click the up arrow icon/button until it brings you to the root of the tree. This operation will allow you to for example switch to the "Media library" tree and select images that are located there. The following illustration shows the up-arrow.

The "Up" button

It is possible to reconfigure how the list is displayed. For example, you can set the quantity of objects per page by clicking the "10" / "25" and "50" links. If you wish to browse image objects as thumbnails, simply click the "Thumbnail" button.

Please note that your bookmarked objects will also be displayed and thus they can also be selected. When you're finished selecting the desired object(s) (simply use the checkboxes to do this) click the "OK" button. The system will then relate the selected object(s) to the one that is currently being edited. Once this is done, you can insert the related objects as described in the " Inserting an object" section.

It is not necessary to use the Online Editor every time you wish to add related objects. The "Related objects" window located towards the bottom of the object edit interface can also be used to manage the object relations. This interface is shown in the screenshot below.

The "Related objects" window.