Unfortunately, setting size only works in browsers, but not very well in email clients, which have slightly different ways to render html. The only way to manipulate this, is to use script elements to make an html container, like <div style="width:50px; "> and </div> and place the image in-between. Using the css-style options (plenty info online) on the div gives you control over the image, that will adapt itself to the boundaries of the div container, if properly set. This should work in most email clients as well as pdf.

Ralph - WEM Xpert since 2011

It is stille not working, the container in the email has been sized, but the picture is still very big. See attachment 2 (Knipsel2.jpg

I tried to change the properties of the image, Responsive, give it a specific size, but it is still not working. I constantly shows the actual size. It does not matter which email client I use.

De Happiness Manager

There might be the need for more css/html to manipulate the image within the container. There are other settings that might be usable (like max-width: 300px;) The image needs definitely no specific size in pixels, but in percentage, which should use a percentage of the container (the div) containing the image. If you explicitly set the width of the div, you need to use the width of the image as well, to set it as percentage. The Height should be left clear to keep the ratio. I sometimes use 99%, or 99.9%, and try it out. 

Other ways to manipulate html elements are possible using the script-tag in WEM, but then you need to look online for specific html- and css-settings and things like element-selectors (in this case a div > img could be a selector). But that is generic html/css, not WEM specific.

Also, for testing purposes, try it first on a normal page to see if what you are doing has the effect you hope to achieve (and using the browser's Inspect Element can show you the html-structure and may give some insights into how the element can be manipulated). This is how I try and fix these issues myself. Using a template fragment so you can use it in a normal interaction node as well as in an Email process, so you can "debug" and "browser-inspect" using the browser. If you still cannot get it to work yourself, it might be better to create a support ticket and include the node id so we can actually investigate the issue and do some fiddling ourselves.

Ralph - WEM Xpert since 2011

It seems that the class="img-responsive" is not added when generating via a mail template. Ik I use the exact same way in a normal screen it is working perfectly. 

Where do I set the witdh of a picture to 99%? I can only select the width in px?

De Happiness Manager

Class img-responsive is bootstrap and used for web. It is not included in mail (different render engine).What kind of image are you adding? From the Image Library or from a File-Field in the datamodel?

An image from the Image Libray, I see now that the only options are explicit width in pixels (% is not supported and needs to be removed) or use the responsive that does not work in Email.

Next tip: use a Table, Display Mode Default (not Bootstrap). Set the width of the table using pixels (here you do have options for relative % but in this case, use the px). Put the image in a cell and also set a width in px on de cell. This should also work in Email rendering where the Table and the Cell should work with fixed px as a container limiting the size of the image. If this also does not work, then custom HTML is required.

Ralph - WEM Xpert since 2011

The file is comming from a field in the database.

setting up a table is also not working.......

De Happiness Manager

Please create a ticket and include the node of the email, so I can see what you are trying to do and I'll try to review it and check the html of the email result. That will be the only option left.

Ralph - WEM Xpert since 2011

Finally after some trials and tests, the current conclusion is that the Outlook Desktop email client is not properly rendering html tags and always shows images with their original dimensions. No matter what you try to do with html containers and styles and settings to change dimensions, Outlook Desktop will ignore all.

Generally the idea is to create a container (preferably a basic html-table with tr and td), set its width using static size in pixels, this should work for most html-based email clients. Just not Outlook. If you want to display images in e-mail body in Outlook using a specific size, you need to resize the image. An online image resizer service can be used in WEM (using http get request node), like https://imageresizer.io/ (Which original poster Arthur has found and used).

Ralph - WEM Xpert since 2011