Interactive Info Images

The Interactive Info Images component is a custom AEM component that allows users to display animated interactive image panels that reveal textual info content when hovered on.

Features

  • Interactive image panels that reveal content on hover.
  • Ability to add multiple items, each consisting of an image and its content.
  • Only one content box is visible at a time when multiple items are present.
  • Option to navigate content by hovering over different images.
  • Supports title, text, and buttons for links within the content.
  • Customizable animation effects.
  • Responsive design ensuring proper display on all screen sizes.
Before/After Comparison Slider

The Before/After Comparison Slider is a custom AEM component that allows users to create interactive comparison sliders with two images. It is ideal for highlighting transformations, showcasing product benefits, or illustrating differences between two states.

Features

  • Displays a comparison slider for two images.
  • Supports horizontal and vertical orientations.
  • Customizable before/after labels.
  • Adjustable slider handle to compare images dynamically.
  • Caption support for adding descriptive text below the comparison.
  • Customizable colors for labels and handle elements.
Image Marquee Component

The Image Marquee component provides a scrolling image effect. It allows authors to display multiple images in a continuous loop with customizable speed, direction, and hover effects. A custom widget designed for displaying images that automatically scroll vertically or horizontally.

Features

  • Scrolling Effect: Images automatically scroll vertically or horizontally in a continuous loop.
  • Speed Control: Authors can adjust the scrolling speed.
  • Direction Control: Supports Reverse direction.
  • Looping: Images continuously scroll without stopping.
  • Custom Image Selection: Authors can add multiple images as one image.
  • Image Action: Authors can set a link.
Ticker Component​

The Ticker component is a custom AEM component that provides a scrolling ticker-style display, allowing users to showcase dynamic text and images in an engaging manner.

Features

  • Autoplay functionality for automatic scrolling.
  • Navigation buttons for manual scrolling.
  • Close button to remove the ticker from view.
  • Customizable text, images, and styles.
  • Flexible icon and title styling options.

FAQs

AEM Component Installation Documentation

The process includes uploading the .zip package, verifying client library dependencies, and configuring templates to make the component available in the new project.

Download Link: aem-project-manprax.all-1.0.0-SNAPSHOT.zip

Download Link: Asset-content-package.zip file

Step 1: Open Target AEM Project

  • Launch your browser and navigate to the AEM instance.
  • Log in using Admin credentials.

Step 2: Upload the Component Package

  • Open the Package Manager: <instance-domain>/crx/packmgr/index.jsp
  • Click “Upload Package”.
  • The zip file name should be like: project-name.all-1.0.0-SNAPSHOT.zip
  • Ensure the ZIP contains all necessary files:
    • /apps – Component code
    • /content – Optional default content or templates
    • /etc, /conf, /libs – If used
    • /apps/project-name/clientlibs – For associated CSS/JS
  • Ensure client library dependencies are loaded by:
    • Navigating to /apps/targetproject/clientlibs/clientlib-site
    • Checking if the dependencies property includes project-name.site
    • If not, add it as a new String[] value.

Step 3: Upload Asset Package (if applicable)

  • If your component uses media assets (images, documents, etc.), upload the asset content package (zip file) separately via Package Manager.

Step 4: Install and Build the Package

  • Locate the uploaded package in Package Manager.
  • Click Install.
  • Wait for the process to complete successfully.

Step 5: Add Component to Templates (Editable Templates Only)

  • Navigate to: AEM → Tools → General → Templates.
  • Select your page template and click Edit.
  • Click on the Layout Container or Page Policy.
  • Open the Policy Dialog under Allowed Components and add: Manprax Sites Project - CONTENT.
  • Save and close the template.

✅ The component is now available in your new project!

Curious but Not Convinced?

Perfect—we thrive on curiosity! Reach out to us!

Let’s build something extraordinary together. Partner with us and discover the difference.