Managing Site Icons

Your site’s icons are a small but essential part of its overall look and feel. Complex web solutions with many graphical elements commonly encounter slowdowns in page load time due to the volume of requests made for each image. Increased site traffic leads to higher server loads, which degrades both performance and user experience. Liferay provides a couple of frontend client extensions for managing your site’s icons. In this lesson, you’ll learn about the theme sprite map client extension and the theme favicon client extension.

Using the Theme Sprite Map Client Extension

With the theme sprite map client extension, you can override the default Clay sprite map component used for icons on Liferay pages. As the complexity of your web solution grows, your set of icons will also grow to accommodate new services, actions, and branding elements. Managing and organizing large sets of image files quickly becomes cumbersome, especially when updates are required.

The sprite map is an SVG file that contains several icons grouped together, each with a unique ID. The SVG is loaded as a static resource to Liferay so that individual icons can be referenced by ID. This not only provides a performance improvement, but makes it easy to modify the images without affecting other parts of your solution.

Anatomy of Theme Sprite Map Client Extensions

The client-extension.yaml file for the theme sprite map client extension contains a single URL reference to an SVG file. This URL may reference an external resource, or it can reference an SVG file that is bundled with the client extension itself. The assemble block specifies the source and target folders, and it also includes a hashify directive to generate a hash from images.

assemble:
    - from: assets
      hashify: spritemap.svg
      into: static

The extension definition block contains the URL reference, as in the following example from liferay-sample-theme-spritemap-1:

liferay-sample-theme-spritemap-1:
    name: Liferay Sample Theme Spritemap 1
    type: themeSpritemap
    url: spritemap.*.svg

This table provides descriptions of the properties in the extension definition.

Using the Theme Favicon Client Extension

A favicon is a small (16 x 16 or 32 x 32 pixel) icon displayed in a browser’s address bar, tabs, and bookmarks. With the theme favicon client extension, you can override the theme’s favicon on a selected page. While Liferay provides the ability to change your favicon manually, the client extension approach has a few key benefits. You can version and manage changes to favicons across multiple environments or instances. You can also deploy updates and rollbacks more efficiently. Flexible customization and structured management enable you to implement product promotions and sub-brands without sacrificing performance or resources.

Anatomy of Theme Favicon Client Extensions

The client-extension.yaml file for the theme favicon client extension contains a single URL reference to an ICO file. This URL may reference an external resource, or it can reference an ICO file that is bundled with the client extension itself. The assemble block specifies the source and target folders, and it also includes a hashify directive to generate a hash from the image.

assemble:
    - from: assets
      hashify: favicon.ico
      into: static

The extension definition block contains the URL reference, as in the following example from liferay-sample-theme-favicon:

liferay-sample-theme-favicon:
    name: Liferay Sample Theme Favicon
    type: themeFavicon
    url: favicon.*.ico

This table provides descriptions of the properties in the extension definition.

Conclusion

With Liferay’s client extension framework, you can make managing and organizing your site’s icons flexible, efficient, and future-proof. Client extensions give you granular control over the sprite map and favicon to ensure that every element of your site maintains your branding and visual identity. Next, you’ll learn more about caching as it relates to frontend client extensions.