Sitecore User Group Bangalore #sugblrSitecore Responsive Website Imagery SupportWITH ANINDITA BHATTACHARYA
Sitecore User Group Bangalore #sugblr
Responsive images – how to Responsive Imagery through CSS
width:100%; height:auto – scales up max-width background-size for background images – any tag
contain 100% 100% Cover
Images based on screen size @media HTML5 Picture tag bLazy plugin – lazy load resized images!
https://github.com/dinbror/blazy Demo
Sitecore User Group Bangalore #sugblr
Using custom glass html helpers Glass setup help
Install-Package Glass.Mapper.Sc https://github.com/HedgehogDevelopment/tds-codegen (with TDS)
Demo RenderPicture<>() RenderLazyResponsiveImage<>()
Experience Editor Support Experience Editor mode – conditional render EditFrame Demo
Sitecore User Group Bangalore #sugblr
Resizing Sitecore images
Built in Sitecore image resizer Media.RequestProtection.Enabled - 7.5 & Above http
://www.seanholmesby.com/images-not-resizing-in-sitecore-7-5-sitecore-8-0/
Eg. /-/media/Images/small.jpg?la=en&hash=73797181912BFBE1A30C89004C2F8314746C444A
Crop not available Demo
Sitecore User Group Bangalore #sugblr
Sitecore Image Processor Module Nuget: Install-Package Namics.Opensource.Modules.ImgProchttps://imageprocessormodule.codeplex.com/documentation Tested with Sitecore 8.2 Use useCustomFunctions=1 Additional features
Greyscale Flip / rotate Pixel-Precise cropping Center cropping KeepOrientation
FUNCTIONALITY PARAMETER VALUEGreyscale greyScale=1 0/1
Flip/RotaterotateFlip=Rotate180FlipNone
RotateNoneFlipNone, Rotate90FlipNone, Rotate180FlipNone, Rotate270FlipNone, RotateNoneFlipX, Rotate90FlipX, Rotate180FlipX, Rotate270FlipX, RotateNoneFlipY, Rotate90FlipY, Rotate180FlipY, Rotate270FlipY, RotateNoneFlipXY, Rotate90FlipXY, Rotate180FlipXY, Rotate270FlipXY
Pixel-precise croppingw=100&h=150&cropX=0&cropY=0 Integers (int)
Center cropping centerCrop=1 0/1
Keep camera orientation keepOrientation=1 0/1
Sitecore User Group Bangalore #sugblr
Custom Image Handler
Custom image handler Image compression % Asynchronous editing / loading Watermark Any other custom editing…
Demo
Sitecore User Group Bangalore #sugblr
Case Study
Resize and lazy load images in Rich Text fields in Sitecore Include and initialize bLazy RenderField pipeline
Code to transform all img tags Config update
https://techmusingz.wordpress.com/2015/11/02/resize-and-lazy-load-images-in-rich-text-fields-in-sitecore/
Sitecore User Group Bangalore #sugblrThank you!UPCOMING SUG BANGALORE SESSION:
SITECORE EXPERIENCE PLATFORM BASICS - PART 1WITH ANITHA HARRYSATURDAY, OCTOBER 15, 201612:00 PM TO 1:00 PM
CONNECT WITH US: • https://www.meetup.com/sug-bangalore• [email protected]• #sugblr• https://www.linkedin.com/groups?gid=6700964
Top Related