CKFinder 2.x/Users Guide/CKFinder Interface/Files Pane - Revision history

Anna: /* Viewing (Previewing) a File */ Updated to CKFinder 2.2

2012-03-30T12:51:07Z

‎Viewing (Previewing) a File: Updated to CKFinder 2.2

Anna: /* Advanced Operations */ Deleting a file in CKFinder added

2011-09-20T10:38:17Z

‎Advanced Operations: Deleting a file in CKFinder added

Anna: /* Advanced Operations */ Renaming a File added

2011-09-20T10:34:34Z

‎Advanced Operations: Renaming a File added

Anna: /* Advanced Operations */ Generating Thumbnails section added

2011-09-20T10:25:59Z

‎Advanced Operations: Generating Thumbnails section added

Anna: /* Advanced Operations */ Resize section added

2011-09-19T12:53:20Z

‎Advanced Operations: Resize section added

Anna: /* Advanced Operations */ Internal links added

2011-09-19T12:30:48Z

‎Advanced Operations: Internal links added

Anna: Part 1 of the article updated to CKFinder 2.1 Help

2011-09-19T12:28:03Z

Part 1 of the article updated to CKFinder 2.1 Help

Wiktor: Created page with 'The Files Pane lists all files available in the selected folder. == Different Views == The Files Pane may present two different views, depending on CKFinder settings (see "[[CK…'

2010-05-18T14:55:58Z

Created page with 'The Files Pane lists all files available in the selected folder. == Different Views == The Files Pane may present two different views, depending on CKFinder settings (see "[[CK…'

New page

The Files Pane lists all files available in the selected folder.

== Different Views ==

The Files Pane may present two different views, depending on CKFinder settings (see "[[CKFinder_2.x/Users Guide/CKFinder Interface/Toolbar/Settings|Settings]]"). The following is a comparison of the "'''Thumbnails'''" and the "'''List'''" views for the same folder:

[[Image:Ckfinder thumbnails view.gif|Image:Ckfinder_thumbnails_view.gif]]

[[Image:Ckfinder list view.gif|Image:Ckfinder_list_view.gif]] 

== Basic Operations ==

=== Selecting (Activating) a File ===

To select a file, making it the "active file" in CKFinder, simply click in the file. To make it easy to understand that the mouse is over the file, the file area will be colored. The selected file will have a different background color (generally blue). 

== Advanced Operations ==

Advanced operations may be achieved on a file by using its "Context Menu". The following options are available: <br>

[[Image:Ckfinder file context.gif|Image:Ckfinder_file_context.gif]]

'''Note''': Some context menu buttons may be disabled, depending on CKFinder settings enforced by your system administrator. See "[[CKFinder_2.x/Users Guide/CKFinder Configuration/Access Control|Access Control]]" for more information.

=== Selecting Files ===

To select a file, returning it to the hosting application, just click the "'''Select'''" option.

=== Viewing (previewing) Files ===

To preview a file in the browser, just click the "'''View'''" button. Not all kinds of files can be viewed on browsers, but this feature is quite useful for images, text and PDF files. In other cases, the browser will ask you to open the file with the proper application.

=== Downloading Files ===

To download a file, just click the "'''Download'''" button. The browser will ask you for the place to save the downloaded file in your computer.

=== Renaming Files ===

To rename a file, just click the "'''Rename'''" option in the context menu. A dialog box, containing the current file name, will appear, asking for the new name. Just type it and confirm.

Not all characters can be used in folder and files names due to limitations in the systems where CKFinder runs. For instance, the following characters cannot be used on folders and files names: \ / : * ? " < > |

'''Attention''': by renaming a file, links or media insertions available in other pages, which point to the renamed file, will be "broken", therefore not available anymore. So, be careful when using this feature.

=== Deleting Files ===

To delete a file, just click the "'''Delete'''" option in the context menu. A confirmation message will appear to ensure that this operation is desired.

'''Attention''': by deleting a file, links or media insertions available in other pages, which point to the deleted file, will be "broken", therefore not available anymore. So, be careful when using this feature.<br> 

@@ Line 89: / Line 89: @@
 In order to preview a file in the browser, choose the <strong>View</strong> option from its context menu. Not all kinds of files can be viewed in browsers, but this feature is quite useful for images, text, and PDF files. In other cases, the browser will ask you to open the file with an appropriate application.
-Depending on your browser and operating system settings, the file will be displayed in a new browser tab or a new browser window.
+When you attempt to preview an image, CKFinder will display in directly in a lightbox popup.
 === Downloading a File ===

@@ Line 74: / Line 74: @@
 * <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Downloading_a_File|Download]]</strong> &ndash; downloads the file from the server to your computer.
 * <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Resizing_a_File_(Image)|Resize]]</strong> &ndash; allows you to modify file size and/or create a new thumbnail.
-* <strong>Rename</strong> &ndash; changes the name of the file.
+* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Renaming_a_File|Rename]]</strong> &ndash; changes the name of the file.
-* <strong>Delete</strong> &ndash; permanently removes the file.
+* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Deleting_a_File|Delete]]</strong> &ndash; permanently removes the file.
 <note>Note: Some context menu options may be disabled (and thus grayed out), depending on CKFinder settings enforced by your system administrator.
@@ Line 152: / Line 152: @@
 <note>Attention: When you rename a file, links or media insertions available on other pages and pointing to the renamed file will be broken, and thus not available anymore. Because of that be careful when using this feature.</note>

@@ Line 70: / Line 70: @@
-* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Selecting_Files|Select]]</strong> &ndash; selects the file.
+* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Selecting_a_File|Select]]</strong> &ndash; selects the file.
-* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Viewing_(Previewing)_Files|View]]</strong> &ndash; displays the full-sized file in a new browser tab or window.
+* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Viewing_(Previewing)_a_File|View]]</strong> &ndash; displays the full-sized file in a new browser tab or window.
-* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Downloading_Files|Download]]</strong> &ndash; downloads the file from the server to your computer.
+* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Downloading_a_File|Download]]</strong> &ndash; downloads the file from the server to your computer.
-* <strong>Resize</strong> &ndash; allows you to modify file size and/or create a new thumbnail.
+* <strong>[[CKFinder_2.x/Users_Guide/CKFinder_Interface/Files_Pane#Resizing_a_File_(Image)|Resize]]</strong> &ndash; allows you to modify file size and/or create a new thumbnail.
 * <strong>Rename</strong> &ndash; changes the name of the file.
 * <strong>Delete</strong> &ndash; permanently removes the file.
@@ Line 81: / Line 81: @@
-=== Selecting Files ===
+=== Selecting a File ===
 In order to select a file by using the context menu, choose the <strong>Select</strong>	option. Alternatively, you can also perform a double-click on the file with your mouse.
 Depending on the environment where CKFinder is used, the selection operation can, for example, send the file URL to another application or insert an image directly into an article created in your CMS system.
-=== Viewing (Previewing) Files ===
+=== Viewing (Previewing) a File ===
 In order to preview a file in the browser, choose the <strong>View</strong> option from its context menu. Not all kinds of files can be viewed in browsers, but this feature is quite useful for images, text, and PDF files. In other cases, the browser will ask you to open the file with an appropriate application.
 Depending on your browser and operating system settings, the file will be displayed in a new browser tab or a new browser window.
-=== Downloading Files ===
+=== Downloading a File ===
 In order to download a file, choose the <strong>Download</strong> option from its context menu. The browser will ask you for a location on your computer to save the downloaded file. Depending on your browser and operating system settings, the file might also be opened immediately after it is downloaded by using an appropriate application of your operating system.
-=== Resizing Files (Images) ===
+=== Resizing a File (Image) ===
 In order to change the image size or its thumbnail size, choose the <strong>Resize</strong> option from its context menu. Once you enter new image dimensions or choose a thumbnail size, close the dialog window to apply the changes.
@@ Line 140: / Line 140: @@
 <note>Note: If the image is smaller than some of the thumbnails options (see example above), the ones that are unavailable will be grayed out.
 </note>

← Older revision		Revision as of 10:25, 20 September 2011
Line 127:		Line 127:

	<note>Note: The size of the original image may limit the options available for the <strong>Resize</strong> feature. The modified image size cannot exceed the original dimensions.		<note>Note: The size of the original image may limit the options available for the <strong>Resize</strong> feature. The modified image size cannot exceed the original dimensions.
		+	</note>
		+
		+
		+	=== Generating Thumbnails ===
		+	The <strong>Resize</strong> feature can also be used in order to generate resized copies of images (thumbnails) that you can use in articles on your website or in blog posts. Thanks to the thumbnail resizing feature the site administrator can set predefined thumbnail size options that can be used by CKFinder users. This will save you the effort to manually enter modified width and height values for each image and will let you keep the thumbnail sizes consistent across your site.
		+
		+	In order to use one of the predefined thumbnail sizes, choose the <strong>Resize</strong> option from the image context menu. In the <strong>Create a new thumbnail</strong> section of the <strong>Resize</strong> dialog window select the checkbox(es) representing the desired thumbnail size(s). On successful resizing a confirmation message will be displayed. The resized image copies will be created in the same folder and the new files will be named according to the thumbnail size option that you choose (with <code>_large</code>, <code>_medium</code> and <code>_small</code> suffixes added to the original file name).
		+
		+	[[Image:CKFinder_file_resize_thumbnails.png\|frame\|center\|Thumbnails generated in CKFinder]]
		+
		+
		+	<note>Note: If the image is smaller than some of the thumbnails options (see example above), the ones that are unavailable will be grayed out.
	</note>		</note>

← Older revision		Revision as of 12:53, 19 September 2011
Line 93:		Line 93:
	=== Downloading Files ===		=== Downloading Files ===
	In order to download a file, choose the <strong>Download</strong> option from its context menu. The browser will ask you for a location on your computer to save the downloaded file. Depending on your browser and operating system settings, the file might also be opened immediately after it is downloaded by using an appropriate application of your operating system.		In order to download a file, choose the <strong>Download</strong> option from its context menu. The browser will ask you for a location on your computer to save the downloaded file. Depending on your browser and operating system settings, the file might also be opened immediately after it is downloaded by using an appropriate application of your operating system.
		+
		+	=== Resizing Files (Images) ===
		+	In order to change the image size or its thumbnail size, choose the <strong>Resize</strong> option from its context menu. Once you enter new image dimensions or choose a thumbnail size, close the dialog window to apply the changes.
		+
		+	[[Image:CKFinder_file_resize.png\|frame\|center\|Resizing an image in CKFinder]]
		+
		+
		+	If the image is too big, you can alter its dimensions by entering new values into the <strong>Width</strong> and <strong>Height</strong> fields. By default the image ratio is locked, which you can see thanks to the [[Image:CKEditor_lock.png]] (<strong>Lock</strong>) button. This means that when you change one of the size values (width or height), the other one will be adjusted automatically.
		+
		+	If you want to freely modify both dimensions, click the <strong>Lock</strong> button in order to unlock the ratio. The button will now change to [[Image:CKEditor_unlock.png]] (<strong>Unlock</strong>) and modification of one dimension will not automatically cause the other one to be adjusted. To lock the image ratio again, click the <strong>Unlock</strong> button once more.
		+
		+	You can easily return to original image size by pressing the [[Image:CKEditor_reset_size.png]] (<strong>Reset Size</strong>) button. This will reset the image size; the original width and height will now appear in appropriate text boxes.
		+
		+	If you resize the image, you can decide to save it under the same name, overwriting the existing file. Please note that this operation cannot be undone and once you save the file with its modified dimensions, you will not be able to restore the original size. In order to overwrite the original image, leave the <strong>Create a new image</strong> checkbox unselected.
		+
		+	[[Image:CKFinder_file_resize_overwrite.png\|frame\|center\|Overwriting a resized image in CKFinder]]
		+
		+
		+	You can also decide to save the resized image in a new file and leave the original as is. If you select the <strong>Create a new image</strong> checkbox, you will be able to give the modified file a new name. By default CKFinder suggests to save the image under the name that is built from the original file name and new file dimensions (for example: <code>Sun1_100x100.jpg</code> when the original file was named <code>Sun1.jpg</code> and the file was resized to 100 pixels wide and 100 pixels high).
		+
		+	[[Image:CKFinder_file_resize_new.png\|frame\|center\|Creating a new resized image in CKFinder]]
		+
		+
		+	When you are ready with your changes, click the <strong>OK</strong> button to close the dialog window. On successful resizing a confirmation message will be displayed.
		+
		+	[[Image:CKFinder_file_resize_resized.png\|frame\|center\|File resized in CKFinder]]
		+
		+
		+	If you saved the resized image in a new file, you will see both files appear inside the folder.
		+
		+	[[Image:CKFinder_file_resize_both.png\|frame\|center\|Original and resized file in CKFinder]]
		+
		+
		+	<note>Note: The size of the original image may limit the options available for the <strong>Resize</strong> feature. The modified image size cannot exceed the original dimensions.
		+	</note>

@@ Line 1: / Line 1: @@
-The Files Pane lists all files available in the selected folder.
+__TOC__
 == Different Views ==
-[[Image:Ckfinder thumbnails view.gif|Image:Ckfinder_thumbnails_view.gif]]
+When you configure CKFinder to use the <strong>List</strong> view, the files will be presented in a list, with or without additional information like file name, size, or date (depending on your settings).
 == Basic Operations ==
-=== Selecting (Activating) a File ===
+=== Activating (Selecting) a File with a Mouse ===
-== Advanced Operations ==
+The file will be duplicated and its copy will be placed in the target folder. The source folder will remain untouched.
-Advanced operations may be achieved on a file by using its "Context Menu". The following options are available: <br>
+[[Image:CKFinder_file_drag_move.png|frame|center|Moving a file in CKFinder]]
-'''Note''': Some context menu buttons may be disabled, depending on CKFinder settings enforced by your system administrator. See "[[CKFinder_2.x/Users Guide/CKFinder Configuration/Access Control|Access Control]]" for more information.
+The file will be removed from the source folder and pasted into the target folder.
-=== Selecting Files ===
+[[Image:CKFinder_file_moved.png|frame|center|File moved in CKFinder]]
-=== Viewing (previewing) Files ===
+== Advanced Operations ==
-To preview a file in the browser, just click the "'''View'''" button. Not all kinds of files can be viewed on browsers, but this feature is quite useful for images, text and PDF files. In other cases, the browser will ask you to open the file with the proper application.
+[[Image:CKFinder_file_menu.png|frame|center|File context menu in CKFinder]]
-To download a file, just click the "'''Download'''" button. The browser will ask you for the place to save the downloaded file in your computer.
+* <strong>Select</strong> &ndash; selects the file.
-=== Renaming Files ===
+<note>Note: Some context menu options may be disabled (and thus grayed out), depending on CKFinder settings enforced by your system administrator.
-Not all characters can be used in folder and files names due to limitations in the systems where CKFinder runs. For instance, the following characters cannot be used on folders and files names: \ / : * ? " &lt; &gt; |
+=== Selecting Files ===
-'''Attention''': by renaming a file, links or media insertions available in other pages, which point to the renamed file, will be "broken", therefore not available anymore. So, be careful when using this feature.
+Depending on the environment where CKFinder is used, the selection operation can, for example, send the file URL to another application or insert an image directly into an article created in your CMS system.
-=== Deleting Files ===
+=== Viewing (Previewing) Files ===
-To delete a file, just click the "'''Delete'''" option in the context menu. A confirmation message will appear to ensure that this operation is desired.
+Depending on your browser and operating system settings, the file will be displayed in a new browser tab or a new browser window.
-'''Attention''': by deleting a file, links or media insertions available in other pages, which point to the deleted file, will be "broken", therefore not available anymore. So, be careful when using this feature.<br>&nbsp;
+=== Downloading Files ===