Improved Image Handling
From Textbook
Contents |
Overview
Better Image handling seems to be an issue that comes up a lot. Many requests lately seem to end up geared at adding functionality to upm_img_popper. It seems that better image functionality is definitely a topic that comes up alot so I thought an organised location for discussion would be useful.
I think we could begin with people listing and explaining ideas and then consolidating and prioritizing towards a working group. --hakjoon 23:48, 13 February 2006 (GMT)
Hakjoon, I guess I will start. I thought I might come up with something incredible to say and then post it, but it never seemed to come. (must have been in a dream).
I could discuss issues I have with TXP image handling, but instead I think I will focus on what I would like to see grow or change. I will share my ideals. One at a time.
Img_Wizard is a plugin in development to add img handling to write screen. --Bastian 17:36, 17 March 2006 (GMT)
Image Upload (examples from other systems)
Image upload should be as intuitive as possible for the end user. I am guessing that this is the majority use for TXP for most of us, is designing sites for end-users other than ourselves. We all design sites for ourselves as well, but we know what we are doing (for the most part) while the end user needs things to be as straight forward as possible.
Thus: I suggest that we consider looking at those who have gone before us. Blogger. Expression Engine. Moveable Type. Who else? I have some guesses about how this would best be accomplished, but perhaps it would be helpful to know how others are doing it so that we might be able to improve on them instead of working blindly?
Blogger for instance
One sees an image icon indicating that they can include an image in their post:
Upon clicking this link the user is given a popup menu that looks like this:
Note:
--The interface is extremely easy to follow.
--Its not cluttered.
--It includes image related information to help the user understand what it means for an image to have a "left" layout.
--It includes the option for sizing the image in the post (while the original is stored at full size in the database)
--There is an option to upload from a www source rather than the desktop
--There is an option for multiple image upload (note that if you upload more than one at a time, the layout scheme applies for all of the images posted in that session)
--and finally a cookies option which checks for the user and applies those settings each time the user accesses the page.
One thing I note that I don't know how its accomplished in blogger is that if the "large" setting is chosen it will not excede the boundaries of the div you are posting to, and somehow blogger has figured out how to let this change dynamically (I think). So that if you were to have a very wide posting column you may be able to have a very wide photo, whereas, if you have a very narrow posting column it will recognize that and respond accordingly.
When the image/s has been uploaded they are posted as tags into the top of the message field on the main posting page (write page in TXP) no matter where your cursor was or where your body of text is.
The tag is then parsed in the html.
...Other CMS's to follow.
~Matthew
Pivotlog
Image uploads can be accomplished in two ways:
1. Via a "Manage Media" screen which is the equivalent to Textpattern's "image" tab.
2. In the "New article screen" excerpt and body entry textareas sport buttons which start the media uploading process and finally embed special tags into the article which will render images, popups and download links.
Image options are set on a concise dialog box. This favours direct styling and has no way of applying a class or an id attribute for CSS based styling.
Thumbnails are created automagically during upload. A cropping and resizing utility can be used to edit thumbnails.
ModX
Modx imagehandling is very comprehensive. On top of the arcticle writing field you find a WYSIWYG bar like the one of Word. When hitting the image button (shot 1)
a popup opens (shot2)
where you can insert the image url or browse for the image. As well you can assign width, heigt, border etc... Once you hit the Browse button another popup opens and you find a list of folders for images as well as the option to upload an image into a special image folder (shot 3).
Modx has an image editor (shot4)
What i like about Modx imagehandling is the possibility to creat special image folders and uploading images into those seperate folders. That is great for organizing images.
hakjoon: Just a note. These ModX screens are actually from FCKEditor which is the included wysiwyg editor.
WordPress
This involves a plugin
The first shot here is the method WP uses to initialize the upload/post of photos.
This shot shows the option to upload one or more photos. (also note the option to browse already uploaded photos)
Should you choose to browse, this shot shows you that you can sort your photos for viewing order. This would be especially helpful for someone with tons of images. However, i still think this is a little clunky. YOu should have the option to sort and to search, not unlike the "article" tab in TXP now. (in fact identical)
If you choose to upload a photo, or edit one in the browser window, you will see the image above which shows you that you have some options for categorizing and naming the photo. Not nearly as versatile or comprehensive as TXP here (implemented with upm_img_popper TXP is even more versatile here)
When you've finished editing your photo, you are taken to the next page, by a "next" button. Here you choose some some style options and post your image.
Finally, you can post to your article. Note here that the tag is not xml style, I'm not sure what people prefer here and which feels least confusing to a user. I think ideally it would be textiled? That way an end-user doesn't feel as confused about where it is? Is it possible to make it bold or something to really make it show up amid the other text?
Wordpress Image Manager 2.0 (plugin)
Rather than write this all out, I think I will avoid redundancy and point you toward the forum post where this was spelled out clearly. Read and see it HERE. However, I would like to EMPHASIZE that I think this is a good lookin plugin and ought to be checked out.
General Suggestions
I'll be pruning suggestions that folks send me here. ?Question, what to do if you disagree with an idea? HMM.
Added functionality to the Admin Image Tab Fields
Natalie Jost, has images and a blog post to describe her ideas
1. extra field for a class/id - you would just input the name and maybe check a box to tell it class or id and it adds that to the existing output code.
2. It would also be great to make the image uploading page a pop-up from within any other page in the system just like the code output pop-up. That way you could upload an image right from your article entry or a form, page, etc. and insert it right away without entering another page and coming back. It would also be great to see the output code right there in the upload window after you've set the settings instead of opening a separate pop-up... just list the code right there beneath your save button.
3. I love the thumbnail creation and it would be cool to have code output for that image as well in case you just wanted to display the thumbnail instead of the full image.
4. I'd like to see a better way to list the images. It would be nice to be able to go to a separate page in the admin area for each category. Instead of EVERYTHING just sorted in one list, it would be great to click on a category and be able to filter out things not in that category (of course that would help across the board too, articles included).
More Powerful Image Tag
(idea proposed by Mr.Dale)
The image tag should behave similarly to the article tag, and should be able to do the following:
I think the image tag should behave similar the article tag, and should be able to:
1. Output image lists based on a category in the url.
2. Use article-like forms for presentation
3. control the display of captions alt-text and name.
I believe giving it similar behaviour to the article tag would be an intuitive jump for most users.
Potential Image tag Syntax
This is based a lot on <txp:article_custom> and <txp:upm_image>.
<txp:image>
-
image_id="integer" - id# of the image to display. Can take comma separated list.
-
image_name="value" - image_name (from images tab) of the image to display. Can take comma separated list.
-
class="value" - The CSS class to apply to the image.
-
id="value" - The CSS id to apply to the image.
-
form="form name" - Use specified form. See Form.
-
wraptag="value" - The (X)HTML tag to wrap around the image (or the list, if using multiple images). See wraptag.
-
break="value" - If using multiple images and the wraptag parameter, the (X)HTML tag to separate images with. See break.
-
breakclass="value" - The CSS class to apply to the break tags.
-
limit="integer" - If using multiple images, the maximum number of images to show.
-
offset="integer" - If using multiple images, the number of images to skip (not display) in the list.
-
show_alt="yes/no" - Whether to show the alternate text as listed in the image tab. Default is yes.
-
show_height="yes/no" - Whether to include the image height in the image tag returned. Default is yes.
-
show_width="yes/no" - Whether to include the image width in the image tag returned. Default is yes.
-
show_title="yes/no" - Whether to show the caption, as listed in the image tab, as the image’s title. Default is yes.
-
allow_override="yes/no" - When specifiying id/category/article_image this will allow you to override the default via the url. Default is no.
<txp:thumbnail>
Will display thumbnails instead of full size images. Takes all parameters available to <txp:image> plus:
-
poplink="yes/no" - Whether to create a popup link to the full image. Default is no.
-
custom_height="integer" - Creates a thumbnail of a custom size. Height to use for custom size. If custom_width is empty width will be calculated automatically.
-
custom_width="integer" - Creates a thumbnail of a custom size. Width to use for custom size. If custom_height is empty height will be calculated automatically.
These next few tags will actually call <txp:image> and <txp:thumbnail>. they just set certain parameters for you and would exist mostly for template clarity.
<txp:article_image> <txp:article_thumbnail>
Sets source to the article_image field. Displays full image and thumbnail respectively.
<txp:custom_field_image> <txp:custom_field_thumbnail>
Sets source to the custom field specified. Displays full image and thumbnail respectively. Requires custom field to use.
-
name="fieldname" - Display images from the custom field with the name fieldname.
<txp:image_index>
Displays the thumbnails from a category. If no category is specified it will look for it in the URL.
-
category="category_name" - Display images from category_name category.
-
recursive="value" - If numeric (1,2,3, etc.) set how many nested children levels of the category attribute Textpattern goes down to find the images. If all, Textpattern will select all the images from the parent categories and any number of childrens.
-
sort_by="sort by" - Sort retrieved images. Available values: ID (image id#), AuthorID (author), LastMod (date last modified), Image Name, Category, rand() ("random", including the brackets) . Please note that multiple attributes can be used, separated with a comma.
-
sort_dir="sort direction" - Sort direction of retrieved images. Available values: asc (first to last), or desc (last to first).
-
captioned="yes/no" - Restrict by caption presence.
-
author="author name" - Restrict to a specified author.
Suggestions for these tags from people who don't know what they are talking about, but know what they need
Displays the thumbnails from a section.
-
section="section_name" - Display images from section. (could be used in conjunction with
<txp:if_different />tags?
-
direction="next" - Display images using pagination? Used in a similar way to
<txp:link_to_next />I don't know if this is the way to do this? or if it needs a individual tag?
Image Form tags
These are pretty much straight from upm_image.
-
<txp|img_alt /> - Alternate text
-
<txp|img_caption /> - Caption
-
<txp|img_category /> - The category the image belongs to.
-
<txp|img_full_height /> - Image height
-
<txp|img_full_url /> - Image url
-
<txp|img_full_width /> - Image width
-
<txp|img_id /> - Id
-
<txp|img_name /> - Name
-
<txp|img_thumb_height /> - Thumbnail image height
-
<txp|img_thumb_url /> - Thumbnail image url
-
<txp|img_thumb_width /> - Thumbnail image width
Include Images with AJAX
The following are most ideas. The only thing i have done are the image-select and a very basic AJAX-Script, wich loads the img-cats, the img-list and the tabs. In my mind using AJAX instead of opening a new window for image handling, is mor end-user friendly. People, i worked with, are often confused by new windows. --Bastian 01:34, 3 March 2006 (GMT)
Write Tab
The image-screen is loaded if click on img-wizard by AJAX. The tabs you can see are also loaded on request.
On the left side there on that screenshot you see basicly what the bas_img_selector display beside s the body-textarea: Select an category, select an image and add it.
On the right side are the images that are currently connected to the article. On top thumbnails and on bottom one enlarged.
User should have the choice to add an new image at the end of curent images or at the begin, between two images or replace an old by an new one.
Style Imgages
On the Style-Tab user can choose how the images should be displayed. There should be thumbnails of the available styles.
Upload Images
I would let the user choose between uploading form desktop or copy from web. Some of my "what-the-hell-is-html-my-internet-is-driven-by-aol"-friends don't know the images have with and height, measured in pixels. So intuitive crop and rezise functions would be nice.
New Form Images
The Styles would be saved as image-form. That could be a very powerfull thing. Imaging you could everything form just <txp:image style="float:left;margin:5px" upto complete markup of things like Lightbox or CSS-galleries.
Image Navigation
One of the primary things needed in Textpattern is better image navigation. i would like to do a poll somewhere here or at my site that begins to ask folks how many images they use on their txp sites? I want to ascertain how important image navigation is to the tech to nontech users?
Current suggestion would be to handle navigation in the same way that article navigation is done, with sortable (link style) names, alt text, category 1, category 2, author, etc. and a search tool with those options as limiters for the search.
