Responsive images in RTE?
b
Images aren't responsive in RTE, so is there a way to make them responsive with like a format or something? When using imagee in the RTE in Umbraco in our sites they do not scale properly. Editors now use fixed height amd width, but that leads to unwanted results on either desktop or mobile. https://cdn.discordapp.com/attachments/1230838809583943751/1230846304096227368/localhost_44313_and_1_more_page_-_Personal_-_Microsoft_Edge_2024-04-19_17-28-12.mp4?ex=6634cdf2&is=662258f2&hm=e8f1e3d34ba6104266df8be8ace3ceb3dfead563fad306e2df50c93a11d03f3c&
d
Hey @Bishal Tim firstly I would recommend not using images in RTE but instead creates image blocks. The reason is you will have full control over image blocks and apply different responsive rules based on what areas they are used in and whether or not you wish to allow the Editors to only add them specific ratios or to allow it to be fully responsive if the users have the freedom to add different ratios and crops. With that said to address the question you are asking you can make images responsive in rte's but it is quite a lot of work to ensure that they remain resizable and keep that aspect ratio at different crops. Fortunately CSS aspect ratio is now widely supported and will certainly help. Where I have been asked to ensure that images in RTE perform responsively I have created separate sets of CSS rules based on an ID for each of the rte's depending on where they are placed and how they need to react on different devices. Again my strongly said advice would be to create separate blocks for images in which you can create many variations with full control over how they respond I hope that helps.
s
Agreed! Alternative could be to only allow blocks with proper image options in the RTE and then disable the image button completely for editors. https://docs.umbraco.com/umbraco-cms/fundamentals/backoffice/property-editors/built-in-umbraco-property-editors/rich-text-editor/rte-blocks
d
Good point @Sebastiaan I had forgotten about the ability to blocks to RTE now. I have been open about the fact I'm not a fan of using Rich text editors for anything other than text but if necessary I would suggest this is a good option.
s
I don't like it either! But it's probably the best option to go with the least amount of extra work 🙂