Images with fixed height and not defined width

[sahitau]

Currently Mosaico will throw the error "ERROR: data-ko-editable images must declare a WIDTH attribute!" for images with fixed height and not empty data-ko-placeholder-width attribute. This makes it impossible to have images with fixed height and variable width.

Please remove the conditional statement on line 225 in parser.js. This should enable a proportional image resizing based on a height of the image.

 // if (width === null) {
    //console.error("ERROR: data-ko-editable images must declare a WIDTH attribute!", element);
    //throw "ERROR: data-ko-editable images must declare a WIDTH attribute!";
 //}

[bago]

Can you provide a real use case where automatic width could be needed? I thought about it and I think fixed height with auto width will simply break layouts and I can't think how it could be usefu, that's why it currently is parsed that way.

[sahitau]

I have an email header with two logos (positioned in left and right corners). Please see the mockup attached. A logo on the right side will be changed often and I want editors to be able to drag and drop a large image to the template so it is automatically resized to match the height of the left logo that is always the same.

Resizing images based on the fixed height is required for the template I am working on. In my case, there is a lot of space between two small images so it is very unlikely any logo will break the layout due to the width. My current layout allows max logo width to be 300px+ with the fixed height of only 39px.

[bago]

how do you handle responsivity with unknown width elements?

The fixed width is there because of "editability" and "floating tools": do the editing/preview work fine once you removed the "if" you quoted in the first post?

[bago]

No answers, closing as won't fix. Feel free to reopen if/when you come with the answers to the previous comment.

[dynamicnet]

I've found a use case where a fixed width can be a problem. For example, in the TEDC template, the logo block is a single image with a fixed width. It's ok for verticallly typed logo, but not for horizontally typed logo, because they appear to narrow.

So I've tested to comment out lines 225-228 in parser.js, after a first test, I've found any issue.

While it's important for template author to setup a width for responsiveness, I' think it's more a template author responsability than an responsability for Mosaico to enforce this.