RIFT Quick Start
This documentation needs review. See "Help improve this page" in the sidebar.
The functionality of RIFT Starter Kit has been moved to another sub module called "RIFT UI" which can be used for configuring RIFT settings as well.
RIFT UI
RIFT UI module (sub module shipped with RIFT) provides a JavaScript Application which provides a Quality of Life improvements for Site Builders.
Pre-requisite
- Designers provides all the "aspect ratios" for images used in the site
- Frontend Developers provides all the screens (i.e. width / breakpoints to be used for switching image sizes), E.g. "mobile", "tablet", "destkop", etc.
- Frontend Developer provides various Responsive groups to be used in the project, E.g. "Hero Banner", "Teaser Medium", "Teaser Small", "Highlighted Teaser", etc.
- Frontend Developer provides the file formats that needs to be delivered, E.g. "webp", "jpeg", etc.
- Frontend Developer provides
Configuration
Visit "/admin/config/media/rift/rift-ui" to access RIFT UI application.
Following figure illustrates the main sections of the application.
RIFT Module ships with an initial configuration that can be used for Umami Demo. This should help you understand the configurations better.
Fig A. Rift UI Main sections
On top of the application you can configure Aspect ratios and screens.
Fig B. Rift UI Settings
In the "View Modes" section on the bottom, you can configure various responsive groups.
Fig C. Rift UI View Modes
Configure Field Formatters
Now we can head over to "Manage Display" settings for our content type and select "RIFT Media Picture" as the field formatter.
Fig D. Field Formatter Configuration
In the advanced configuration you should be able to select the "RIFT View Mode" that should be used while displaying the field.
Fig D. Field Formatter Configuration's Advanced settings
Once the field formatters are configured, you should start seeing responsive image being printed in the corresponding view modes.
Conclusion
After Field Formatters are configured to use "RIFT Media Picture" the Image would be rendered using "<picture>" element in the responsive format specified.
It can be very tedious and daunting to verify if your responsive images settings are correct or not. By switching the "RIFT Source Plugin" settings to use placeholder service like "Placehold.co" or "dummyimage" you get a nice debug mode to test responsive behaviour. Make sure you clear your cache each time you switch these settings.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
