The fight goes on...

By larry on 11 May 2004 at 06:38 UTC

Hello everyone,
This is essentially an extension from my post http://drupal.org/node/view/7656. My question question is about the thumbs in the image gallery. If I understand things correctly, it seems that when you place an image in the gallery you actually have THREE images to deal with. The original image, a non-clickable thumb, and a clickable thumb. The 1)original photo is directly linked from the 2)clickable thumb in the gallery. However, you still have the 3)node non-clickable thumb. The code:

img.thumb {
padding: 0px 5px 5px 0px;
float: left;
clear: left;
}

img.image {
padding: 0px 5px 5px 0px;
}

works for ONLY the first and third types...that is the original photo and the node non-clickable thumb. So the question remains...how would I refer to the CLICKABLE thumb in the image gallery? I would like to add colored borders around each image. I have tried different combinations but nothing works. It would be VERY NICE if the non-clickable thumb was clickable as in the image gallery, but I'm still working on that one.

Actually, in the beginning I was pretty sour on the image.module...which was WRONG. It's well written and attempts to do many things at once...after you get it working. However, I feel that THUMBS SHOULD BE CLICKABLE. This has become a pseudo standard on the web. I am sure it's possible...I'm just stumped. I would greatly appreciate ANY suggestions. Thanks again.

Ciao,
Larry

Comments

Just use the DOM

madartsfactory commented 11 May 2004 at 09:13

Hello again,

if you wan't to refer to a clickable image just use the following syntax

#image-gallery a img {
/*
Your stuff
*/
}

This means: when a image img is linked a in the image-gallery-div, then apply this style

Cheers
Das Omega

-------------------
Naur an edraith ammen!
Naur dan i ngaurhoth!

Thanks yet again....but

larry commented 11 May 2004 at 13:29

Hello Das Omega,
It seems I'm learning much from your helpful posts...but not enough yet. I have tried your suggestion...and in many different ways...still no dice. However, I must say that I am trying to reference all images in all galleries...I want them all to have colored borders. In your code:

#image-gallery a img {
/*
Your stuff
*/
}

I'm assuming "Your stuff" is nothing more than i.e. border-bottom :1px #000000;...if this is the case, what am I doing wrong? My references to images outside the gallery are working fine, however, I'm using i.e. "img.thumbs {"....instead of #image-gallery a img {....I know there is a difference, I just can't get the code correct. Any ideas? Thanks again.

Ciao,
Larry

--There are no Kangaroos in Austria--

Next attempt

madartsfactory commented 11 May 2004 at 14:22

Hello,

Well, i searched on my site for all different occurrences of images, or better thumbs.

a) image in the preview of a node (like in the archive). Then the correct reference is

#main .node .content img {
  border-bottom: ...;
}

b) linked image to "sub-gallery" on the image page. Then the correct reference is

#main #image a img.thumb {
  border-bottom: ...;
}

c) linked image on a gallery-page to a image node. Then the correct reference is

#main #image-gallery a img {
  border-bottom: ...;
}

NOTE: the identifiers can differ, depending on the changes you or I ;) made in the image module.
The appendant positions for possible changes in the image module are

function theme_image_gallery_home
function theme_image_gallery_album

The more elegant way: seach for all appearances of the img-tag in the module und append a unique class-attribute. Best possibility to control the output. Then you can simply refer to your own class like

.my_unique_image_class {
  border-bottom: ...;
}

Cheers
Das Omega

-------------------
Naur an edraith ammen!
Naur dan i ngaurhoth!

What can I say?

larry commented 12 May 2004 at 11:31

Hello omega,
I think I need a "Thank you Das Omega" button on my keyboard. Yet again, you have taught me well. At first , nothing worked. MY problem was the identifiers...I was using the wrong one. Your suggestion:

"c) linked image on a gallery-page to a image node. Then the correct reference is

#main #image-gallery a img {
border-bottom: ...;
}

NOTE: the identifiers can differ, depending on the changes you or I made in the image module.
The appendant positions for possible changes in the image module are

function theme_image_gallery_home
function theme_image_gallery_album"

was what I needed. I knew it but it still did not work. Then I re-read:

"NOTE: the identifiers can differ, depending on the changes you or I made in the image module."

I changed it to:

#image a img {
border-bottom...;
}

and problem solved. Thanks again...soon I can face Vader :D.

Ciao,
larry

--There are no Kangaroos in Austria--

use bookmarklets

Bèr Kessels commented 11 May 2004 at 11:40

Dear larry

If you do not want to dive into the code (the imagegallery has some nasty code) to get to know classes, id's and element DOM, you should use the ancestors bookmaktlet. http://www.squarefree.com/bookmarklets/webdevel.html#ancestors

Ber

Thank you for the suggestion

larry commented 11 May 2004 at 13:34

Hello Ber,
I appreciate the suggestion. Actually, I don't mind getting my hands dirty with the code since I'm starting to learn PHP. I'm going to go over the references you suggested...it certainly can't hurt, however, I'm not sure how I can use them to solve my problem. Yes...I know that little...haha...but I'm learning. Thanks again.

Ciao,
Larry

--There are no Kangaroos in Austria--

Quickhack to link non-clickable thumbs

madartsfactory commented 11 May 2004 at 14:48

Hi,

go to function theme_node_image

there replace

"<img class=\"thumb\" src=\"$base_url/$node->thumb_path?".$rand."\">" . $node->teaser

with

l("&lt;img class=\"thumb\" src=\"$base_url/$node->thumb_path?".$rand."\"&gt;", "node/view/$node->nid") . $node-&gt;teaser

Cherrs
Das Omega

-------------------
Naur an edraith ammen!
Naur dan i ngaurhoth!

You did it again!

larry commented 12 May 2004 at 11:21

Hello omega,
Thanks for yet again teaching me something new. Your solution:

"go to function theme_node_image

there replace

"thumb_path?".$rand."\">" . $node->teaser

with
l("thumb_path?".$rand."\">", "node/view/$node->nid") . $node->teaser"

was of course just the ticket. However, I must add for those who in the future who may use this code that YOU MUST ALSO change the line directly below our example above in the same manner as shown below:

REPLACE:

else {
$node->teaser = "thumb_path\">" . $node->teaser;
}

WITH:

else {
$node->teaser = l("thumb_path\">", "node/view/$node->nid").$node->teaser;
}

I'm far from knowledgeable on this subject, but without this additional change it did not work for me. However, I believe that in such a function it is normal to make the additional changes throughout the function to reflect the proper references throughout. I learned that from your examples omega...haha :). Thanks yet again.

Ciao,
larry

--There are no Kangaroos in Austria--