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.

2 Likes

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.

Hi @matt @godspelled,

Late to the party here. After playing around with snap.as for the past few weeks I noticed that the rotation issue seems to happen when I upload pictures I’ve taken using my phone.

If the photo was taken using a phone in the upright position then snap.as will rotate it to fit. Any photos that were taken landscape upload perfectly normal.

Hopefully, this helps. Or maybe this has been resolved by now.

I’d love to have a few simple photo editing features like rotation and cropping. Nothing crazy needed.

Have a great weekend everyone!

As an end-user, the simplest way to get the images to display correctly is to crop them slightly on your phone before uploading them. It doesn’t take much of a crop, just a few pixels, but that causes your phone to write the image differently and it’s then read correctly on the other end.

Been a few years since I’ve had the tools at hand to grovel through the jpeg data and metadata to determine exactly what’s going on there, but cropping the image is a fairly quick solution and it solves the problem (which is not unique to write.as - it happens on Lumberjocks.com where I post woodworking things).

I know this is something that write.as needs to fix, but whenever I run into this issue, this is what I do. First I make 3 copies of the photo on my phone. Then each copy gets rotated to a certain side. I then upload all 4 photos and pick the one that shows up correctly, then delete the rest.

Of course this fix only works when it happens to one or two photos. I’ve yet to see this issue occur on multiple photos.