Images and Video

Visual media is a crucial component of modern web applications. Frontend provides robust tools for managing and integrating images and videos into your projects, making it easy to create visually compelling experiences.

Media Library

Frontend includes a built-in Media Library that serves as a central repository for all your project’s visual assets. With the Media Library, you can:

• Upload Files: Add images and videos directly from your computer
• Organize Content: Categorize and tag media for easy retrieval
• Version Control: Maintain different versions of your media assets
• Optimize Files: Automatically optimize media for web performance
• Secure Storage: Safely store your media in the cloud

The Media Library provides a seamless way to manage all the visual content used across your application, ensuring assets are properly organized and readily available when needed.

Unsplash Integration

Frontend features a powerful integration with Unsplash, giving you access to millions of high-quality, royalty-free images directly within your development environment.

Accessing Unsplash Images

The Unsplash integration allows you to:

• Search by Keyword: Find relevant images using descriptive search terms
• Browse Collections: Explore curated collections of related images
• Discover Photographers: Find work from specific creators
• Filter Results: Narrow down options by orientation, color, and more

All images available through the Unsplash integration are covered by the Unsplash license, which allows for both commercial and non-commercial use without attribution (though attribution is appreciated by creators).

Benefits of Using Unsplash

Using the Unsplash integration offers several advantages:

• High-Quality Selection: Access to professional-grade photography
• Legal Clarity: All images available with clear usage rights
• No Additional Costs: Free to use within your Frontend projects
• Diverse Options: Millions of images covering countless subjects
• Regular Updates: New content added daily

This integration eliminates the need to source, download, and upload stock photography separately, streamlining your workflow.

Adding Images to Your Project

Incorporating images into your Frontend project is straightforward and can be done through the AI-assisted workflow.

Using the Media Modal

1. Look for the media button located near the prompt input in the interface
2. Click to open the Media Modal, which gives you access to both your Media Library and Unsplash
3. Select an image from either source
4. The image is now ready to be used in your project

Directing the AI to Use Selected Images

Once you’ve selected an image, you can simply tell the AI how to incorporate it into your project using natural language instructions:

• “Add this image as the background of the homepage hero section”
• “Use this image in the about us section with a rounded border”
• “Create a gallery that includes this image along with the other product photos”
• “Set this image as the banner for the blog post”
• “Use this image as the thumbnail for the featured video”

The AI will understand your instructions and apply the selected image accordingly, handling all the necessary code implementation.

Technical Considerations

When working with images, Frontend automatically:

• Optimizes file sizes for web performance
• Creates responsive versions for different screen sizes
• Implements lazy loading for improved page speed
• Adds appropriate alt text (which you can customize)
• Handles proper aspect ratio maintenance

These optimizations ensure that your media-rich applications maintain excellent performance and accessibility standards while looking visually impressive.