Slide deck of SUG (Sitecore User Group) meetup held on Oct 8 2016 on Sitecore Responsive Website Imagery Support with Anindita Bhattacharya

1. Sitecore Responsive
Website Imagery
Support
WITH ANINDITA BHATTACHARYA

2. 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

3. 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

4. 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

5. Sitecore Image Processor Module
 Nuget: Install-Package Namics.Opensource.Modules.ImgProc
https://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 VALUE
Greyscale greyScale=1 0/1
Flip/Rotate rotateFlip=Rotate180FlipNone
RotateNoneFlipNone,
Rotate90FlipNone,
Rotate180FlipNone,
Rotate270FlipNone,
RotateNoneFlipX, Rotate90FlipX,
Rotate180FlipX, Rotate270FlipX,
RotateNoneFlipY, Rotate90FlipY,
Rotate180FlipY, Rotate270FlipY,
RotateNoneFlipXY,
Rotate90FlipXY,
Rotate180FlipXY,
Rotate270FlipXY
Pixel-precise cropping
w=100&h=150&cropX=0&crop
Y=0 Integers (int)
Center cropping centerCrop=1 0/1
Keep camera orientation keepOrientation=1 0/1

6. Custom Image Handler
 Custom image handler
 Image compression %
 Asynchronous editing / loading
 Watermark
 Any other custom editing…
 Demo

7. 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/

8. Thank you!
UPCOMING SUG BANGALORE SESSION:
SITECORE EXPERIENCE PLATFORM BASICS - PART 1
WITH ANITHA HARRY
SATURDAY, OCTOBER 15, 2016
12:00 PM TO 1:00 PM
CONNECT WITH US:
• https://www.meetup.com/sug-bangalore
• sugbangalore@gmail.com
• #sugblr
• https://www.linkedin.com/groups?gid=6700964