by axew3 » Mon Mar 29, 2021 3:57 pm
Add (font awesome) icon (prepend or append) to the image attachment name into the attachments panel (jpg, gif, png, webp) 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, reply mode and viewtopic (when/if quick-reply). Light, secure.
1.0.5 has been released:
updated 27 Oct 2023
viewtopic.php?p=6048#p6048
On github:
https://github.com/axew3/phpBB-image-at ... s-rotation
Version: 1.0.4.2 updated 02 Apr 2022
[attachment=0]phpBB-image-attachments-rotation-master_1.0.4.2.zip[/attachment]
On github:
https://github.com/axew3/phpBB-image-at ... s-rotation
Version: 1.0.4 updated 10 Apr 2021
[attachment=2]phpBB-image-attachments-rotation-master.zip[/attachment]
Old versions are here:
viewtopic.php?p=4815#p4815
Note
if updating: before to proceed, you'll have to disable the previous Attachments Rotation 1.0.3 extension into ACP Extensions Manager, and delete extension data.
Then remove the folder
/ext/w3all/imageattachrotation,
so follow installing the new 1.0.4
Install
Copy the "w3all" folder into phpBB/ext/
So you'll have: phpBB/ext/w3all/w3imagerotation
Go to "ACP" > "Customise" > "Extensions" and enable the "Attachments images rotation" extension
Done
How do i can style the rotation popup?
It should fit your theme, anyway you can easily change and style it into:
HTML:
/ext/w3all/imageattachrotation/styles/prosilver/template/event/overall_footer_body_after.html
(
note that you (maybe) do NOT have to change
w3classes and
w3ids for html elements, or the javascript code will not work)
Code: Select all
<div id="w3rPopup" class="w3rPopupContainer text-center inputbox" style="display:none">
<table class="w3wrapTABC">
<tr><td class="w3wrapTDC">
<div class="w3divContainer">
<div class="w3divCont"><strong>{{ lang('W3POPUP_TEXTEXPLAIN') }}</strong></div>
<div class="w3divimg"><img id="w3-img-rotate" src="" onclick="w3rotateByDeg(this);" /></div>
<div class="w3divCont"><button class="w3divCont button" type="submit" id="w3btn" onclick="w3sendThis(document.getElementById('w3-img-rotate'));">{{ lang('W3POPUP_BUTTONTEXT') }}</button></div>
</div>
</td></tr></table>
</div>
the html code is all on top of the file
CSS:
/ext/w3all/imageattachrotation/styles/prosilver/template/css/style.css
How do i can choose to prepend or append the rotate icon?
/ext/w3all/imageattachrotation/styles/prosilver/template/event/overall_footer_body_after.html
search for line (+- on top):
Code: Select all
var Pw3A = 1; // 0 Append icon, 1 Prepend icon (require to rebuild the phpBB template)
- dolphin.jpg (16.2 KiB) Viewed 13555 times
- dolphin.jpg (14.49 KiB) Viewed 13555 times
- image_rotation_output_example.png (20.55 KiB) Viewed 13516 times
- attachEx1.png (45.39 KiB) Viewed 13530 times
- Attachments
-
- phpBB-image-attachments-rotation-master_1.0.4.2.zip
- (38.01 KiB) Downloaded 976 times
-
- phpBB-image-attachments-rotation-master.zip
- (37.83 KiB) Downloaded 1033 times
[b][size=120][color=#BF0040]Add (font awesome) icon (prepend or append) to the image attachment name into the attachments panel (jpg, gif, png, webp) 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.[/color]
Working on edit, post, reply mode and viewtopic (when/if quick-reply). Light, secure. [/size][/b]
[color=#BF0080][size=150][b]1.0.5 has been released: [/b][/size][/color]
[size=130]updated 27 Oct 2023[/size]
[attachment=0]phpBB-image-attachments-rotation-1.0.5.zip[/attachment]
https://www.axew3.com/w3/forums/viewtopic.php?p=6048#p6048
[b]On github:[/b]
https://github.com/axew3/phpBB-image-attachments-rotation
[strike][size=160][color=#BF0080][b]Version: 1.0.4.2[/b][/color][/size] updated 02 Apr 2022
[attachment=0]phpBB-image-attachments-rotation-master_1.0.4.2.zip[/attachme[/strike]nt]
[b]On github:[/b]
https://github.com/axew3/phpBB-image-attachments-rotation
[strike][size=160][color=#BF0080][b]Version: 1.0.4[/b][/color][/size] updated 10 Apr 2021
[attachment=2]phpBB-image-attachments-rotation-master.zip[/attachment][/strike]
[b]Old versions are here:[/b]
https://www.axew3.com/w3/forums/viewtopic.php?p=4815#p4815
Note [b]if updating:[/b] before to proceed, you'll have to disable the previous Attachments Rotation 1.0.3 extension into ACP Extensions Manager, and delete extension data.
Then remove the folder [i]/ext/w3all/[b]imageattachrotation[/b][/i],
so follow installing the new 1.0.4
[size=150]
Install[/size]
Copy the "w3all" folder into phpBB/ext/
So you'll have: phpBB/ext/w3all/w3imagerotation
Go to "ACP" > "Customise" > "Extensions" and enable the "Attachments images rotation" extension
Done
[size=150]How do i can style the rotation popup?[/size]
It should fit your theme, anyway you can easily change and style it into:
[b]HTML:[/b]
[i]/ext/w3all/imageattachrotation/styles/prosilver/template/event/[b]overall_footer_body_after.html[/b][/i]
([b]note[/b] that you (maybe) do NOT have to change [b]w3[/b]classes and [b]w3[/b]ids for html elements, or the javascript code will not work)
[code]<div id="w3rPopup" class="w3rPopupContainer text-center inputbox" style="display:none">
<table class="w3wrapTABC">
<tr><td class="w3wrapTDC">
<div class="w3divContainer">
<div class="w3divCont"><strong>{{ lang('W3POPUP_TEXTEXPLAIN') }}</strong></div>
<div class="w3divimg"><img id="w3-img-rotate" src="" onclick="w3rotateByDeg(this);" /></div>
<div class="w3divCont"><button class="w3divCont button" type="submit" id="w3btn" onclick="w3sendThis(document.getElementById('w3-img-rotate'));">{{ lang('W3POPUP_BUTTONTEXT') }}</button></div>
</div>
</td></tr></table>
</div>[/code]
the html code is all on top of the file
[b]CSS:[/b]
[i]/ext/w3all/imageattachrotation/styles/prosilver/template/css/[b]style.css[/b][/i]
[size=150]How do i can choose to prepend or append the rotate icon?[/size]
[i]/ext/w3all/imageattachrotation/styles/prosilver/template/event/[b]overall_footer_body_after.html[/b][/i]
search for line (+- on top):
[code]var Pw3A = 1; // 0 Append icon, 1 Prepend icon (require to rebuild the phpBB template)[/code]
[attachment=6]dolphin.jpg[/attachment][attachment=5]dolphin.jpg[/attachment]
[attachment=3]image_rotation_output_example.png[/attachment]
[attachment=4]attachEx1.png[/attachment]