By aaron on

Use at your own risk. This is a preview of the Image Tab module I'm creating for Drupal. (The link to the file is in the post in my blog, as I don't know how to upload files here yet. There's a screen shot there too.)

Image Tab allows an administrator to have an extra tab for every node -- an "image" tab. From here, one can upload a new image, to associate one or more images with a node.

Associated images may be shown as thumbnails above or below a node, or only shown in certain types of nodes, as desired. Thumbnails may be configured to show a larger image on click (within the node, or directly to the image node). Soon, there will also be javascript support so that an active image will be replaced with a larger image of another thumbnail click (or even mouse-over event).

I wanted to make it easier for clients to upload images to be linked with content, without having to figure out tags or figure out how to do inline images or learn how to link an image node manually. The other modules are great, with more flexibility. This is not meant to replace them, but to add another option for users.

That's about it for now. It requires the image module, and allows other modules to borrow functionality from it, to give the user even more control over how images appear in a node. It's been developed in 4.6, so I haven't tested it in Head yet, so no guarantees.

There are about a hundred bugs right now, so this is not meant for use on a live site yet. (Although I am using it here at Digital Folk Art, 'cause I'm brave, and I'm the one writing it.)

If you decide to use it at this early date, a few notes. First, don't "create image tab" content. There is no such thing. I just now realized it shows up, but it's not meant to be a node. Just to affect other nodes. Secondly, there is no way to delete image associations yet. I just haven't hadded the capability yet. Finally, there are currently only global settings. I plan within a few days to add the capability to tweak settings for specific node types or even on specific nodes. Also, finally finally, not all the functionality is in place yet. Or did I say that already?

Please, give me any feedback you may have. Specifically any bugs you might notice that I don't already know about, and anything that might be done to make the code more efficient, user-friendly, or in sync with current Drupal standards.

Also, if someone's already done this work, PLEASE let me know. I hate duplicating existing work.

Thanks!

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

Comments

merlinofchaos’s picture

merlinofchaos commented

Could this module (when it is more complete) also be used to put an imagine in a specific inline place? (Look at any given news site. If they have images with the site, they are always in particular places).

-- Merlin

[Point the finger: Assign Blame!]
[Read my writing: ehalseymiles.com]

-- Merlin

[Read my writing: ehalseymiles.com]
[Read my Coding blog: Angry Donuts]

aaron’s picture

aaron commented

The module has a couple of functions that can be called from other modules that want to place an associated thumbnail or image within a block (rather than above or below it). However, at this time, I don't have a plan to do that with the module, unless I can figure out a good generic way to do it. (Perhaps I can have it hook into 'Inline' or 'Img Assist' to use tags like they do.)

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

merlinofchaos’s picture

merlinofchaos commented

I wouldn't even want to tag it. What I would want, which may or may not be for everyone, is to have a flag on an attachment which says to display it. No tags or anything. Just if the attachment is there, and it's an image, put it up. The flag could either be on the node, and it'd just check all images, or on each attachment.

-- Merlin

[Point the finger: Assign Blame!]
[Read my writing: ehalseymiles.com]

-- Merlin

[Read my writing: ehalseymiles.com]
[Read my Coding blog: Angry Donuts]

aaron’s picture

aaron commented

That's how this works. No tags; the images are simply displayed or not, according to settings. (This can be a global setting, a setting for node types, or settings just for a specific node.) The image(s) will be displayed either above the content or after it, according to settings.

Also, other modules can extend the functionality, so that images may be displayed inline according to how that module displays it. For instance, I'm also writing a "Property Listing Manager" that will display a picture of a house (and thumbnails to other images) within the node, using the Image Tab module.

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

merlinofchaos’s picture

merlinofchaos commented

Eeexcellent. I'll be following this post, so please be sure to comment here when you've got a stable release!

-- Merlin

[Point the finger: Assign Blame!]
[Read my writing: ehalseymiles.com]

-- Merlin

[Read my writing: ehalseymiles.com]
[Read my Coding blog: Angry Donuts]

aaron’s picture

aaron commented

Will do! :)

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

gdip’s picture

gdip commented

Tried to make a comment on http://digitalfolkart.com/index.php?q=prebetaPreviewOfImageTab and got this response (Oct. 29).

warning: mail(): SMTP server response: 503 Bad sequence of commands in c:\websites\aaronwin\digital\www\modules\user.module on line 374.
warning: Cannot modify header information - headers already sent by (output started at c:\websites\aaronwin\digital\www\includes\common.inc:384) in c:\websites\aaronwin\digital\www\includes\common.inc on line 192.

aaron’s picture

aaron commented

Thanks. I'm not sure what's happening. It used to work... Anyway, it looks like the comments go up, but the mailing feature doesn't work. I'll see if I can turn off mail notifications of comments until I figure out what's happening.

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

FabriceV’s picture

FabriceV commented

Dear Mr,
It's an excellent and useful module. Some open source scientific publications use this kind of presentation. It has numerous avantages to both writers and lecturers when a large numbers of graphics are linked to a long article.

Suggestions.
- Could also be presented by the side of the article.
See for example http://www.dynamic-med.com/content/4/1/8
- How printing is done? Tumbails or large graphics page?

Thanks for all.

aaron’s picture

aaron commented

The images are enclosed within css div tags, so this could easily be formatted to show up to the side. Also, a module could be written with a hook to do just this. (This is how they'll appear by default in the property_listing module I'm currently developing as well.) In the final release, this will all be themed, to give more control to phptemplates.

By default, one "active" large image will show up, with several smaller "thumbnails" below it. The module will allow some flexibility with this layout, and other modules written to use this module may easily change that format.

- Aaron Winborn

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

wellsy’s picture

wellsy commented

Is this being developed for 4.6.3 or the new 4.7 (cvs)version?

This module sounds very close to what I need for my site to be just that bit more user friendly.

wellsy
like someone else here said "always use a test site"
permit me to add "backup your database regularly"
orchidsonline.com.au

aaron’s picture

aaron commented

I plan to release a version for 4.6.3 by November 15 (which is also the deadline for a client's site I'm building that will depend on it).

After this, I'll rework it as necessary to work with 4.7 (cvs).

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

wellsy’s picture

wellsy commented

I will follow this with interest. Do you need any help with any testing?

wellsy
like someone else here said "always use a test site"
permit me to add "backup your database regularly"
orchidsonline.com.au

aaron’s picture

aaron commented

I'll post a beta in a few days for anyone interested in helping to test.

Thanks!
Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

4p’s picture

4p commented

Since a couple of weeks I am working on a simalar module.
I have implemented it in a site I am working on (http://www.dierenambulance-purmerend.nl/test).
An example of the edit screen you can see at http://www.4pages.nl/example/attach_image.jpg

I like the work you have done en also like the idea of adding an extra tab.
Maby I could help you with the sorting/change-order functionality for the associated images area, wich I already have worked out in javascript.

Jos

aaron’s picture

aaron commented

Looks like we're working on similar ideas. Yours looks pretty good. I haven't gotten to the sorting/change-order functionality yet, and have been intending to use a "weight" variable to keep it in line with the rest of Drupal. However, I think also adding a javascript function like what you've done will make it even more user-friendly. (Probably would need to have it fall back to just a drop-down list for people without javascript, of course.)

I'll let you know when I post the code, if you want to take a look at it and help with the javascript piece for the weightings. It'll be another week or so, probably.

Thanks,
Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

4p’s picture

4p commented

This week I will make a start adapting my sorting/weighting system for the image_tabs associated images area. I agree it also must work without javascript, I will take care of a fallback mechanism. I will post a link to a demo within a couple of days so other drupal user can give feedback on the work in progress.

aaron’s picture

aaron commented

I'll look for it. Maybe you can post it here when you're ready, and I'll integrate it.

- Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

4p’s picture

4p commented

Hello Aaron,

Today I have been working on the javascript part.
By now you can change the order with standard drupal weightselect when javascript is disabled. You can change the order with up and down links when javascript is active. It is tested in IE6 and FF1, I will test some more browser later this week. I will also try to get a demo online so others could also test

I have added the image_tab_display_all_associated_thumbnails_for_editing which is now called by image_tab_form_thumbnails

You can find the new code at http://www.4pages.nl/image_tab/image_tab.zip
Note that the output of the associated images area is not yet processed by php after a submit.

There are some things we have to decide. In my version I worked with an 'Image library' which gives the user the choice to add images uploaded earlier. I think it would be nice to put that in.

A other thing is how to handle the remove options, will it completely delete the image or will it only remove its link to the current node?

aaron’s picture

aaron commented

Thanks for the code! I'll take a look at it soon; it will be a welcome addition to the module.

I like your idea of an image library. I was simply going to allow users to browse through all images (like with img_assist) and/or through galleries to select images. Perhaps an image library could be an intermediate stage, so that images could be associated, but not necessarily shown yet. That would be a fairly simple flag.

As far as removal options, I'm allowing an administrator to enable 'Delete Associated Images with Content Deletion'. When enabled (it's disabled by default), if a node is deleted, any associated image nodes that are not associated to another node will also be deleted.

Thanks,
Aaron

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

aaron’s picture

aaron commented

Image Tab is nearing completion. (Use at your own risk right now, cause there are a few things to finish up before it's ready.)

Here's the todo list, in no particular order:

  • allow preview when adding images (Get rid of error message on preview)
  • allow node types to control image placement
  • allow browsing through existing images for association (as with img_assist)
  • allow image weights & integrate removal of image association
  • finish integrating Jos's javascript addition (Thanks Jos!)
  • Oh yeah, make it work with 4.7 (this is already in the works)

Culture Fix Web Identity & Design
Digital Folk Art (my blog)

4p’s picture

4p commented

It's good to hear Image Tab is nearing completion.
I will have a closer look at this one of the next days.
If you want to delegate some of the todo's to me, thats fine.

Jos

Artem’s picture

Artem commented

I tried to post on the ImageTab site, but there posting doesn't work for some reason. So, I am copy-pasting here:

Hi, Aaron.
I am very much interested in adding the image upload functionality to my site. At the moment I am looking at several solutions and not sure which one is the best to start with :)

Is it possible to see some ImageTab screenshots to get the feeling of what's it like?

peaced’s picture

peaced commented

so how are things going with this project?

marcoBauli’s picture

marcoBauli commented

...where did anybody go?!

all this was starting getting interesting. Is module still in progress? no posts in more than 3 months.. :o

aaron’s picture

aaron commented

At long last, I have a working version finished. I've learned a lot about Drupal since I began this project, and I'm embarrassed about some of the code. For instance, I still need to theme it all, and optimize the code.

But anyway, it works, and some of you have been waiting a long time for it.

I don't have cvs working here yet, so you'll need to go here to pick up the image tab module. (The link is a 17kb zipped file.) It only works in 4.6 for now, but I promise, I will update it. (I need to have it working on some of my 4.7 sites at some point, so yes, I will eventually get around to that.)

I don't have a demonstration site set up yet. Also, I ended up disabling all the cool javascript that Jos contributed for now. (Jos, if you're still interested, we need to rethink how your sorting functions will work with the weights.)

TODO:
Put up a demonstration
Clean up code
Theme functions
Link in a basic css script
CVS to Drupal modules
Add Javascript hovering functions
Add Javascript editing functions
Update to 4.7

- Aaron Winborn

p.s. I started a new post for this topic.

Advomatic, Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes

Digital Folk Art, which will someday be a cool blog about what it says

Spindowners, a text-based sci-fi mmorpg being developed with the upcoming Drupal Game module

wellsy’s picture

wellsy commented

I have downloaded and it immediately works on my test site!

Is it possible to display thumbnail images in the node and not the original images?
So thumbnail is clicked which opens the fullsize image?
Plus a link back to the first node?

I don't seem to be able to do that with settings available.

No criticisms here only questions as to functionality.

Great module, thanks for your efforts!

wellsy

orchidsonline.com.au

aaron’s picture

aaron commented

I made the module with specific criteria in mind, which didn't need those capabilities. However, they are great ideas, so I'll add them to the todo list.

Thanks!
Aaron Winborn

Advomatic (Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes)

appel’s picture

appel commented

Hey Aaron,

How's your module coming along? I've tried the CVS version on my 4.7.0 install, but it stuck saying it didn't recognize the form_submit function (amongst others). I couldn't find form_submit in any other module so my guess is they dropped it for an other syntax.

Anyway, so far none of the available image solutions are satisfactory for my specific needs, i have high hopes for your module (which seems to come close). Good luck, and if i can help in anyway, lemme know.

aaron’s picture

aaron commented

Haven't made it work for 4.7. It's going to require an overhaul for that, and I don't have time right now. (Hopefully in July I'll have more free time for it.)

Meanwhile, you might look at Image_Attach (new for 4.7; included with the latest version of the Image module). I will probably end up modifying my work and offering it as a contrib to Image, or otherwise working more with Image_Attach, since that module has the beginnings of a cleaner version of what I'm going for. (You could also look at Inline, which is greatly improved for 4.7.)

- Aaron

Advomatic (Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes)

LateNightDesigner’s picture

LateNightDesigner commented

Good luck, if I had the time also I'd try to help out! I appreciate all the work on this great module!
//---------------------------------------
Latenightdesigners.com- Giving IMD a Fighting Chance

sami_k’s picture

sami_k commented

i am now, following this! it sounds like a great idea! and makes a lot of sense. keep up the good work!
--
showcase | blog | rob's book

Vidarls’s picture

Vidarls commented

I just spent about two days on making my own attach image module for a project due in just a couple of days.
Allthough mine is based on ajax and image_assist, I would probably just have adapted your module to my use If I'd just known about it. I'll look into it eventually, and maybe I'll ditch mine for this one if I like it. At first glance it looks really nice.

-Olegu
http://www.zbz5.net/

aaron’s picture

aaron commented

I finally got around to creating a project page for this. The module currently works only in 4.6, although Suuch has promised a patch to make it work in 4.7. Since I'm now working almost exclusively in 4.7, I guess I should get around to this module again, and/or put some work into the new image_attach.module (part of 4.7's image module).

The project page for this module is now at Image Tab.

- Aaron

Advomatic (Web Design for Progressive Advocacy, Grassroots Movements, and Really Cool Causes)