File and Image Management

Kibo eCommerce provides you with a few file management tools. The main tool is File Manager, which allows you to upload files to Kibo eCommerce, but you also have access to tools that allow you to refresh the cache and manipulate images with URL or Hypr tag parameters.

Use File Manager to Upload Files

Kibo eCommerce includes a File Manager page that stores files for your site on the Kibo eCommerce CDN.

To open File Manager, go to Main > Site Builder > Files.

Upload a Custom Sitemap

For SEO reasons, you may wish to create your own sitemap and use it in place of the default sitemap generated by Kibo eCommerce. You can upload a custom sitemap using File Manager. After uploading your sitemap, you can point crawlers to it using redirects or by editing your site's robot.txt file.

To upload a custom sitemap:

  1. Create your custom sitemap outside of Kibo eCommerce and name it sitemap.xml.
  2. Upload your custom sitemap to your site using File Manager.

Point Crawlers to Your Sitemap

After uploading your custom sitemap, you need to either add redirects or edit your robots.txt file to point crawlers to your sitemap.

Option 1—To point crawlers to your custom sitemap using redirects:

  1. Go to Main > Site Builder > Redirects.
  2. Select your site using the site selector drop-down.
  3. Configure the following two redirects from the default sitemap to your custom sitemap:
    SourceDestination
    sitemap.xmlcms/files/sitemap.xml
    sitemapcms/files/sitemap.xml
  4. Enable Rewrite on the redirects to keep the source URL from changing during the redirect.

Option 2—To point crawlers to your custom sitemap using the robots.txt file:

  1. Go to System > Settings > General Settings.
  2. Under Robots, upload a robots.txt file that includes the following line specifying the absolute path to your sitemap:

    Sitemap: http://www.yourSite.com/cms/files/sitemap.xml

Bust Cache

Bust cache allows you to update the URL for CDN content in order to force your storefront to display the latest version of CDN files instead of versions that might be saved in cache. You access bust cache using the Bust Cache button available in the Admin General Settings at System > Settings > General Settings.

However, your theme developer must first enable the Bust Cache feature in your theme files before the Bust Cache button has any effect on your CDN files.

Enable Bust Cache

To enable bust cache, your theme developer must complete the following steps:

Note:  Bust cache currently applies only to image files.
  1. Open a theme file that contains CDN content.
    For example, open templates/modules/product/product-listing.hypr.live for editing.
  2. Replace any Hypr tags that reference the file URL and object model with the make_url Hypr tag.
    For example:

    Replace:

    <img src="{{model.mainImage.imageUrl}}?max={% block thumbnail-size %}{{ themeSettings.listProductThumbSize }}{% endblock thumbnail-size %}" />

    With:

    <img src="{% make_url “image" model.mainImage %}" />

    Include Additional Fields:

    You can include additional image fields (like the max field) by appending the fields to the end of the tag, between with and as_parameter, as follows:
    <img src="{% make_url “image" model.mainImage with max=themeSettings.listProductThumbSize extraExampleField=1 as_parameter %}" />

Result:

The URL of the CDN file you apply the make_url tag to may look something like the following URL, where the number after mzCB is randomly generated each time you click the Bust Cache button in Admin.

cdn.subdomain.com/img.jpg?max=150&extraField=1&_mzCb=908908080

Enable Bust Cache for Non-CDN Files Uploaded in your Theme

You also can enable bust cache directly on a link destination for non-CDN files that you upload through your theme, as follows:

<a href="{% make_url "cdn" "/resources/images/example.png" with max=234 as_parameters %}">Link Text</a>

Result:

Kibo eCommerce prepends a CDN location to the specified file and applies a CDN cache key so that the file is updated every time you click the Bust Cache button in the General Settings.

<a href="//cdn..../1023-434/resources/images/cat.png?max=234&_mzCb=234929834923498">Link Text</a>

Access the Cache Key Value through JavaScript or in a Hypr Template

After you enable bust cache, you can access the cache key value (the randomly generated number appended to the CDN file URL) through JavaScript as shown in the following example:

require(['hyprlivecontext'], function(HyprLiveContext) {
					HyprLiveContext.locals.siteContext.generalSettings.cdnCacheBustKey;
					})
			

In addition, you can access the cache key value in a Hypr template using the following code:

siteContext.generalSettings.cdnCacheBustKey // (available in the HyprLive context)

For example:

<a href=“//cdn.mozu.com/sampleDoc.pdf?_mzCb={{siteContext.generalSettings.cdnCacheBustKey}}">My Document</a>

CDN Image Manipulation

When you use the make_url tag on an image hosted on the Kibo eCommerce CDN, you can include the following additional fields at the end of the tag, between with and as_parameter, to process the image. You can also apply these fields as URL parameters appended to the image path after a ? character and separated by & characters.

Note:  To avoid incorrect image rendering, do not apply the image manipulation fields to images that contain a dimension greater than 30,000 pixels in length.

make_url Example:

{% make_url "image" model.mainImage with max=500 quality=75 crop="10,10,-10,-10" as_parameters %}

URL Parameter Example:

http://cdn.mozu.com/22440-m1/cms/files/filename?max=500&quality=75&crop=10,10,-10,-10

Field Description
max Specifies a pixel limitation for the largest side of an image.
maxWidth Specifies a pixel limitation for the width of the image, preserving the aspect ratio if the image needs resizing.
maxHeight Specifies a pixel limitation for the height of the image, preserving the aspect ratio if the image needs resizing.
width Specifies an exact width dimension for the image, in pixels.
size Same as width. Provides backwards-compatibility for an earlier syntax.
height Specifies an exact height dimension for the image, in pixels.
crop

Usage: crop=x1,y1,x2,y2 in URLs and crop="x1,y1,x2,y2" in the make_url tag.

Crops the image based on the specified coordinates. The reference point for positive coordinates is the top or left side of the image, and the reference point for negative coordinates is the bottom or right side of the image.

You can use this field to easily crop an equal amount of pixels from every edge of the image. For example, crop=10,10,-10,-10 removes 10 pixels from all edges of the image (crop=0,0,0,0 leaves the image uncropped).

You can also use this field to specify a subset of the image. For example, crop=150,-300,-150,300 crops the following image as shown.

Note:  Using positive or negative coordinates is up to you. For example, you can crop the same subset of the example image using coordinates that are all positive, all negative, or a different combination from the one shown in the example, such as crop=+,+,-,-.

The only thing to remember is that you must always specify x2 to the right of x1 and y2 to the bottom of y1, otherwise no cropping takes effect.
quality Adjusts the image compression for JPEG files (other image types do not support this field). Accepts values from 0-100, where 100 = highest quality, least compression.