RyanHelmn.ResponsiveImagePicker 1.0.0

An updated Umbraco Image Cropper property editor that utilises the media library.

Install-Package RyanHelmn.ResponsiveImagePicker -Version 1.0.0
dotnet add package RyanHelmn.ResponsiveImagePicker --version 1.0.0
<PackageReference Include="RyanHelmn.ResponsiveImagePicker" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add RyanHelmn.ResponsiveImagePicker --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: RyanHelmn.ResponsiveImagePicker, 1.0.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install RyanHelmn.ResponsiveImagePicker as a Cake Addin
#addin nuget:?package=RyanHelmn.ResponsiveImagePicker&version=1.0.0

// Install RyanHelmn.ResponsiveImagePicker as a Cake Tool
#tool nuget:?package=RyanHelmn.ResponsiveImagePicker&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Welcome to Responsive Image Picker 👋

Version
License: ISC
Twitter: ryanhelm

An updated Umbraco Image Cropper property editor that utilises the media library.

🏠 Homepage

Install

  1. Simply install the Umbraco Package or the Nuget Package (preferred)
  2. Create the data type in the backoffice
  • If you've used the image cropper before, you'll be familiar with the options available however you'll notice the breakpoint setting. Because the Responsive Image Picker utilises the picture tag, you can change the crops at your own breakpoints 🧙‍.
  • There are also options to add default picture & image classes, a prime example would be adding w-100 so your images fill the entire space with Bootstrap.
  1. Create/Edit the page you've added the Responsive Image Picker data type to and give it a whirl. In terms of usage in the CMS it functions exactly the same as the standard Image Cropper, except you'll notice it's a media picker instead.

Usage

When trying to use the Responsive Image Picker in your code, you'll notice a handy extension that comes out of the box called GetPictureTag which contains a few optional parameters. You can build up your own picture/image tag in your bespoke code however utilising the extension is the easiest and simplest solution!

Author

👤 Ryan Helmn

Welcome to Responsive Image Picker 👋

Version
License: ISC
Twitter: ryanhelm

An updated Umbraco Image Cropper property editor that utilises the media library.

🏠 Homepage

Install

  1. Simply install the Umbraco Package or the Nuget Package (preferred)
  2. Create the data type in the backoffice
  • If you've used the image cropper before, you'll be familiar with the options available however you'll notice the breakpoint setting. Because the Responsive Image Picker utilises the picture tag, you can change the crops at your own breakpoints 🧙‍.
  • There are also options to add default picture & image classes, a prime example would be adding w-100 so your images fill the entire space with Bootstrap.
  1. Create/Edit the page you've added the Responsive Image Picker data type to and give it a whirl. In terms of usage in the CMS it functions exactly the same as the standard Image Cropper, except you'll notice it's a media picker instead.

Usage

When trying to use the Responsive Image Picker in your code, you'll notice a handy extension that comes out of the box called GetPictureTag which contains a few optional parameters. You can build up your own picture/image tag in your bespoke code however utilising the extension is the easiest and simplest solution!

Author

👤 Ryan Helmn

Release Notes

Initial release

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.0.0 49 4/7/2021