I just want to know how do I add images to my website.
I have already added the image in the media section as well as selected it in the respective field in the content section but how do I add it into the HTML??
is there an equivalent for "Model.Value("someText") when using images?
Please help...
Yes there is. When inserting images, you'll need to get the url for the image and insert it in a tag. If alias is "image" the code could look something like:
<img src="@Model.Value("image").Url()" />
Or if you have typed models with a image property called "Image":
<img src="@Model.Image.Url()" />
I hope this is enough for you to figure out the rest.
Hi, Thank you so much that helped! I'm sitting with a follow-up problem now:(
How can I apply styling to these images in order to make them responsive? It does not work if I try to style the image by referencing its class name.....
Adding images
Hi all,
I just want to know how do I add images to my website. I have already added the image in the media section as well as selected it in the respective field in the content section but how do I add it into the HTML??
is there an equivalent for "Model.Value("someText") when using images? Please help...
Hi Kyle
Yes there is. When inserting images, you'll need to get the url for the image and insert it in a![]()
tag. If alias is "image" the code could look something like:
Or if you have typed models with a image property called "Image":
I hope this is enough for you to figure out the rest.
Best regards Frank
Hi, Thank you so much that helped! I'm sitting with a follow-up problem now:(
How can I apply styling to these images in order to make them responsive? It does not work if I try to style the image by referencing its class name.....
Hi Kyle
Take a look at the Umbraco docs:
https://our.umbraco.com/documentation/fundamentals/Backoffice/Property-Editors/Built-in-Property-Editors/Image-Cropper/
With this function "GetCropUrl" you are able to get different image sizes.
Look at this guide for some ideas on how to make different image sizes for different screens: https://24days.in/umbraco-cms/2019/chocolates-plus-images/responsive-images/
If your problem is about your style code not working on the image, it might be something completly different, but I wanted to add these links anyway.
Best regards Frank
is working on a reply...