Image sizes in WYSIWYG

17 posts by 5 authors in: Forums > CMS Builder
Last Post: June 4, 2010   (RSS)

By pod9 - May 21, 2010

How do I edit the image sizes in the WYSIWYG (note I do not want to drag the corners of the image because thjis means the proportions may be lost when done in IE).

At present I either have the option of the original image size or a thumbnail size which seems to be set to 150pixels. Can I change the width of this thubmnail size and can I have a choice of thumbnail sizes?

Ideally I would like my clien to be bale to insert an image that it the exact original size or have options for thumnail1 (say 100pixles wide), thmnail2 (say 200pixles wide) and thumbnail3 (say 300pixles wide).
Pod9

Re: [pod9] Image sizes in WYSIWYG

By jarvis - May 21, 2010

When you upload an image, it then shows you the dimensions, can you not alter the width or height here? Altering just one and deleting the other will constrain the proportions of the image.

Does that help?

Re: [pod9] Image sizes in WYSIWYG

By Donna - May 24, 2010

Hi pod9!

You can change the default thumbnail sizes by editing the specific field itself, in the section editor. To find this, go to the section editor, modify the section in question, then modify the WYISWYG field. Here, you can set up to 5 different image sizes (the default size, plus 4 thumbnails).

I hope this helps! :)
Donna

--
support@interactivetools.com

Re: [Donna] Image sizes in WYSIWYG

By pod9 - May 26, 2010

I have made these chnages in the section editor but when I try to insert an image through the WYSIWYG these thumbnail options are not shown. There are only 2 options, small or large. Small seems to be the first thumbnail and large seems to be the main image size?
Pod9

Re: [pod9] Image sizes in WYSIWYG

By Jason - May 31, 2010

Hi,

Once you select an image to insert (either small or large) there is a field called "Dimensions" where you can specify the actual dimensions you want the image to be displayed with. This can be edited at any time by right-clicking on the image and selecting "Insert/Edit Image".

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Image sizes in WYSIWYG

By pod9 - June 2, 2010

This will not work because:
1) it will not resize the image, it just changes the html width/height attributes
2) my client will have to remember to keep sizes consistant rather than just choosing small, medium, large (which are pre-set)
3) you would need to know what the proportions are - for example if the main image is 500px wide and 178px high and my client wants to change it to 140px wide they would have to work out the correct height!

Can this not be done somehow how I was previously told - just pick from small, med, large? Or at least, how do I set the initial thumbnail size?
Pod9

Re: [pod9] Image sizes in WYSIWYG

By Jason - June 2, 2010

Hi,

You can change how thumbnails are created by going into your section editor and modifying the wysiwyg field. The dimensions of the different thumbnails are found under the "Input Validation" section.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Image sizes in WYSIWYG

By pod9 - June 3, 2010

[font "Times New Roman"]Jason, we seem to be going round in circles here. Please see previous questions on this page. I know that you can go into the section editor and modify the thumbnail sizes. However I can not see anyway of choosing these thumbnails once the user is in the WYSIWYG editor. There is only an option in the WYSIWYG to choose small or large. All of this has already been explained above.[/#000000]

[font "Times New Roman"] [/#000000]



[font "Times New Roman"]If you are not understanding my question then please try and set 5 different images sizes in a section editor for a WYSIWYG and then try and use these different sizes in a WYSIWYG.[/#000000]
Pod9

Re: [pod9] Image sizes in WYSIWYG

By Jason - June 3, 2010

Hi,

It appears that Tinymce (which is the wysiwyg editor) doesn't support multiple images sizes like that.

Here is a work around that might work for you.
If you go into cmsAdmin/lib/wysiwyg.php (or wysiwyg_custom.php if you're using that) you can add an advanced image plugin.

Find the function that looks like this:
tinyMCE.init({
mode : "exact",
theme : "advanced",
....

Add the sections highlighted in red:
extended_valid_elements :"script[language|type] a[name|href|target|title|onclick]",

......

plugins: "inlinepopups,contextmenu,table,fullscreen,paste,media,spellchecker,advimage",

If you go to your wysiwyg editor now (you may have to clear your cache) and click on the image button, you'll have a different window.

Select the large image for the best results. If you go to the "Appearance" tab, you'll see a spot where you can change the dimensions of the image. Underneath will be a check box called "Constrain proportions". This will keep the ratio of height to width the same automatically.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/