Channel Images Documentation

Installation and Updating

Installing

1. Within the /system/expressionengine/third_party/ directory, copy the channel_images folder into your sites ./system/expressionengine/third_party/ directory.
2. Within the /themes/third_party/ directory, copy the channel_images folder into your sites./themes/third_party/ directory.
3. Go to the Modules area in the ExpressionEngine control panel, find Channel Images in the list, and click Install.

Updating

1. Within your sites ./system/expressionengine/third_party/ directory, delete the channel_images folder and upload the new one from the /system/expressionengine/third_party/ directory in your download package.
2. Within your sites ./themes/third_party/ directory, delete the channel_images folder and upload the new one from the /themes/third_party/ directory in your download package.
3. Go to the Modules area in the ExpressionEngine control panel and click the Run Module Updates button.

Overview of Tags

Channel Images has five main template tags.  However, template development should really occur using the actual short field name from your channel field setup.  The Images Tag and the fieldtype are identical in use if you are using the field from within a Channel Entries loop.

Images Tag

This is the main tag of the Channel Images module. It is identical to using just the short name for the field. This tag would be used to create thumbnail displays or full image galleries. It is designed to show the images in the order in which they are laid out in the entry.  In this tag you have access to all the variables or “sizes” as called in your channel field settings.

Grouped Images Tag

The grouped_images tag sorts the images by category. Where the Images tag lays out the images in order. This tag first groups the images by category and then show the images within that category in the order in which they are laid out in the entry.

Images Static Tag

This is not a commonly used tag. This is a single instance tag that does not loop. It is designed to push Channel Images images into variables coming from other field types.  The images_static tag will look for embed variables in a nested field and output image data from the ordered variable called.

Next Image Tag

This tag is very simple. It will just give you what the next image from the list is.

Previous Image Tag

This tag is very simple. It will just give you what the previous image from the list is.

Zip Tag

This tag is designed for local file uploads only. When the tag runs it will zip all the images from that entry together.

Add Channel Images Field

Adding the Field

To add Channel Images to your Channel simply add the field and select Channel Images from the fieldtype choices. Once you make the choice you will see the following field type setup (as of v. 5.4.16).

Channel Images also has two layout options, Tiles and Table. Tiles is a simple view option where you have no need for custom fields. Table view allows for additional content entry. Option to change titles, descriptions, categories and other custom fields.

Upload Actions

Setting up Channel Images is fairly straight forward. Most important is to setup your “sizes” and “actions”. Channel Images can have an unlimited amount of sizes and actions per size. By default you get three sizes added to your field, small, medium and large. These can be changed by clicking on the size title.

By clicking Show Settings you will see a new area of actions. Currently Channel Images support over 40 different actions. These actions will take place in the order in which they are placed. Each action will occur after the last. For example if have colorize then resize, the image will colorize before the image resizes.

Each action has instructions when chosen.

Upload Location Settings

The Upload Location Settings tab gives you control of where the files will go. Channel Images has three options Local, Amazon S3, Rackspace Cloud Files.  Click the Test Location button to see if the connection works.

Local Settings

Channel Images uses standard ExpressionEngine File Upload Folders to provide local uploads. Each entry will create a subfolder with the entry id number. If you choose to Keep Original Image then the uploaded file will be stored and will allow for regeneration of images if preferences change in the future. Note: Without storing the original image you will never be able to regenerate images.

Amazon S3 and Rackspace Cloud Files

Optionally remote uploading is possible. Note: All remote uploads still upload first through the server. So maximum php upload limits and post size still are in effect.

Fieldtype Settings

Channel Images has extensive <i>Fieldtype Settings</i>. The following is a list of the options.

1) Categories

- Aiblity to categories to individual images. This is not connected to ExpressionEngine categories. Commas are separated by a comma.

2) Default Category

- Automatically give each image a category

3) Show Stored Images

- Allows for you to connect images already uploaded on another entry. Note: Only images in the same field group are linkable. 

4) Limit Stored Images by Author

- Only show Stored Images that have the same author of the current member.

5) Stored Images Search Type

-  When viewing stored images you can show all images without reference to their entry or show all entries and then the images.  This is useful when hundreds of entries of images exist.

6) Show Import Files

- Add an Import Files button to the Channel Images field. When clicked it will open a box that will allow you to click and add files from a local path on the server. Useful if you wish to import images already on your server.

7) Show Image Edit Button

- Add an Edit Image button to the Channel Images field per image. This button allows for multiple options for manipulating individual images.  It allows for simple cropping, rotation and regeneration of images.

8) Show Image Replace Button

- By default Channel Images does not allow you to upload an image with the same name. The Replace Button allows for uploading of a replacement image.  

9) Allow Per Image Action

- This allows for single actions to take place from the entry. By clicking the Action Button, per image, a popup will occur that allows you to do single actions. For example, sepia, colorize, resize and other actions within Channel Images.

10) Image Limit

- Simply limit how many images can be uploaded to an entry. Provides a numerical count down on the entry.

11) Hybrid Upload

- By default Channel Images uses HTML5 uploader. Hybrid Upload provides a Flash fallback uploader.

12) Create Progressive JPEG

- All images creating using the default GD2 library will be progressive.

13) Original Image Option in WYSIWYG

- Integrated WYSIWYG plugin option to show your original image. Without this option on, only the additional sizes will be shown.

14) Save image metadata in Custom Field

- All meta data will be stored in the action exp_channel_data table. This will allow for ExpressionEngine search tools to find text within the standard database table.

15) Disable Cover button

- Remove the Cover Image option from the image list.

16) Convert all uploaded images to JPG

- Useful if some members upload png or gif files you wish always converted to jpg.

17) Move Cover images to the first position

- Always move the selected cover image to first position. In a gallery environment this would always place the image first.

18) WYSIWYG Output

- Within the embeded WYSIWYG you may use the full URL of the image or a static variable. Static Image variables allow you to use the Static Images tag to create custom looks or options from inside another field.

19) Parse IPTC, EXIF and XMP

- Parses data and makes all variables available for use in templates and Channel Images custom fields.

20) ACT URL

- Useful for debugging. This URL must fire to accept AJAX requests from the module.

 

Field Columns are customizable as well. By removing the text from the input field of the column will remove the option from the Channel Images entry table. You are required to have at least one field. If you wish to have a clean, image only layout, switch to the Tile View.

 

Using the Channel Images Field

When creating an Entry within ExpressionEngine you will be shown the Channel Images fieldtype. Depending on your setup you will either see the Tile View or the Table View.

Table View

This is the powerhouse of the Channel Images fieldtype. It gives you the option of controlling multiple levels of content and actions.  There are three main buttons that work for the entire field. Those are Upload Images, Stored Images, and Import Images.

 Upload Images

- This button opens a multi-select window where you can choose one or multiple images from your computer or device. Each image will upload with a progress bar and process any actions once complete. Note: You may simply drag and drop images to anywhere in the field as well if you are using an HTML5 compliant browser.

 Stored Images

- Opens an area that will allow you to select other images from the same field group. This button is optional and configurable in the field settings tab.

 Import Images

- Opens a small popup where you can select images from a local server directory. This button is optional and configurable in the field settings tab.

Next there are several columns that can be used. These are setup during the field settings but utilized in the field rows. Here you can edit the Title, Description, change the category and provide custom field data. Note: You must click out of any field for it to save when submitting the entry. If you still have the field "active" when submitting in ExpressionEngine the data will not be stored.

Lastly there are 6 optional buttons at the image level. Those buttons are Process Actions, Move, Cover, Edit, Replace and Delete.

Process Actions

- Provides a popup option to apply a "one time" action to an image. You are given a dialogue to choose from the current action sizes, an additional action you wish to apply and finally the ability to preview the action submitting the change. Note: If you regenerate your images these "one time" actions will be lost.

Move

- Simple drag and drop ordering tool for your images. By default Channel Images outputs images in the order displayed in the field.

Cover

- Ability to select an image as "featured" or otherwise known as the cover image. The Channel Images tag allows for you to limit by or skip the cover image in template options.

Edit

- Opens a per image edit screen. Here you can resize, rotate, crop and regenerate the images on a per image basis. These changes are permanant and not effected by regeneration.

Replace

- This option allows you to replace the image by uploading a new image. By default Channel Images will not overwrite images with the same file name.

 Delete

- Deletes the image files, sizes and remove the image data from the database. Note: This will also remove all linked images to this image.

 Break Link

- This will only show if the image is a linked image. By clicking you will break the link but not delete the image.

Tile View

The tile view is a simple view for those not needing the options of the table view. The tile view only has the ability to edit the title, replace image, edit and delete. The options are identical to the table view, but simplified and available only when you hover the image.

 

Editor Integration

1. Within Installing Channel Images and Editor together and a new button will be added to the Editor configuration options. See Editor docs for how to add buttons.

Wygwam Integration

1. When using Channel Images and Wygwam fields in the same channel, a new button will be added to the Wygwam configuration options. See Wygwam docs for how to add buttons.