Loading...
 
Features / Usability

Features / Usability


Wysiwyg module: scaling/resizing image online ?

posts: 7 France

Hello all,

Newbie to Tikiwiki, I installed it a week ago in order to test the interface, the goal being to migrate from an old interface that we presently use (Dekiwiki from Mindtouch).

I kind of configure it the way I want except for a major "no go" : the way the TikiWiki interface is handling image insertion and manipulation.
What I would like to have is resizing image through the graphical editor (not manually setting the number of pixels in the image attributes), as it is done through a TinyMCE Wysiwyg editor, such as Workpress for those who know.

Resize Handling

Is there a way to get image resize handling in Tikiwiki ?
Are there any development going on regarding such function?

I found this, but I'm not sure if it applies:
https://github.com/ckeditor/ckeditor5/issues/5167

posts: 126886 United Kingdom
Seb wrote:
What I would like to have is resizing image through the graphical editor (not manually setting the number of pixels in the image attributes)

Hi Seb

You can get Tiki to do this with CKEditor, but you have to use it in HTML mode, so you lose a lot of the wiki goodness.

Try it out by unchecking "Use Wiki syntax in WYSIWYG" on the WYSIWYG Control Panel, and you might have to add the CKEditor HTML Image tool on the toolbar... it's been a long time since i tried it.

posts: 7 France
Jonny Bradley wrote:

Hi Seb

You can get Tiki to do this with CKEditor, but you have to use it in HTML mode, so you lose a lot of the wiki goodness.

Try it out by unchecking "Use Wiki syntax in WYSIWYG" on the WYSIWYG Control Panel, and you might have to add the CKEditor HTML Image tool on the toolbar... it's been a long time since i tried it.


Hi Jonny,

I tried to set the option the way you described... but without success.

Here are the different Wysiwyg sttings (Tiki21):
Config Wysiwyg

And what I got on the editor:
Test1

Still no possibility to resize the image.
What are the other options to set ?
(Sorry for my "noobiness"). redface

posts: 126886 United Kingdom
Seb wrote:

Here are the different Wysiwyg sttings (Tiki21):
Config Wysiwyg

That's odd, not what my tiki-admin.php?page=wysiwyg control panel looks like. There should be one called "Use Wiki syntax in WYSIWYG" in-between "Reopen with the same editor" and "Inline WYSIWYG editor" (which you should disable by the way, it was never finished).

This is what i see on my local Tiki 21.x:
Screenshot 2020 04 29 At 08.58.47

posts: 2428 Czech Republic
Jonny Bradley wrote:
"Inline WYSIWYG editor" (which you should disable by the way, it was never finished).


Hello Jonny!

AFAICR it was working once I tried in the past. I would not call it "never finished" imho. But "experimental", yes.

luci

PS: it is odd if the versions are both 21.x indeed (isn't it 20.1 instead? One of my clients was confused by the version numbers recently too, btw...)

posts: 7 France
Jonny Bradley wrote:
That's odd, not what my tiki-admin.php?page=wysiwyg control panel looks like.


Oh yes, that's because what I posted is the result of a search of the "wysiwyg" term through the admin panel.

Here is how my wysiwyg contol panel look like now:
Config Wysiwyg B

With this configuration, an image inserted from the gallery or from a web link... only appears as a link.
I can copy/paste an image on the editor and get a small editor window to change the image attributes (which is not bad) but it does not show up if I save the edited page. In fact, all the image code (raw image) disappears after a save.
Test3
Test4

PS: But it works if I copy and paste the html code from an external page (images from external links are appearing properly).

posts: 126886 United Kingdom
Seb wrote:

I can copy/paste an image on the editor and get a small editor window to change the image attributes (which is not bad) but it does not show up if I save the edited page. In fact, all the image code (raw image) disappears after a save.
Test3
Test4

PS: But it works if I copy and paste the html code from an external page (images from external links are appearing properly).


Is that page in HTML mode? If it was made before you disabled the "wiki in wysiwyg" preference then it will still be wiki mode. Try it on a new page - or switch to wiki mode (the yellow pencil button) and back again and it should be in html (and you can see that in the page history).
Also i seem to remember the resize image in the editor thing only works in some browsers, so maybe try Firefox if you're not in that already?

posts: 7 France
Jonny Bradley wrote:

Is that page in HTML mode? If it was made before you disabled the "wiki in wysiwyg" preference then it will still be wiki mode. Try it on a new page - or switch to wiki mode (the yellow pencil button) and back again and it should be in html (and you can see that in the page history).
Also i seem to remember the resize image in the editor thing only works in some browsers, so maybe try Firefox if you're not in that already?


I'm pretty sure the editor is in HTML mode (I can switch from html to wiki editor).
With your tip, I can copy-paste a raw image from a word document now. Things are progressing... smile

For the image insertion, I tested different things (I'm using Firefox) and the problem seems to come from the way the PluginImg handles the "Include Image" function in the page: whatever the setting, it seems that it always does it as
Copy to clipboard
{img fileId="#" thumb="box"}
rather than a HTML code such as
Copy to clipboard
<img src="http://***.php?id=#">
.


Does it mean that Image or File Gallery can't be used in HTML mode or that there are other options to set somewhere? (I didn't find anything)

(Image inserted shows up if I use the "Use Wiki syntax in WYSIWYG" option but then I can't edit these images the way I'd like, through the small window).

posts: 126886 United Kingdom
Seb wrote:
For the image insertion, I tested different things (I'm using Firefox) and the problem seems to come from the way the PluginImg handles the "Include Image" function in the page: whatever the setting, it seems that it always does it as
Copy to clipboard
{img fileId="#" thumb="box"}
rather than a HTML code such as
Copy to clipboard
.


Does it mean that Image or File Gallery can't be used in HTML mode or that there are other options to set somewhere? (I didn't find anything)

(Image inserted shows up if I use the "Use Wiki syntax in WYSIWYG" option but then I can't edit these images the way I'd like, through the small window).


It looks like you are still in wiki syntax as you say, the images are using the img wiki plugin, if you click the source button on the wysiwyg tool bar do you see html? If you use the yellow pencil it will convert it to wiki syntax, but then when you go back to wysiwyg mode it should be converted to html.
And as i said i think earlier, you will need to replace the wiki plugin img tool on the toolbar with the CKEditor html image one.

However, after thinking about this for a few days i just think it's a really bad idea and letting users fix images to specific pixel sizes randomly will make a very non-responsive site, but maybe you don't need you site to be usable on phones and tablets?

posts: 7 France
Jonny Bradley wrote:

It looks like you are still in wiki syntax as you say, the images are using the img wiki plugin, if you click the source button on the wysiwyg tool bar do you see html? If you use the yellow pencil it will convert it to wiki syntax, but then when you go back to wysiwyg mode it should be converted to html.
And as i said i think earlier, you will need to replace the wiki plugin img tool on the toolbar with the CKEditor html image one.

However, after thinking about this for a few days i just think it's a really bad idea and letting users fix images to specific pixel sizes randomly will make a very non-responsive site, but maybe you don't need you site to be usable on phones and tablets?


I really appreciate your help and patience. Maybe what I'm asking for is just impossible right now...

I am on the html editor: if I switch to code, it is HTML coding.
I added all the possible "img" or "file" plugin on the tool bar, all are calling the "File Gallery" module. What I'm saying is that going through this image insertion process, the resulting inserted line is coded in Wiki Syntax.

If I switch from HTML to Wiki editor, this is really worst: everything is converted to Wiki code, hence all my copy/paste image disappear and the other do not show up.

And you are right, I don't really care about appearance on mobile phone or so. It is for an academic use on a private network, the Wiki being used as a giant lab-book and notepad for researchers.
My big concern is i) the easiness for us (the support team) to transfer pages from the old wiki to TikiWiki (hence are mandatory: copy/paste of HTML code and raw images + possibility to quickly resize images and formatting) & ii) the easiness for the users to create new pages, close to the way they are used to (hence are mandatory: copy/paste from a word document or so + insertion of files from their PC or the internet).

posts: 7 France
Jonny Bradley wrote:
...


A small "Up" before giving up...

I still didn't find how to get both : 1. Copy/paste from other source & 2. Insert image from upload or web link.
1. Is working in html mode but not 2.
2. is working in wiki mode but not 1.

Can someone tell me if it is possible or not to get that working... or if I'm too dumb.
As I say earlier, TikiWiki is on top of my list but this issue is a clear showstopper for me.

Thanks.

posts: 2428 Czech Republic

Hi Seb,

if you intend to use HTML mode in Wysiwyg, you can try putting e.g. HTML code like this:
Copy to clipboard
<img src="display%fileId%" width="640">


In the Wiki markup to enter when image selected from "file gallery manager" of your File Gallery ( tiki-list_file_gallery.php?edit_mode=1&galleryId=1 ) to be inserted instead of the default wiki markup.

HTH,
luci

Seb wrote:

I'm pretty sure the editor is in HTML mode (I can switch from html to wiki editor).
With your tip, I can copy-paste a raw image from a word document now. Things are progressing... smile

For the image insertion, I tested different things (I'm using Firefox) and the problem seems to come from the way the PluginImg handles the "Include Image" function in the page: whatever the setting, it seems that it always does it as
Copy to clipboard
{img fileId="#" thumb="box"}
rather than a HTML code such as
Copy to clipboard
.


Does it mean that Image or File Gallery can't be used in HTML mode or that there are other options to set somewhere? (I didn't find anything)

(Image inserted shows up if I use the "Use Wiki syntax in WYSIWYG" option but then I can't edit these images the way I'd like, through the small window).

posts: 7 France
luciash d' being 🧙 wrote:

Hi Seb,

if you intend to use HTML mode in Wysiwyg, you can try putting e.g. HTML code like this:
Copy to clipboard


In the Wiki markup to enter when image selected from "file gallery manager" of your File Gallery ( tiki-list_file_gallery.php?edit_mode=1&galleryId=1 ) to be inserted instead of the default wiki markup.

HTH,
luci


Luci, my savior... this is exactly the hidden setting I was looking for.

I manage to have it working by using the following code (in the File Gallery option you pointed):

Copy to clipboard
<img src="./tiki-download_file.php?fileId=%fileId%&amp;display" width="640" />


Thanks so much. I will test further but it seems to do what I wanted.

Seb.

posts: 2428 Czech Republic

Hi Seb,
you are welcome! Glad it helped you! :-)

luci

Seb wrote:

Luci, my savior... this is exactly the hidden setting I was looking for.

I manage to have it working by using the following code (in the File Gallery option you pointed):

Copy to clipboard


Thanks so much. I will test further but it seems to do what I wanted.

Seb.


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting