Images panel
The Images panel lets you manage everything you need to include images (and galleries) in your content. From this panel you can upload images, create thumbnails, add captions (and alternate text), build groups of images (using categories) and generate tags to place images in your article content or Form templates.
On this page:
- Upload images
- Editing images
- Search function
- List of existing images
- Pages and articles listed per page
- Image tag builder
Of course you could upload images (using FTP) and place image tags (using HTML) directly. But then you’d have to provide elements like captions separately for every place you use an image. The images tools of Textpattern provide a way of managing image-related info in a central place. If you have to change a caption or for example need to replace an image (e.g. a sharper one or another view) you can do these changes once at a central place and the changes will automatically take effect wherever you placed the image using Textpattern tags.
On this panel you can do three things:
- Upload images
- Edit image-related information (create a thumbnail, add caption and alternate text, categorize, etc.)
- List and manage your existing images
So the Images panel in a way combines what for articles is divided in two panels ‘Write’ and ‘Articles’.
Upload images
The first tool at the top of the panel is the upload area. Labeled ‘Upload image’ you will find a field for entering a path to the image. On its right side there is a ‘Browse…’-button which (as well as selecting the field itself) will open a pop-up-window containing your file manager’s tools to locate an image file for upload.
When you have marked an image and put its path into the upload field by selecting ‘open’ (or ‘OK’), you can start uploading by selecting ‘Upload’.
The image will be uploaded to the images folder of Textpattern (but remember the file size limitations). A reference will automatically be saved in the database and the image editing panel will be opened. Here you can enter additional information (see below) regarding the image. To save those informations and return to the Images panel press ‘Save’.
Technical note: In the images folder all uploaded images will have only a number as name. The number equals the unique Textpattern ID number of the image - extended by t for a thumbnail. The original name is kept in the images properties.
Editing images
Image details
The image details panel shows the unique ID number of the image. In addition these pieces of information can be edited and saved in an image record:
Image name: here by default the images filename will be entered automatically. If you’d like to rename the image you can do so here.
Category: a category for the image. Categories are used to generate lists of images and galleries.
Alternate text: text which will replace the image when it’s broken or images will not be downloaded. Very important for SEO, web standards and accessibility.
Caption: any text to make a good caption for the image.
After editing, you have to Save your edits.
Replace image
If you need to replace an image by another or a better one (instead of placing another one, especially if you already have placed it on several places in your content) you can do so with the upload fields labelled ‘Replace image’. The uploaded image replaces the current one, but retains any further details you have entered for it.
Create thumbnail
Thumbnails (smaller versions of an image) can be used for various tasks in a website. There are two ways to include thumbnails of an existing image:
- You can upload your own thumbnail with the upload fields labelled ‘Upload thumbnail’.
- You can automatically generate a thumbnail with Textpattern’s built-in tools. Fill in the appropriate width and/or height. If you define both and don’t want the image to be scaled mark ‘Crop’. To create the thumbnail press ‘Create’.
Thumbnails are stored images folder all uploaded images and have the same ID number as their parent, extended by t.
Search function
Because the images list can get pretty long, a search function is available at the top of the list. You can use the search function to locate an image directly by a search phrase or to filter the view on your images by particular criteria, thus reducing the number of images in the resulting list.
The Search function has two components:
- A text field for entering the search query
- A drop-down list to specify which area is to be searched
Text entered in the textarea will be treated as a complete phrase (see the Articles panel documentation for full details on this).
After entering your search criteria you start searching by selecting the search button. As a result you will be given a new list of images which meet the criteria.
As a default the search will find matches for all criteria. But you can do more refined searches by selecting another area to search in via the drop-down list toggle button.
List of existing images
Beneath the upload and search area there is the table, or list, of existing images. Each row is one image. If you select the header of a column, it will sort the list according to that column. Select again to reverse sort direction.
Perform changes on selected images
In the first column you will find a checkbox for each image. Here you can select images you want to change in a bulk manner. You can mark images by checking the checkbox or you can use the checkbox in the head bar of the list to mark all images on that page.
For performing changes now you go to the drop-down list ‘With selected…’ and choose the function you want to perform. After selecting the options you want to perform press ‘Go’ to start the changes.
Pages and images listed per page
At the very bottom of the list you will find a pagination and links for next and previous pages if there are more pages. You can also change the number of images listed per page by selecting another value from the number range.
Image tag builder
The image tag builder, selected from the Tags table column, has several options:
Type: choose what markup type you want to build the tag in. Either Textile format, Textpattern tags or standard HTML tags.
Escape HTML: escape any HTML entities encountered in the form.
HTML id attribute: for example gallery1. The id attribute you’d like to assign to the image. In HTML this is rendered as id="my_id" inside the <img> tag.
CSS class: for example gallery. The CSS class to assign to the image. In HTML this is rendered as class="my_class" inside the <img> tag.
Inline (CSS) style: For example: border: 1px solid black;. The inline CSS style(s) (separated by semicolons) you’d like to assign to the image. These styles are placed inside a style attribute in the final HTML.
Wrap tag: For example p. Tells Textpattern to surround the image with this HTML tag when rendered. Output would be <p><img src="etc" /></p> in this example.