Image Link

Description

The Image Link component is a versatile atom that combines an image with a link functionality. It's designed to create clickable image elements, allowing users to navigate to different pages, external websites, or even email addresses when interacting with the image. This component is particularly useful for creating visually appealing call-to-action elements, featured content blocks, or image-based navigation items.

Installation

sabaccui add imageLink

Usage

Here's an example of how to use the Image Link component in a Storyblok block:

Preview

Schema

image

• Type: asset
• Description: Represents the image file to be displayed. Only image file types are accepted.
• Constraints: Required field

link

• Type: multilink
• Description: Specifies the destination of the link when the image is clicked.
• Features:
  • Supports internal links, external URLs, and email addresses
  • Allows setting anchor links
  • Enables opening links in a new tab (target="_blank")
• Constraints: Required field

Related Components

Notes

1. The component uses NuxtLink for internal routing, ensuring optimal performance for navigation within the application.
2. The image is displayed with a 16:9 aspect ratio (aspect-video) and is set to cover its container, ensuring consistent sizing across different image dimensions.
3. Alt text for the image falls back to the header property if no specific alt text is provided in the image asset.

Best Practices:

• Always provide meaningful alt text for images to improve accessibility.
• Consider the context and user expectations when deciding whether to open links in a new tab.
• Optimize images for web to ensure fast loading times, especially when using this component multiple times on a page.
• Use appropriate image dimensions to avoid unnecessary scaling and maintain image quality.