A Single Place to Manage Images

To get started with the Asset Organizer, you’ll first need the requisite permissions for Assets (read, create, etc). Refer to our documentation on roles and permissions for more information.

Once you have the necessary access, open the Crystallize App and click the Assets button on the left-hand side of the screen. You can also bring up the command palette with CTRL+K or ⌘+K and type “Assets.”

Images that were previously added to catalogue items such as products, documents, and folders will be visible here, represented as thumbnails.

New image(s) can be uploaded to your tenant by either dragging/dropping them onto the Drag & drop assets icon or clicking on the icon and browsing to file(s). Compatible file formats are JPG/JPEG, PNG, WebP, TIFF, AVIF, and SVG. Each image is automatically resized, converted into multiple file formats, and uploaded to Crystallize’s global content delivery network (CDN). From there, it’s available to your whole tenant.

An image may be deleted from your tenant, but only if it’s not being used by any other item (products, documents, or folders) in any version (draft or published). To delete an image from your tenant, you can:

• Click the Select button at the top of the screen (or type the letter S), left-click the image thumbnail(s), then click the Delete selected button.
• Left-click on the image thumbnail, then click the action button (...) at the top of the screen and choose Delete.

Clicking on an image thumbnail gives you access to the following:

• Alt text and Caption. Here, you can add descriptive metadata to be used by your frontend(s). This data can be important not just for organizational purposes, but also for accessibility and search engine optimization (SEO) concerns.
• References. You can see the name and path of every item in your catalogue that uses this image. Clicking on each reference will take you to that item within the catalogue.
• Topics. If you’ve created any topic maps, you can assign topics to the image, tagging it with relevant keywords. (More on this below.
• Focal point. You can optionally define a point/coordinates in the image that you can later use to zoom or resize the image the way you want within a responsive layout. To do this, click the plus sign button (+) labeled Adjust the focal point of your image, then use the Focal point input sliders or text boxes to enter X- and Y-axis positions as percentage values. You can also enable the Show focal point toggle beneath the image thumbnail and manually position the gray focal point circle wherever you want it to be. This will populate the focal point values automatically.
• Showcases. You can optionally define showcases to relate items, product variant SKUs, hotspots, and/or metadata to an image. For instance, for a picture of a living room, you could define hotspots linking to each product in the display (couch, lamp, etc.). To do this, click the plus sign button (+) labeled Add showcase. To add items/SKUs, click the Add relations + button. This will allow you to browse through your catalogue and drag/drop products, product variant SKUs, documents, or folders into the showcase. To add a hotspot, click the Add hotspot + button. Either use the hotspot input sliders or text boxes to enter X- and Y-axis positions as percentage values, or enable the Show showcases toggle beneath the image thumbnail and manually position the numbered hotspot circle as desired. To input metadata, click the Add meta + button to enter data as key/value pairs, clicking the plus sign button (+) to add more as desired.
• Metadata. You may add as many key/value string pairs as you like to define any other properties you want the image to have. This data can be retrieved from the Catalogue API by adding the meta property to any place where you query for an image.

If you’ve defined multiple languages in your tenant, you can switch between different translations of the image using the Language drop-down at the top of the screen. Refer to our Configuring Languages page for more information.

When you’ve finished working with the image, click the Save button at the top of the screen to preserve your changes. If you browse back to the main Asset Organizer window without saving, any changes you made will be lost.

Tagging images with topics allows you to organize and find them more easily. There are two different ways to assign topics to images:

• From the main Asset Organizer window, click the Select button (or type the letter S), then left-click on one or more images. At the bottom of the screen, click the plus sign button (+) on the Attach topics window, then type the name of the topic you want to assign. The search tool will return all existing topics that match your input. Left-click on the one you want to select, or use the arrow keys to scroll to and press Enter on the desired topic.
• From the main Asset Organizer window, left-click on an image thumbnail. On the next screen, click the plus sign button (+) under the Topics section, then type the name of the topic you want to assign to this image.

Once a topic has been added, you can click on its label to see every image in your tenant that has been tagged with this topic. Once you click the Save button, you’ll see thumbnails at the bottom of the screen of some of the other images that share this topic, if any exist. You can click the View all assets link to see them all displayed.

To remove a topic, click the X on the right-hand side of its corresponding label.

There are two ways to search for images from the main Asset Organizer screen: by filename and/or by the topic(s) assigned to the images. In the top-left corner of the screen, you can use the drop-down menu to choose the type of search you’d like to perform.

To search by filename, input your search term into the search bar and press Enter. To search by topic, click on or type the desired topic name into the search bar. This will apply search filter(s) based on your input. You can create additional filters as desired.

Filename and topic filters will be displayed at the top of the screen, side by side with one another. Click the X beside any filter to remove it, or click Clear filters to remove them all at once.

You can also use the View assets without topics button to filter for those images that have no topics assigned.

After clicking on an image thumbnail, you can use the Download button to either save the image in multiple size and format combinations, or copy a link to the desired image size/format that can be pasted elsewhere as needed.

With Magic Paste, you can easily copy and paste images from the Asset Organizer to product variants, any catalogue item that uses an image component or paragraph collection component, and even to other tenants to which you have access.

To populate the lightbox with images, you can:

• Click the Select button (or type the letter S) from the main image gallery, click on the desired image(s), then click the Add to lightbox button.
• Hover over an image thumbnail to access it from the main image gallery, then click the Add to lightbox button in the bottom-left corner.
• Click on an image thumbnail, then click the Add to lightbox button at the top of the screen.
• Click the Assets icon in the catalogue’s organizer sidebar, then click the Add to lightbox button on any image’s thumbnail.

Once one or more images have been copied to the lightbox, it will be visible at the bottom of the screen. From there, you can browse throughout Crystallize and paste these images wherever you need them. For more information, refer to our documentation on Magic Paste.

You can also use the Assets panel in the organizer sidebar to directly add images to items. Click and drag image thumbnails onto images components, paragraph collections, and other elements that accept images.