Text With Image Component Documentation

Overview

The Text With Image component is component that displays a combination of text and images. It can be used to showcase content with an accompanying image in different layouts and alignments. The component supports a heading, subheading, descriptive text, an optional button, and an image. The layout can adjust based on whether the image is present and its orientation.

Model Documentation

Model Structure

The Text With Image component relies on a data model that includes the following properties:

id: The unique identifier for the component section.

cssClass: Additional CSS classes for styling the section.

header: The main heading for the text section.

subHeader: The subheading below the main heading (optional).

text: The descriptive text content (can include HTML).

buttonText: The text for the optional button.

buttonLink: The URL for the optional button link.

image: An object containing the image details (link property).

imageOrientation: Determines the layout of the image relative to the text:

0: Image on the left.

1: Image on the right.

2: Image spans the full width.

alignment: Controls the alignment of the content (left, center, right).

Example Model

Here’s an example of how the model might be structured:

Component Structure

The Text With Image component consists of the following key sections:

HTML Template: Defines the structure and layout of the component.

JavaScript: Handles the dynamic logic, including layout and alignment settings.

Data: Contains properties like imgUrl, imageClass, and textClass for managing the component's state.

Methods: Includes helper functions like getAlignmentClass to determine CSS classes based on alignment.

HTML Template

The HTML template describes how the content and image are arranged within the component, based on the provided model data.

JavaScript

The JavaScript section handles the component's logic, including dynamically adjusting the layout and managing content alignment.

Component Definition

Explanation

Props: The component accepts a model object that contains all the content and layout configurations, such as image URL, header, subheader, and button text.

Data: The data() function initializes variables like imgUrl (the image URL), imageClass (CSS class for image layout), and textClass (CSS class for text layout).

Methods:

getAlignmentClass: Returns the appropriate CSS class based on the alignment value in the model. This controls whether the content is left-aligned, centered, or right-aligned.

Created Hook: This lifecycle hook dynamically sets the image and text layout classes based on the imageOrientation and whether an image is provided. If no image is present, the text content spans the full width.

Text with Image

Text With Image Component Documentation#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Component Definition#

Explanation#