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• sugbangalore@gmail.com• #sugblr• https://www.linkedin.com/groups?gid=6700964