Umbraco media picker adds dimensions to images

0
votes

When I insert an image from the Media section into an Umbraco Rich Text Editor field using the standard Media Picker that comes with a clean Umbraco 7 install it adds height and width attributes to the HTML as well as appending it to the URL.

Like this:

<img style="width: 500px; height: 160.55045871559633px;" src="/media/1038/image.jpg?width=500&amp;height=160.55045871559633" alt="some alt" rel="1100" />

How can I stop this from happening? I don't want to have to go into the HTML and remove this every time I add an image.

2
umbracoumbraco7
I don't think you can - why would you want to? – daven11
@daven11 Because I want the images to be loaded in original size. My image is in a different dimension altogether. And the original size fits into the design. In order to get it back to the right dimension, I have to drag the image size drag handle manually and kind of guess the size. In which scenario WOULD you like the software to randomly assign a different size for your placed image?? – hofnarwillie
I see your point. It only seems to do that for large images though, Smaller images are put in with the correct height and width it seems, after my brief experimentation. – daven11
This might help our.umbraco.org/forum/umbraco-7/using-umbraco-7/… seems it's a known issue – daven11
Thanks, that's definitely the issue. Well spotted. The workaround provided works for now. – hofnarwillie

2 Answers

3
votes

You can change the default dimensions in the Richetext editor settings for images or 0 to disable. This adds the image with the original dimensions.

You might also want to add the following properties to your img elements: max-width: 100%; height: auto !important.

Umbraco editor settings

0
votes

I know it's a bit late to answer this but I came across the same issue but the fix advised seems only to apply when you're actually editing within Umbraco. In my case we were editing in a custom angular editor and the rich text editor was being instantiated and configured within javascript. The solution for this was to add the maxImageSize parameter to the RTE config as follows:

scope.rteView = [{
            label: null,
            description: null,
            view: 'rte',
            config: {
                editor: {
                    toolbar: ["code", "styleselect", "bold", "italic", "bullist", "numlist", "link", "umbmediapicker", "spellchecker"],
                    stylesheets: ["Editor"],
                    maxImageSize: 0,
                    dimensions: {
                        height: 600,
                        width: '100%'
                    },
                    hideLabel: true
                },
                hideLabel: true
            }
        }];

Hope it helps someone.