Book Image

Sitecore Cookbook for Developers

By : Yogesh Patel
Book Image

Sitecore Cookbook for Developers

By: Yogesh Patel

Overview of this book

This book will get you started on building rich websites, and customizing user interfaces by creating content management applications quickly. It will give you an insight into web designs and how to customize the Sitecore architecture as per your website's requirements using best practices. Packed with over 70 recipes to help you achieve and solve real-world common tasks, requirements, and the problems of content management, content delivery, and publishing instance environments. It also presents recipes on Sitecore’s backend processes of customizing pipelines, creating custom event handler and media handler, setting hooks and more. Other topics covered include creating a workflow action, publishing sublayouts and media files, securing your environment by customizing user profiles and access rights, boosting search capabilities, optimising performance, scalability and high-availability of Sitecore instances and much more. By the end of this book, you will have be able to add virtually limitless features to your websites by developing and deploying Sitecore efficiently.
Table of Contents (20 chapters)
Sitecore Cookbook for Developers
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Achieving responsive images


In responsive websites, getting different sized images based on the screen size (viewport) would be a great option to serve optimized images to make pages faster and provide better user experience.

In this recipe, you will learn rendering different sized images dynamically using MediaUrlOptions. We will render the <picture> element to achieve responsive images in HTML 5.

Getting ready

A Sitecore image will be rendered as <img src="/~/media/Images/image.jpg" />. To get a responsive image, we will render the <picture> tag as follows. If you are not aware of it, get some basic knowledge from http://goo.gl/GmHprC.

<picture>
  <source media="(min-width: 800px)" srcset="/~/media/Images/Cookbook/myimage.jpg?w=200">
  <source media="(min-width: 500px)" srcset="/~/media/Images/Cookbook/myimage.jpg?w=150">
  <img srcset="/~/media/Images/Cookbook/myimage.jpg?w=300">
</picture>

How to do it…

We will first create an extension method...