I'm currently working on a Sitecore 9.0 SXA project. Although I could do whatever explained in this post by cloning the image/promo rendering, me being me, have used the manual approach here in this post. Meanwhile, check this wonderful blogpost by Sebastian Winter that clones a promo rendering and creates a responsive banner.
In my other blog post and a better one I have already used the steps specified in the above post and created a package with branch/renderings/templates necessary for the responsive image. So, you can skip this blog post right away and go there.
If not, the end-result of this post (image is not responsive):
My earlier blog was about building a feature block. In this post, I build a hero banner in similar lines. This banner is based on native SXA Image component.
Basic Setup:
1. Create a data template for the banner similar to Templates > Feature > Experience Accelerator > Media > Image or inherit Image and add just the delta fields to Banner:
Field Details:
2. Ensure Title field for each field points to corresponding template field name.
3. Create Banner Folder similar to Templates > Feature > Experience Accelerator > Media > Image Folder and assign Standard Values for Banner Folder to Banner Folder and Banner items:
4. Create /sitecore/templates/Feature/Uplift Renderings/Rendering Parameters/BannerParametersTemplate similar to /sitecore/templates/Feature/Experience Accelerator/Media/Rendering Parameters/ImageParametersTemplate:
5. Create a branch template for banner rendering variant under /sitecore/templates/Branches/Feature/Uplift Renderings/Default Banner Variant:
Each variant has a separate set of fields as per need:
6. Create a Banner rendering and assign the following fields as per Image rendering under Experience Accelerator:
Controller (must point to custom dll / class)
Controller Action
Datasource Location
Datasource template
Rendering Contents Resolver: Image Contents Resolver
Within the Site:
7. Under Site presentation, create Rendering Variants based on branch template created in step 5:
8. Next, add the new Banner rendering to Available Renderings:
9. Create a data source based on the data template:
While assigning the image, use Browse > Upload Media. Now, clicking the Destination button in top right side of the window will point to the location specified in Source of Image template.
Now, select the images folder on the right side window, add image through browse media button and click confirm in below window:
Note that in the above window, if you don't select the images folder, the image might sit under another image!
Next, clicking upload media button and subsequently selecting the image will select the uploaded image.
C# changes:
10. The BannerRepository.cs is inspired by ImageRepository class that is part of Sitecore.XA.Feature.Media.Repositories, could have as well inherited from the same:
11. The BannerController.cs is inspired by ImageController class that is part of Sitecore.XA.Feature.Media.Controllers, could have reused it but just wanted to keep this separate and inline with copied-over BannerRepository.cs:
Must sit under Views > Banner folder:
13. Then, perform the usual shenanigans of
14. Save and publish the VS solution to Sitecore instance. Simultaneously ensure items are saved in Sitecore and open XPE for the home page and the custom rendering must be available in toolbox now. Drag and drop the banner. Add an image. Now, variants are ready for selection too:
15. Spice up the page by adding some style tags to the fields in banner variant as per
my earlier blog. Perform Sitecore publish and view the web page.
Comments
Post a Comment