Rotate phpBB attachments images - exstension

User avatar
axew3
w3all User
w3all User
Posts: 2677
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Rotate phpBB attachments images - exstension

Post by 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:
Attachments
phpBB-image-attachments-rotation-master_1.0.3.zip
(39.75 KiB) Downloaded 1131 times
image_rotation_output_example.png
image_rotation_output_example.png (20.55 KiB) Viewed 18624 times
phpBB-image-attachments-rotation-master_1.0.2.zip
(35.26 KiB) Downloaded 1081 times
phpBB-image-attachments-rotation-master1.0.1.zip
(34.81 KiB) Downloaded 1119 times
phpBB-image-attachments-rotation-master.zip
(33.23 KiB) Downloaded 1094 times
32769191_1317613495048760_2189393457838030848_n.jpg
32769191_1317613495048760_2189393457838030848_n.jpg (14.49 KiB) Viewed 18730 times
32769191_1317613495048760_2189393457838030848_n.jpg
32769191_1317613495048760_2189393457838030848_n.jpg (16.2 KiB) Viewed 18730 times
User avatar
DjPorkchop73
User www
User www
Posts: 80
Joined: Thu Aug 20, 2020 6:45 pm
Location: Egyptian Valley of Illinois

Re: Rotate phpBB attachments images - exstension

Post by 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
If I could I would. If I don't, it's because I am lazy!

"Don't gain the world and lose your soul, wisdom is better than silver and gold" -Bob Marley
User avatar
axew3
w3all User
w3all User
Posts: 2677
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: Rotate phpBB attachments images - exstension

Post by 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!
User avatar
DjPorkchop73
User www
User www
Posts: 80
Joined: Thu Aug 20, 2020 6:45 pm
Location: Egyptian Valley of Illinois

Re: Rotate phpBB attachments images - exstension

Post by DjPorkchop73 »

Molto ben fatto!
Very well done. I really like this plugin. It is very much needed.
If I could I would. If I don't, it's because I am lazy!

"Don't gain the world and lose your soul, wisdom is better than silver and gold" -Bob Marley
micka76

Re: Rotate phpBB attachments images - exstension

Post by 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
Image

no visible
Image
User avatar
axew3
w3all User
w3all User
Posts: 2677
Joined: Fri Jan 22, 2016 5:15 pm
Location: Italy
Contact:

Re: Rotate phpBB attachments images - exstension

Post by 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]
Post Reply