Also, alternate text was loaded from image properties in the proper language. Then, if we set the image as HeaderImage of our hero page, we can see that our image was rendered nicely as a element, and is adapting to screen dimensions changes. Upload an image, remembering about filling alternate text and setting focal point, being the most important thing the photo is showing. Now we can run the application, go to CMS edit mode, and create a new page for the project. Installationįirst, let’s install the package from NuGet feed from your IDE, or by running the command: For the simplicity of this tutorial, some things are deliberately trivialized.įull code of the project developed in this tutorial can be found on GitHub. We’re starting with a simple page that describes a project:ĭisclaimer: The code shown in this article is meant to illustrate the idea and usage of the Forte.EpiResponsivePicture package and is not showing good practices of writing code. a site presenting the portfolio of fictional architects. Let’s take an example project to illustrate the idea No one likes boring, repetitive tasks, so if you take them off the editors, they’ll be really grateful! By allowing editors to choose that place on the image, we will be able to use the same image in very different scenarios, automatically cropped, and looking good at the same time on every device and use case on your page. This part of the image is called its focal point. In the vast majority of cases, all we want to do is just make the image cropped in a way that the most important part of the image is still shown. On one hand, we could allow editors to upload different images for all variants of layouts, but in reality, we usually don’t need completely different images for desktop and phone/tablet screens. Leveraging concept of picture profiles from Valdis’ package by mixing it with focal point cropping and ImagePointEditor by ErikHen had allowed to squeeze from the spec as much as possible! I also liked focal point-based cropping shown in the project developed by defsteph (currently archived), but neither of these two projects allowed fully adjusting image size or cropping based on visitor’s screen size. It enables ImageResizer support for the content uploaded to the CMS. Valdis Iljuconoks had created great EPiServer plugin that allows automatic resizing of the images. Additionally, computers are times better and faster in image processing (additionally, they don’t get bored at the same time) - so there is no reason to do that by ourselves. The tag is handy, but preparing each image in at least a few sizes is not the most attractive action that content creators can do. In this series I’m showing how to make automatic, responsive pictures in Optimizely CMS (formerly EPiServer), which gets automatically scaled, compressed, or even cropped perfectly for the use case. Part 1: Automatically cropped & resized responsive imagesĪs responsive websites must load quickly and offer good quality on all devices at the same time, it is almost obligatory to use HTML5 tag that allows providing different sets of images targeting a whole variety of screen sizes and pixel densities. Responsive images in Optimizely CMS (EPiServer)
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |