Resize images in the composer #33
Assignees
jcoffey-dev (John Coffey)
Clear assignees
jcoffey-dev (John Coffey)
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: coffey-labs/ihasmail#33
Reference in new issue
Block a user
An image inserted into a message went in at its own size, capped at the
editor's width, and nothing could change it: a screenshot from a large
monitor filled the message.
Clicking an image, or right-clicking it, now frames it with a handle in
the corner that drags it to any width, keeping its proportions, and a bar
with Small (300px), Medium (600px), Large (900px) and Original size, the
sizes asked for in the report. Escape or a click elsewhere lets it go.
The handle is larger on a touch screen.
The frame is drawn over the editor, never inside it, so nothing of it is
sent. The image itself gets a width attribute, which Outlook needs since
it ignores CSS on images, and the same width as an inline style, with
max-width: 100% kept so it still shrinks on a phone. Any height is
dropped so the image keeps its shape.
Verified on the mock: a 1600px image shown at 546px was dragged to 291px,
then set to Medium and sent; the sent HTML carries width="600",
width: 600px and max-width: 100% on a cid: image, and no trace of the
frame. Not tried by touch on a real phone.
New strings: 3 ("Original size", "Drag to resize", "Image size"), added
to all nine catalogs; 1614/1630 -> 1617/1633 translated in each. The
size names reuse the existing Small, Medium and Large keys. The Dutch
entries have not been read by a native speaker. Turkish is on its own
branch (#32) and will need these three once both land.
Fixes #26. Requested by @mbjboon82.
An image inserted into a message went in at its own size, capped at the editor's width, and nothing could change it: a screenshot from a large monitor filled the message. Clicking an image, or right-clicking it, now frames it with a handle in the corner that drags it to any width, keeping its proportions, and a bar with Small (300px), Medium (600px), Large (900px) and Original size, the sizes asked for in the report. Escape or a click elsewhere lets it go. The handle is larger on a touch screen. The frame is drawn over the editor, never inside it, so nothing of it is sent. The image itself gets a width attribute, which Outlook needs since it ignores CSS on images, and the same width as an inline style, with max-width: 100% kept so it still shrinks on a phone. Any height is dropped so the image keeps its shape. Verified on the mock: a 1600px image shown at 546px was dragged to 291px, then set to Medium and sent; the sent HTML carries width="600", width: 600px and max-width: 100% on a cid: image, and no trace of the frame. Not tried by touch on a real phone. New strings: 3 ("Original size", "Drag to resize", "Image size"), added to all nine catalogs; 1614/1630 -> 1617/1633 translated in each. The size names reuse the existing Small, Medium and Large keys. The Dutch entries have not been read by a native speaker. Turkish is on its own branch (#32) and will need these three once both land. Fixes #26. Requested by @mbjboon82.