TestimonialGrid

Features

• Versatile Testimonials: Supports multiple types of testimonials, including:
  • Twitter posts: Displays a username, profile picture, and a link to the tweet.
  • Video testimonials: Includes video playback with a poster image.
  • Custom text: Displays general testimonials with optional images.
• Customizable Header: Easily adjust the section header text.
• Responsive Design: Uses a masonry grid layout to adapt to various screen sizes.
• Rich Content Support: Handles images, videos, and links seamlessly.

Usage

Step 1: Import the Component

Add the TestimonialGridComponent to your Angular project by including it in your page or component.

import { TestimonialGridComponent } from "src/app/components/testimonial-grid/testimonial-grid.component";
 
@Component({
  ...
  imports: [..., TestimonialGridComponent],
  ...
})

Step 2: Add the Template

Include the component in your template:

<testimonial-grid></testimonial-grid>

Step 3: Define the Testimonials

Customize the testimonialHeader and items in your component.

The TestimonialGridComponent uses the following properties for customization:

• testimonialHeader (string): The main heading for the testimonial section.
• items (Array): An array of testimonial objects with the following structure:
  • name (string): The name of the person providing the testimonial.
  • text (string): The testimonial content.
  • type (string): The type of testimonial ('twitter' | 'video' | 'other').
  • username (string, optional): The username for social media testimonials.
  • link (string, optional): A URL linking to the source (e.g., Twitter post).
  • img (string, optional): A URL for an image associated with the testimonial.
  • src (string, optional): A URL for a video file (used when type is 'video').
  • poster (string, optional): A URL for the video poster image (used when type is 'video').

@Component({
  selector: "app-testimonials",
  standalone: true,
  imports: [TestimonialGridComponent],
  template: "<testimonial-grid></testimonial-grid>",
})
export class TestimonialPageComponent {
  testimonialHeader: string = "See what others are saying";
  items = [
    {
      username: "janedoe",
      name: "Jane Doe",
      text: "This tool has revolutionized how I work!",
      type: "twitter",
      link: "https://twitter.com/janedoe",
      img: "https://example.com/jane.jpg",
    },
    {
      name: "John Smith",
      text: "A lifesaver for developers!",
      type: "video",
      src: "https://example.com/john-video.mp4",
      poster: "https://example.com/john-poster.jpg",
    },
  ];
}

Notes

• Testimonials can include a mix of types to highlight various user feedback formats.
• Ensure all URLs provided (e.g., images, videos, and links) are valid for proper rendering.
• Use the type property to control how each testimonial is rendered.