Add consistent CSS class name for custom sized images

stella - September 4, 2008 - 14:03
Project:Image Assist
Version:6.x-3.x-dev
Component:Code
Category:task
Priority:normal
Assigned:Unassigned
Status:needs review
Description

Hi,

The class name for custom sized images in the 5.x-2.x version of img_assist has changed from just "image-img_assist_custom" to image-img_assist_custom-WWxHH where WW is the custom width and HH is the custom height. This makes it very difficult for lightbox2, other modules and themes to (a) theme the image assist images and (b) find them using javascript.

Would it be possible to re-instate the old class name convention or at least add another class name to the list, e.g. image-img_assist_custom image-img_assist_custom-WWxHH ?

Cheers,
Stella

#1

sun - September 4, 2008 - 14:29
Title:class name for custom sized images has changed in 2.x version» Malformed class name for custom sized images
Category:feature request» bug report

We probably overlooked the fact that the filename is used as class name when this (trivial) feature was implemented. Of course, Image Assist should always use a default class name. I am even not able to imagine a use-case for a separate "custom" class, so we might drop that completely? Is there a use-case for those different image size preset classes at all?

#2

stella - September 4, 2008 - 15:55

As long as there's a image assist specific class name, then lightbox2 is happy (or will be after a few adjustments). Lightbox2 also looks at the filename and removes the classname from it to get the original sized image, but i can figure that bit out.

Cheers,
Stella

#3

sun - September 4, 2008 - 16:28

Hm - while we're at it, we could improve that, too. Do you have an idea how we could include information about the target size filename?

Unfortunately, I cannot find a related issue currently, which was a feature request to allow configuring the image size for images in the popup window. However, accounting for that idea, we'd have to pass on the file that should be used in the popup window, resp. Lightbox.

How about a (XHTML-Strict breaking) custom attribute? Abusing another attribute? Injecting the filepath as additional class name? Or just replacing/adjusting the href attribute of the link?

#4

stella - October 27, 2008 - 00:12

What's the status of this? Lightbox2 doesn't need the filename to be modified, just as long as there's an image assist specific class name.

#5

stella - February 23, 2009 - 19:33

bump

#6

TwoD - February 24, 2009 - 19:49

I'd have to vote no to an XHTML-Strict-breaking attribute. Many developers try very hard to keep things Strict, and some browsers are very fond of breaking things if they aren't given what's promised by the DOCTYPE.
Maybe a class like "img-filename-My-Quirky-Fil3_name.JpG" would not be optimal, but I'd say it's the best shot.

#7

hapydoyzer - May 7, 2009 - 06:37

This patch simply removes height and width information from class.

AttachmentSize
img_assist-001-remove-width-height-from-class.patch 476 bytes

#8

hapydoyzer - May 7, 2009 - 06:39

This patch simply removes height and width information from class.

#9

hapydoyzer - May 7, 2009 - 06:38
Status:active» needs review

Sorry :)

#10

TwoD - May 27, 2009 - 12:21

The patch-link in #7 leads to http://drupal.org/files/issues/. :(

#11

hapydoyzer - May 29, 2009 - 06:45

Very strange... Reuploading.

AttachmentSize
img_assist-001-remove-width-height-from-class.patch 476 bytes

#12

Golem07 - June 30, 2009 - 08:16

I have applied this patch to the latest (3.x) dev version of image assist. Since this small line of code is identical I hoped there is no big deal.

I actually does trigger lightbox now. Was so happy that it "worked" finally. Sadly just to find out that lightbox cannot find any image now and displays the dummy only as soon as I use a custom size :(
Is there a solution to this?

Many thanks in advance!

#13

sun - July 4, 2009 - 11:38
Title:Malformed class name for custom sized images» Add consistent CSS class name for custom sized images
Version:5.x-2.x-dev» 6.x-3.x-dev
Category:bug report» task

Uhm, that patch was horribly wrong - it limits you to create only 1 custom size.

Please test attached patch.

AttachmentSize
img_assist-HEAD.custom-size-class.patch 799 bytes

#14

Golem07 - July 5, 2009 - 21:45

Thanks a lot for the quick response.
I have applied the patch. But lightbox is still not being triggered. Checking the image with Firebug it seems to still have the dimensions in the class name.

#15

hapydoyzer - July 14, 2009 - 09:28

Patch in #13 not working for me.

#16

sun - July 14, 2009 - 10:00

Please make sure you flushed your *filter* cache. Image Assist provides a link at the top of its configuration settings page to do so.

#17

hapydoyzer - July 16, 2009 - 11:03

@sun, your patch modify $attributes array, but it is not returned outside of the function...

#18

tomsm - September 5, 2009 - 20:51

subscribing

#19

NukeHavoc - September 30, 2009 - 14:18

This remains an issue in the latest Image Assist 5.x beta, with an added twist: where as Image Assist previously used pre-defined classes for "thumbnail", "preview", etc., it's now using custom sizes for everything. This wouldn't be a huge deal except for the fact that there is no consistent custom class name for the images that I can style (as previously noted, it's including the height/width information in the class name).

As a solution, couldn't there simply be an additional "img_assist_custom" class (above and beyond the standard "image-img_assist_custom-125x176" class) ? Would this confuse Lightbox? (I'm not using it, so I'm not sure what's needed for its integration to work properly).

As was mentioned elsewhere in the thread, is there a reason why the height/width information is being included in the class? Are people dynamically generating CSS to apply to these classes, or is there some other use I'm not seeing?

#20

Robbert - October 2, 2009 - 09:37

You forgot to pass $attributes to image_display. Thus the last line of your patch should be return image_display($node, $label, $attributes);

#21

fenstrat - October 7, 2009 - 00:23

Here's an update to sun's patch from #13. Only change as per #17 and #20 is that $attributes is now added to the image_display() call.

AttachmentSize
303945_custom_size_class.patch 610 bytes
 
 

Drupal is a registered trademark of Dries Buytaert.