responsive images in rte - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Emil Lindgren 28 posts 190 karma points

Aug 20, 2019 @ 08:43

0

Responsive images in RTE?

Hello, so i have a little problem with the RTE and Images

Images aren't responsive in RTE, so is there a way to make them responsive with like a format or something? without adding any packages etc.

It would be amazing to be able to add a RTE format to a image. but it seems not to be working.

Kind regards/ Emil

Copy Link
Robbie van den Hoven 36 posts 181 karma points

Aug 20, 2019 @ 08:59
101
Hi Emil,

Don't know exactly what you would like to see.

But to prevent large images in an RTE field from breaking the site layout, I use an additional style element.

provide the RTE field with a wrapper class such as '.content' or base it on the p-tag.
```
.content img, p img {
    max-width: 100%;
    max-height: 100%;
    height: auto! important;
}
```
this way you prevent the image from being displayed too large.
Copy Link
Shaishav Karnani from digitallymedia.com 354 posts 1638 karma points

Aug 20, 2019 @ 09:57
1
Hi

You can try this solution and add class to img tag.
```
@Html.Raw(TemplateUtilities.ParseInternalLinks(Umbraco.Field("bodyText").ToString().Replace("<img ", "<img class=\"img-responsive\" ")))
```
Copy Link
Daniel Gillett 72 posts 149 karma points

Dec 29, 2019 @ 22:13
0
Hello!

Shaishav is correct. You can use the TemplateUtilities in the Umbraco.Web.Templates namespace.

however, Field has been dropped in v8 according to what I read. So, instead I got this to work by using TemplateUtilities.ResolveMediaFromTextString instead.
```
@Html.Raw(TemplateUtilities.ResolveMediaFromTextString(Model.Value("mainContent").ToString().Replace("<img ", "<img class=\"img-responsive\" ")))
```
Thanks Shaishav! I did not know about the TemplateUtilities. ;-)

You can also really shine it on by including some extra css which will add space at the top and bottom of the image so the image is not stuck to the text. Just reference a bootstrap class or make one like:
```
.pd-b-1, .pd-t-1 {
    padding-bottom: 10px;
}
```
(padding top and padding bottom with 10 spaces.)

Best, Daniel
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Responsive images in RTE?