A Single Place to Manage Images

To get started with the Asset Organizer, you’ll first need to log into the Crystallize App and enable the feature within Labs. If you don’t know how to do this, you’ll want to read more about enabling Labs features.

Once the Asset Organizer is enabled, there will be an Assets button on the left-hand side of the screen. Click this button to access the Asset Organizer UI. 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 fields. 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.
• Topics. If you’ve created any topic maps, you can assign topics to the image, tagging it with relevant keywords. (More on this below.) 
• 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.
• Image 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.
• Focal point. You can optionally define a focal point so that a certain part of the image is preserved whenever the image is resized/cropped within a responsive layout that displays differently across devices. 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 option beneath the image thumbnail and manually position the focal point circle wherever you want it to be. This will populate the focal point values automatically.

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.

Once topics have been assigned to images, you can search for/filter images based on one or more topics. On the main Asset Organizer screen, type each topic name into the search bar and click on the desired result. Multiple topics can be selected to further refine the filter. Click the X beside any topic to remove it from the filter. Click Clear filters to remove all topics and display all images.

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 save the image in multiple size and format combinations.

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.

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.