Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /leased-bundle/ /extensions/ /module-integration/ /order-form/

# Website Media

Welcome to the comprehensive guide on utilizing the Media Manager feature in Lagom WHMCS Website Builder (opens new window). This article takes you through the seamless process of managing and optimizing media assets for your website. Learn how to effortlessly enhance the visual appeal and engagement of your web pages by efficiently handling images through CMS pages.

# Media Manager

Assets which are shown "Media Manager" are stored in /templates/lagom2/assets/img/page-manager/ directory. Which means that these files can be also managed via "File Manager", directly on your server.

following actions are available on this page:

  1. Upload - Allows to upload new graphics.
  2. Search - Search for specific graphic name.
  3. Remove - Click on "Trash" icon to remove specific graphic.
  4. Preview - Hover over specific graphic and click on the "Zoom" icon, to display bigger preview.

# Media Modal

Lagom WHMCS Website Builder lets you choose different graphic types, which can be selected via modals in management of CMS pages, as shown in below examples.

# Small Icons

Display predefined icons in 12px size, which are available by default in Lagom WHMCS Client Theme.

# Medium Icons

Display predefined icons in 18px size, which are available by default in Lagom WHMCS Client Theme.

# FontAwesome

Display FontAwesome icon set, which is available by default in WHMCS.

# SVG Icons

Display predefined icons in 64px and 156px size, which are available by default in Lagom WHMCS Client Theme. List of available SVG icons is available on our demo page (opens new window).

# SVG Illustrations

Display predefined illustrations, which are available by default in Lagom WHMCS Client Theme and Lagom WHMCS Website Builder. List of available SVG illustrations is available on our demo page (opens new window).

# Library

Library tab display all graphics loaded from /templates/lagom2/assets/img/page-manager/ directory.

# Upload

If you decide to use your own graphics, in specific website element, you can use the "Upload" tab. Uploaded files will be then available in "Library (opens new window)" tab, and in "Media Manager (opens new window)" page.

# Alternate Text

Custom graphics assigned to the website sections, will have automatically generated alt attribute in following format [Page Title] - [Section Title]

  • Page Title - Text assigned to the "SEO Title" (opens new window) field for specific CMS page.
  • Section Title - Text generated from ["Section Title"] field, if this field will be empty, we will use ["Caption"] field. If both fields will be empty, then alternate text will not be assigned.

# Override Alternative Text

By default, alternative text is automatically generated based on the image name or the section title and caption. However, in some cases, this may result in overly generic or unclear descriptions. Enabling this option and entering your own text allows you to ensure better accessibility and improve SEO performance.

This option allows you to manually define the alternative text for graphics selected via the Media Manager. It can be used when assigning images to menu items or when editing pages and sections in the Website Builder.

This setting is available in the Library (opens new window) and Upload (opens new window) tabs of the Media Manager.

# Graphics Color Scheme

The graphics in our Media Manager are static PNG files that cannot be edited using CSS code. Previously, these were only available in blue. To provide greater flexibility with visual customization, we have created multiple color versions of these graphics. Now, when you select a different Color Scheme (opens new window) in our addon, the corresponding colored PNG will automatically load to match the selected scheme.

For example, if you wish to have the graphics in green color, you have to activate this color scheme in our Style Manager (opens new window) by following these steps:

  1. Open our "RS Themes" addon.
  2. Select "Styles" tab.
  3. Choose your currently active theme, for example, "Modern" and click on the "Manage" button under the "Actions" dropdown menu.
  4. Select your desired color and click on "Save Changes".
  5. Important: If you have Section Cache (opens new window) enabled, you need to clear it by following the steps below:
    • Navigate to "RS Themes" → "Tools" tab.
    • Click on the "Refresh" button next to the "Section Cache"

After changing the color scheme to “Green”, the PNG graphic with green accents will be automatically loaded as you can see on the example below.

Here are more examples of colors used in our PNG graphics.

# Adding Dark Theme Variants for Media Assets

When using the Media Manager, assets can be displayed in both their default (light) and dark theme variants. This allows you to maintain visual consistency across different color schemes by ensuring graphics remain clearly visible regardless of the selected theme.

To implement a dark version of your asset, follow the steps below:

  1. Prepare Your Dark Theme Asset:

    • Create a dark theme version of your graphic.
    • Make sure it uses the exact same filename as the original (light theme) image.

  2. Upload the Dark Variant:

    • Connect to your server via FTP or file manager.
    • Navigate to the following directory: /templates/lagom2/assets/img/page-manager/lagom-color-schemes/dark
    • Upload your dark theme graphic into this folder.

  3. Clear Cache:

    • Log in to your WHMCS Admin Area.
    • Go to: Utilities > System > System Cleanup > Empty Template Cache
    • Then, go to:RSThemes Addon > Tools > Refresh Section Cache

Once these steps are completed, the dark theme version of your asset will automatically be displayed for users browsing your website in dark mode.

← Website Sitemap →