UmbracoCMS cropping, focal point with slimsy (newbie question)
d

danielhok

about 2 years ago
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&