HCT.Sitefinity.ImageCarousel
This nuget package is intented for Sitefinity project running version 14.0 or greater and relies direct on the Boostrap 4 package that ships out of the box with Sitefinity.
Nuget Link
https://www.nuget.org/packages/HCT.Sitefinity.ImageCarousel/
Build you project after installation to ensure there are no issues then proceed to setup.
Add-On Setup/Install
- Login to Sitefinity (Admin privileges required)
- Navigate to Adminstration -> Add-Ons
- Locate Image Carousel Add-on and Activate it, if running multisite this only activates it for the current site.
Sitefinity Add-on Install Documentation: https://www.progress.com/documentation/sitefinity-cms/install-and-activate-add-ons
Sitefinity Add-on Documentation: https://www.progress.com/documentation/sitefinity-cms/sitefinity-cms-add-ons
Setup
This nuget package includes a view file located ~\Mvc\Views\Slider\List.Carousel.cshtml.
Also include a helper dll for some helper classes HCT.Sitefinity.ImageCarousel.Helpers.dll.
Once the nuget package is installed it is recommended to setup Sitefinity thumbnails so that the template uses the <picture>
element.
If you do not setup the thumbnails don't worry, it will use the default image source for the carousel image.
Login to Sitefnity backend (note admin privileges might be required)
Navigate to Content -> Images or Administration -> Settings -> Thumbnails
Navigate to Thumbnail Settings and add the following 4 new sizes***
1. Name:Small Devices
Resize Image:Resize to area
Max width:768
Quality:High
For developers:sm-mobile
2. Name:Medium Devices
Resize Image:Resize to area
Max width:1000
Quality:High
For developers:md-mobile
3. Name:Large Devices
Resize Image:Resize to area
Max width:1200
Quality:High
For developers:lg-dsktp
4. Name:Extra Large Devices
Resize Image:Resize to area
Max width:1600
Quality:High
For developers:xl-dsktp
Sitefinity Thumbnail Documentation: https://www.progress.com/documentation/sitefinity-cms/thumbnails
***The helper methods specifically look for thumbnail dev names that start with sm-, md-, lg-, xl-to follow the Bootstrap breakpoints.
Modifying
This Sitefinity add-on focuses on use the bootstrap utility classes as much as possible.
The only styles are located within the included DLL: HCT.Sitefinity.ImageCarousel.Helpers.dll. The styles include height of the carsoul wrapper using .carouselItemWrp, also the .overlay class, and some font sizes for headline.
Uninstall
- Login to Sitefinity (Admin privelages required)
- Navigate to Administration -> Add-Ons
- Uninstall Image Carousel Add-on
Support
- Please use the Contact Owners at nuget.org to report any issue with this connector.
Contributing
Fork the code hack away create a pull request.