Rotate phpBB attachments images - exstension

[axew3]

Add (font awesome) icon after the image attachment name into the attachments panel (jpg, gif or png) that onlick open a modal popup where it is possible to rotate the image and save it. Preserve images transparencies. Immediately display the rotated image into the post, and not the browser's cached one.
Working on edit, post and reply mode. Light, secure.

NOTE:
Latest version is (always) here or on github
viewtopic.php?t=1639


Version: 1.0.4.2 has been released 02 Apr 2022
On github:
https://github.com/axew3/phpBB-image-at ... s-rotation

Version: 1.0.3 updated 04 Oct 2020
[attachment=0]phpBB-image-attachments-rotation-master_1.0.3.zip[/attachment]



Install

Copy the "w3all" folder into phpBB/ext/

So you'll have: phpBB/ext/w3all/w3imagerotation

Set ACP option "Recompile stale style components" to yes

Go to "ACP" > "Customise" > "Extensions" and enable the "Attachments images rotation" extension

Test things may doing a test post

If all ok, reset "Recompile stale style components" to no

Done

phpBB cookie domain

Note that the setting
ACP -> Security settings -> Cookie domain:
Need to be set properly. Leaving this setting empty, lead to make it fail the js code of the popup.
For example, on localhost, set it as localhost, or if into online site, mysite.com or my-site.co.uk or mysubdomain.mysite.com etc

How do i can style the rotation popup?

It is the file rotate_popup.html, which you can find into:

/ext/w3all/imageattachrotation/styles/prosilver/template/event/rotate_popup.html

Note that you need to respect the normal/correct html DOM in this file, that (anyway) start with a <style> tag
<style> .... </style>

... ... ...
It do not contain the starting 'html' and 'head' tags, and you do not have to add them (already added earlier)


phpBB image attachments rotation extension on github
from github: download the zip by clicking into Code button, then on Download zip.
Follow instructions on same download page.

To prepend icon, see here:
viewtopic.php?p=4852#p4852


OLD VERSIONS:

[DjPorkchop73]

I have tested this out on my test board and I really like it. It did have the cache issue as you stated but it can be fixed in time I am more than sure as you have done a wonderful job thus far.

I have many times uploaded attachment images that turned sideways on me for one reason or the other and I wished I could flip them. This plugin solves that. Very practical and usable. +1

[axew3]

The cache issue has been resolved, even if still not committed.
Now when image rotate, his id change into db, so when process executed, the id pushed to change id also into attachments panel at mean time.
The image will be immediately available after rotation, because his id will change. A by long time requested feature in phpBB easily done. I will commit all updates asap a js instruction will decide to work as expected, that update values into attachments panel to achieve immediately as soon the image as been processed. Then all will be complete!

[DjPorkchop73]

Molto ben fatto!
Very well done. I really like this plugin. It is very much needed.

[micka76]

Hello
How to put the icon BEFORE the link please?
Because on a smartphone it is not visible as the link is truncated, I found for the size and the color but not the placement
Thank you

visible


no visible

[axew3]

This is not the unique scenario where it is truncated. It is truncated also if the link name is too long, into any other device, standing on default phpBB attachments panel template. At moment the unique way to change this is:

Prepend icon to attachment link: how to

OPEN:
/w3all/imageattachrotation/styles/prosilver/template/event/overall_footer_body_after.html

search for:
i.style = "font-size:70%;margin:0px 0px 0px 5px;";
change into:
i.style = "font-size:70%;margin:0px 5px 0px 0px;";

search for:
this.after(ah); // work
change into:
this.before(ah); // work

search for:

Code: Select all

$(this).append( '<a class="w3rotate" href="javascript:void(0);"><i style="margin:0px 0px 0px 5px;font-size:70%" class="icon fas fa-undo fa-rotate-270"></i></a>'); 

change into:

Code: Select all

$(this).prepend( '<a class="w3rotate" href="javascript:void(0);"><i style="margin:0px 5px 0px 0px;font-size:70%" class="icon fas fa-undo fa-rotate-270"></i></a>'); 

note that into this last line, have been changed append that become prepend and the css margin, as above, moved to right 5px with 0px 5px 0px 0px

search for:

Code: Select all

var getPrevHref = $( this ).prev().attr('href'); // need to match on DOM

change into:

Code: Select all

var getPrevHref = $( this ).next().attr('href'); // need to match on DOM

search for:

Code: Select all

var getPrevHref = $( this ).prev().children().attr('href'); // need to match on DOM

change into:

Code: Select all

var getPrevHref = $( this ).next().children().attr('href'); // need to match on DOM

remember to recompile stale template.

p.s the extension is installed also here, but can be noted that when popup appear into iframe mode (as it is this example), it appear more on top on window, so if the post is with many replies, it seem that it do not has opened, because you won't see it if you not scroll to top the page. It has been already resolved with 3 lines of code, that still have not been applied here, and that maybe will become default on next 1.0.4.

[EDITED]