Working with Images

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

(Article contents proof-read and formatted)
Line 3: Line 3:
 
== Thumbnails ==
 
== Thumbnails ==
  
You can set thumbnails parameters by changing the values of the parameters:
+
You can set thumbnails parameters by changing the following values:  
<pre>Set Thumbnails = server.CreateObject("Scripting.Dictionary")
+
<source lang="asp">Set Thumbnails = server.CreateObject("Scripting.Dictionary")
 
Thumbnails.Add "url", baseUrl &amp; "_thumbs"
 
Thumbnails.Add "url", baseUrl &amp; "_thumbs"
 
Thumbnails.Add "directory", baseDir &amp; "_thumbs"
 
Thumbnails.Add "directory", baseDir &amp; "_thumbs"
Line 10: Line 10:
 
Thumbnails.Add "maxWidth", 100
 
Thumbnails.Add "maxWidth", 100
 
Thumbnails.Add "maxHeight", 100
 
Thumbnails.Add "maxHeight", 100
Thumbnails.Add "quality", 80</pre>  
+
Thumbnails.Add "quality", 80</source>  
 
{{Ckfinder_2.x Thumbnail Description}}
 
{{Ckfinder_2.x Thumbnail Description}}
  
Line 16: Line 16:
  
 
{{Ckfinder_2.x scaling description}}  
 
{{Ckfinder_2.x scaling description}}  
<pre>Set Images = server.CreateObject("Scripting.Dictionary")
+
<source lang="asp">Set Images = server.CreateObject("Scripting.Dictionary")
 
Images.Add "maxWidth", 1200
 
Images.Add "maxWidth", 1200
 
Images.Add "maxHeight", 1200
 
Images.Add "maxHeight", 1200
 
Images.Add "quality", 80
 
Images.Add "quality", 80
 
Images.Add "component", "Auto"
 
Images.Add "component", "Auto"
</pre>  
+
</source>  
The component entry indicates the method that should be used to handle images and thumbnails. These are the possible values:<br>
+
The <code>component</code> entry specifies the method that should be used to handle images and thumbnails. It can be set to one of the following values:  
  
*"Asp.Net", it should work with Asp.Net 1.1 and 2.0 without any extra software<br>  
+
* <code>Asp.Net</code> &ndash; it should work with Asp.Net 1.1 and 2.0 without any extra software.
*"Persits.Jpeg" Commercial component from Persits<br>  
+
* <code>Persits.Jpeg</code> &ndash; commercial component from Persits.
*"briz.AspThumb" Commercial component from BRIZ Software
+
* <code>briz.AspThumb</code> &ndash; commercial component from BRIZ Software.
*"AspImage.Image" Commercial component from ServerObjects. The available demo it's expired and doesn't seems to handle gifs properly<br>  
+
* <code>AspImage.Image</code> &ndash; commercial component from ServerObjects. The available demo is expired and does not seem to handle <code>.gif</code> files properly.
*"shotgraph.image", Commercial component from ShotGraph. The demo version doesn't allow resizing<br>  
+
* <code>shotgraph.image</code> &ndash; commercial component from ShotGraph. The demo version does not allow for resizing.
*"Auto": It will try to autodetect which one is available, in the order described above. It's the default value, but for better performance you should state the component that you are going to use.<br>  
+
* <code>Auto</code> &ndash; this setting will try to autodetect the available solution, in the order described above. It is the default value, but for better performance you should specify the component that you are going to use.
*"None": Image manipulation (thumbnails, maximum dimensions, validation) won't be available.<br><br>
+
* <code>None</code> &ndash; image manipulation (thumbnails, maximum dimensions, validation) will not be available.

Revision as of 15:26, 29 March 2011

CKFinder allows you to create thumbnails and to scale uploaded images to the preferred size.

This section describes working with images. It will provide you with the information on how to properly configure thumbnails and image resizing options.

Thumbnails

You can set thumbnails parameters by changing the following values:

Set Thumbnails = server.CreateObject("Scripting.Dictionary")
Thumbnails.Add "url", baseUrl &amp; "_thumbs"
Thumbnails.Add "directory", baseDir &amp; "_thumbs"
Thumbnails.Add "enabled", true
Thumbnails.Add "maxWidth", 100
Thumbnails.Add "maxHeight", 100
Thumbnails.Add "quality", 80
  • maxWidth and maxHeight – determine the maximum size of the thumbnails which can appear in CKFinder. These values are defined in pixels. You can obviously increase them, but the thumbnails will then look more like full-sized images than like miniatures.
  • quality – sets the quality of a thumbnail in a range from 1 to 100. The smaller the quality value, the smaller the size of the thumbnail. Notice that an acceptable quality value is about 45 and the most frequently used one is about 80.
  • directAccess – this setting may increase the overall performance of CKFinder. By default, CKFinder connects to the server connector to get the thumbnail. It is not a problem in most cases, because the connector sends the HTTP/304 Not Modified header most of the time to save the traffic and reduce server-side processing. However, sometimes it is better to leave cache control to the browser. When directAccess is set to true, thumbnails are loaded directly from the _thumbs folder by CKFinder. Note that it is impossible to use this setting, if the thumbnail directory is located outside the document root.
  • You may disable thumbnails by placing the bool value false in the enabled section.

Scaling

The scaling (resizing) option allows you to define the maximum size of uploaded images. If the image size is bigger than the one specified by you, the image will be scaled to the defined dimensions.

You can also change the quality of uploaded images by setting it in a range from 1 to 100. To apply these options you should change the following configuration settings:

Set Images = server.CreateObject("Scripting.Dictionary")
Images.Add "maxWidth", 1200
Images.Add "maxHeight", 1200
Images.Add "quality", 80
Images.Add "component", "Auto"

The component entry specifies the method that should be used to handle images and thumbnails. It can be set to one of the following values:

  • Asp.Net – it should work with Asp.Net 1.1 and 2.0 without any extra software.
  • Persits.Jpeg – commercial component from Persits.
  • briz.AspThumb – commercial component from BRIZ Software.
  • AspImage.Image – commercial component from ServerObjects. The available demo is expired and does not seem to handle .gif files properly.
  • shotgraph.image – commercial component from ShotGraph. The demo version does not allow for resizing.
  • Auto – this setting will try to autodetect the available solution, in the order described above. It is the default value, but for better performance you should specify the component that you are going to use.
  • None – image manipulation (thumbnails, maximum dimensions, validation) will not be available.