Table of Contents

Use images in a UI view template

In order to use images in a Neos application you must :

  • (optional) Add a SVG image file to the images folder of a cluster module
  • Declare the image in the cluster module
  • Use the image component in a UI view template of the cluster
Note

For programmatic access to images (e.g., in navigation options, action icons), use the strongly-typed Images class. See Typed IDs for UI Elements for more information.

Standard images / Custom images

Two types of images can be used in a Neos application :

  • Standard images provided by the framework
  • Custom SVG images

Standard images

Standard images are directly provided by the framework.

Custom images

Customs images can be added to a module by adding the SVG file in the images folder of a cluster module.

Example :

If we want to add a Customer image for a module Partners of a cluster, we need to add a Customer.svg file inside the modules\Partners\images folder of the cluster.

Standard images can be overloaded by adding the SVG file in the images folder of a cluster module.

Example :

If we want to overload the Add standard image of a cluster, we need to add a Add.svg file inside the images folder of a module of the cluster.

Declare an image in a cluster module

In Neos Studio, you can add images by opening Frontend/Images in the explorer.

Name is the name of the image witch will be used by the image component.

Note

If you want to use a custom image, the name should be the same as the SVG file name (ex: Customer for a Customer.svg image file).

Standard image (optional) is the name of the standard image you want to use. If you overload a Standard image this field must be left empty.

Use the image in a UI view template

To use your image in a UI view template, you just need to add an image node with the name attribute corresponding to the image you want to display.

Example :

<image name="Customer" />

Programmatic access to images

For programmatic access (in C# code), use the typed Images class instead of string literals:

// In navigation options
.WithIconId(Images.Customer)

// In action configuration
Actions.AddCustomer.IconId = Images.Customer;

// In UI view methods
return Images.Customer;

See Typed IDs for UI Elements for comprehensive information about using typed identifiers.