What is the best way to render media (image) in a template using Umbraco 8? I can't get it to work and the documentation doesn't say much about it for version 8. At the moment I've tried:
nieuwsItem.Value("artikelAfbeelding");
Which returns an object called:
Umbraco.Web.PublishedModels.Image
When trying to get the URL of that image I get an error. I've tried getting the URL using: nieuwsItem.Value("artikelAfbeelding").Url; which returns an error. I presume this has to do with the new ModelBuilder in Umbraco 8, but I can't figure it out.
Is there any documentation that specifies how this should be done?
Out of curiosity - where does nieuwsItem come from? Because depending on how you get the data, there's the option of getting the content item as a proper ModelsBuilder based object which makes the code simpler and easier to read.
The reason I ask is that I'd like for us to work on making templating with Umbraco simpler and easier to understand, so when I see questions like these it's clear to me that we can do better.
My dream is that no matter the skill level of a developer, it should be intuitive to create templates and query data in Umbraco. This might involve different techniques for different types of people, but ultimately it should lead to the same code (thus the difference should be in the tooling - not the syntax).
When assembling template based websites I frequently find myself doing the same things - replacing static HTML with Umbraco field references.
Swapping out text is relatively easy, even inexperienced developers can use the Template : Insert > Value dropdown control to insert a reference.
However I have never understood why there isn't an image reference link in there as well. Instead we have to tediously copy and paste boilerplace code as per the above. Surely it's time for a shortcut method which can be used to render an image tag with the accompanying src and alt tags?
Similarly, now it appears that a reference to a URL (using the Multi-Node URL picker) also requires boilerplate code. Again, this is a very common requirement.
These two small improvements would dramatically improve the user experience when creating Umbraco templates from Templates such as those sole on Themeforest.
I know it doesn't seem like much, but reducing unnecessary complexity really speeds things up and allows novice developers to get much more done.
Render media in Umbraco 8
What is the best way to render media (image) in a template using Umbraco 8? I can't get it to work and the documentation doesn't say much about it for version 8. At the moment I've tried:
Which returns an object called:
When trying to get the URL of that image I get an error. I've tried getting the URL using: nieuwsItem.Value("artikelAfbeelding").Url; which returns an error. I presume this has to do with the new ModelBuilder in Umbraco 8, but I can't figure it out.
Is there any documentation that specifies how this should be done?
Thanks!
I've found the solution for my problem. I forgot to cast the value as an IPublishedContent item:
After that I can call the URL like so:
Maybe this is useful to somebody someday!
This was useful to me - thank you!
Yes very useful to me. Saved a lot of headaches
And to me as well :-)
Out of curiosity - where does nieuwsItem come from? Because depending on how you get the data, there's the option of getting the content item as a proper ModelsBuilder based object which makes the code simpler and easier to read.
Hi Niels,
I think that nieuwsItem is model.
I have used the following and it works.
The reason I ask is that I'd like for us to work on making templating with Umbraco simpler and easier to understand, so when I see questions like these it's clear to me that we can do better.
My dream is that no matter the skill level of a developer, it should be intuitive to create templates and query data in Umbraco. This might involve different techniques for different types of people, but ultimately it should lead to the same code (thus the difference should be in the tooling - not the syntax).
Hi Niels,
When assembling template based websites I frequently find myself doing the same things - replacing static HTML with Umbraco field references. Swapping out text is relatively easy, even inexperienced developers can use the Template : Insert > Value dropdown control to insert a reference.
However I have never understood why there isn't an image reference link in there as well. Instead we have to tediously copy and paste boilerplace code as per the above. Surely it's time for a shortcut method which can be used to render an image tag with the accompanying src and alt tags?
Similarly, now it appears that a reference to a URL (using the Multi-Node URL picker) also requires boilerplate code. Again, this is a very common requirement.
These two small improvements would dramatically improve the user experience when creating Umbraco templates from Templates such as those sole on Themeforest.
I know it doesn't seem like much, but reducing unnecessary complexity really speeds things up and allows novice developers to get much more done.
Just my 2c
is working on a reply...