Hi Umbracions,
I try to create cropping images.
I create at the moment a blog, where I would like for each article a hero image:
I created for the image property cropping settings. HeroBanner has the cropping 1280x720.
But I'm to dumb to access it in the html.
My code looks like this at the moment:
csharp
<img src="@Model.ArticleHeroImage?.MediaUrl()" style="width: 900px" />
<img src="@Model.ArticleHeroImage.LocalCrops" />
<slimsy-picture media-item="Url.GetCropUrl(Model.ArticleHeroImage?.MediaUrl()" css-class="mx-auto" render-lqip="true" alt-text="Attention, Zombie articles incoming" width="1280" height="720" decorative="false"></slimsy-picture>
To be fair I must say I don't understand slimsy to 100% yet. As far as I know it takes a image for example 1920x1080 and if I watch my website on a mobile devices the image gets loaded with worse image quality because on the phone I don't need the full blown up image.
I googled quite a lot with umbraco cms but I couldn't really find a good tutorial.
I know there is focal point setting on node tree basis or globally...
Is there some article or a person which can me tell in detail how cropping, focal points and/or slimsy work together?
At the moment I have on my website only very big and not really optimized images and I would like to change thath (
https://danobe.dev)
I would glad if someone could bring on some light to this mysterium for me.
How do cropping, focal point and slimsy picture play together? In which situation should I use what?
The end goal: Make images on my website more beautyful and better optimized for different resolutions.
Would be glad if someone could hint me into the right direction.
Kind regards,
Daniel
https://cdn.discordapp.com/attachments/1165619753218494524/1165619753767936091/Bildschirmfoto_2023-10-22_um_13.50.22.png?ex=654782fd&is=65350dfd&hm=98369f2bdf8bee5cc2077a3c3d3601b692931764584cc8ea197758450ba1e3c2&