https://github.com/vokseverk/Vokseverk.MediaHelper
Helpers for rendering Media in Umbraco Razor Views
https://github.com/vokseverk/Vokseverk.MediaHelper
razor umbraco
Last synced: about 1 month ago
JSON representation
Helpers for rendering Media in Umbraco Razor Views
- Host: GitHub
- URL: https://github.com/vokseverk/Vokseverk.MediaHelper
- Owner: vokseverk
- License: unlicense
- Created: 2017-04-23T12:54:11.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-03-08T22:15:14.000Z (about 5 years ago)
- Last Synced: 2024-10-24T00:24:32.958Z (6 months ago)
- Topics: razor, umbraco
- Language: C#
- Homepage:
- Size: 27.3 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Media Helper for Umbraco Views
In the good old days of XSLT, my views for sites built with [Umbraco][UMB]
looked something like this when I needed to render an image:
```xslt
```
which would give me the `img` tag with both `srcset` and `src` attributes, e.g.:
```html
```
I could also pass in some parameters to customize the output but the main thing
to note is that in my view file, I only had to put the equivalent of
"Render the media here".
This was powered by an included XSLT file that had a bunch of templates for
handling various scenarios; e.g. it didn't matter whether the `poster` property
was an upload field or a DAMP picker - or the new Image Cropper in Umbraco 7.
I could handle it so my view was just a single instruction for rendering the
media.
These days, with Razor, my views are not that pretty - I'm working on it, but
the example above would look something like this:
```csharp
@{
var mediaNode = Umbraco.TypedMedia(Model.GetPropertyValue("poster"));
}
)
```
Note that this has no `null`-checking, does only cater for the `poster` property
being a Media Picker and generally looks like a whole lot of work to "just"
display an image.
So that's why I created this helper file — to enable me to boil the media
rendering process down into a single line once again:
```csharp
@MediaHelper.RenderMedia(Model.GetPropertyValue("poster"), 600)
```
or even better, when/if possible using [Models Builder][MB]:
```csharp
@MediaHelper.RenderMedia(Model.Poster, 600)
```
## Using MediaHelper
Add the `Vokseverk.MediaHelper.cs` file to your project (or put it the
`/App_Code` folder).
Then in your views, add a reference to the **Vokseverk** namespace:
```csharp
@using Vokseverk
```
Now you should be able to use the various media helpers.
*All of the `RenderMedia` methods render a single `![]()
` tag with `src` and `srcset` attributes — rendering 1x and 2x URLs for the media item. The `width` parameter specifies the 1x width (the 2x width is automatically calculated).*
### RenderMedia(image, width)
Render an image, specifying a specific output width for the image.
### RenderMedia(image, crop, width)
Render an image with a specific crop and width.
- - -
*The `RenderPicture` method renders a `` element with a number of `` children with `srcset` attributes, along with the default ![]()
fallback element.*
### RenderPicture(media, sources)
Render a `` tag with a set of `` children. The `sources` param is a List of sources, e.g.:
```csharp
@{
var sources = new List();
sources.Add(new PictureSource { Media = "max375", Crop = "Portrait", Width = 400 });
sources.Add(new PictureSource { Media = "min376", Crop = "Landscape", Width = 800 });
sources.Add(new PictureSource { Media = "min1200", Crop = "Landscape", Width = 1400 });
// Specify Media as `""` or `null` for the default to load in the `![]()
` tag
sources.Add(new PictureSource { Media = "", Crop = "Landscape", Width = 600 });
}
@MediaHelper.RenderPicture(Model.PageImage, sources)
```
Again, the `Width` parameter specifies the desired 1x width of the image.
The above would then output something like this (omitting various QueryString params for the crops):
```html
```
#### Setting ids and/or classes
The `RenderPicture` helper allows you to specify `id` and `class` attributes for
both the `picture` and `img` elements by way of two `string` arguments, e.g.:
```csharp
@RenderPicture(image, sources, "#slide1.showing", ".square.half")
```
to render something like this:
```html
```
## Notes
The generated URLs have a burned-in quality setting applied — for 1x images
it's `70` and for 2x it's `40`. These are values we've found works pretty great
for most of the scenarios we cover, by not hurting the image quality while
keeping the download sizes down. They're defined as constants so they're at
least configurable if you need to change them.
## FAQ
### Wasn't there a version for Umbraco 7?
Yes - it started as a v7 helper. Find it on the [releases][RELEASES] page.
[UMB]: https://umbraco.com/
[MB]: https://our.umbraco.com/documentation/Reference/Templating/Modelsbuilder/
[ISSUE1]: https://github.com/vokseverk/Vokseverk.MediaHelper/issues/1
[RELEASES]: https://github.com/vokseverk/Vokseverk.MediaHelper/releases/