How to rotate images

I’m a newbie to Write.as but I’ve searched the forum and not found an answer to this one. When I upload photos to Snap.as and then copy them into my blog they are often rotated. Especially photos taken in portrait, are laid on their side … but it also looks as if landscape pictures I take with my phone ‘the wrong way round’ (what?) are rendered upside down.

Is there a way of rotating images in my blog post so they are correctly rendered?

1 Like

Here’s a solution I found. You add a class to your CSS, e.g.

.rotateimg180 {

-webkit-transform:rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);
}

(Or 90 or 270… This should ensure it works in all browsers.)

Then enter the image with HTML, e.g.

<img class="rotateimg180" src="whatever" alt="" />

If you know of a neater solution please let me know.

1 Like

Thanks for reporting this, @godspelled – that CSS solution does seem to work! But we’d really like to fix it on our end, as we’ve heard about a couple other people having this same issue, and we’re still investigating what’s going on.

If you don’t mind, could you email us the original image(s) you’re trying to upload to hello [ at ] snap.as, so we can take a look at what’s happening?

@matt
More thoughts on images: The images I uploaded were ones I had in Google Photos and had to download to my computer before I could upload them to Snap.as. It was when I uploaded them that the rotation happened: it was as if Snap.as didn’t want to accept portrait orientation.
When I added images to a post and used the CSS .rotateimg class to rotate them, there was also an issue with overlap: the rotated image overlapped content (either text or another image) above and below. My workaround was to add a couple of lines with &nbsp; before and after the image to adjust the spacing.