diffrent class for thumbnails

[allvip]

the thumbnails have class image just like the images from display media
can I apply another class to the thumbnails?
I did not found class image in thumbnails.php or in theme_display_thumbnails to replace it with my new class
thanks

[Αndré]

Open include/functions.inc.php, find

Code Select Expand

$thumb_list[$i]['image']        = '<img src="' . $pic_url . '" class="image" ' . $image_size['geom'] . ' border="0" alt="' . $row['filename'] . '" title="' . $pic_title . '" />';
and replace the class to your needs.

It's probably a good idea for the next Coppermine release to add an additional class (e.g. "thumbnail") to the thumbnails.

[allvip]

thanks.worked

[Αndré]

Added CSS class "thumbnail" to thumbnail images on thumbnails.php pages in SVN revision 8618.

[Niecher]

Hello André,
I suppose that this change also requires making a change in the index.php file

this one twice:

Code Select Expand


$user_thumb = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"\" />";


Code Select Expand


$user_thumb       = '<img src="' . $cpg_nopic_data['thumb'] . '" ' . $cpg_nopic_data['whole'] . ' class="image" border="0" alt="" />';



twice:

Code Select Expand


$alb_list[$alb_idx]['thumb_pic'] = "<img src=\"" . $pic_url . "\" class=\"image\" {$image_size['geom']} border=\"0\" alt=\"{$picture['filename']}\" />";


Code Select Expand


$alb_list[$alb_idx]['thumb_pic'] = '<img src="' . $cpg_nopic_data['thumb'] . '" ' . $cpg_nopic_data['whole'] . ' class="image" border="0" alt="" />';


Code Select Expand


$alb_list[$alb_idx]['thumb_pic'] = '<img src="' . $cpg_privatepic_data['thumb'] . '" ' . $cpg_privatepic_data['whole'] . ' class="image" border="0" alt="" />';


Regards.

[allvip]

Open include/functions.inc.php, find

Code Select Expand

$thumb_list[$i]['image']        = '<img src="' . $pic_url . '" class="image" ' . $image_size['geom'] . ' border="0" alt="' . $row['filename'] . '" title="' . $pic_title . '" />';
and replace the class to your needs.

It's probably a good idea for the next Coppermine release to add an additional class (e.g. "thumbnail") to the thumbnails.

I found a simple way to add diffrent style to thumbnails without editing coppermine files:

all images (thumbnails and intermediate pictures) have the same class: .image but they are in tables,tr,td or divs with diffrent css class.

In the curve theme the classes for .image are:

Code Select Expand


.image {
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/* pseudo-classes for image links */
a:link .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:visited .image{
    border-style:solid;
    border-width:1px;
    border-color:#840084;
    margin:2px;
}

a:focus .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

a:hover .image{
    border-style:solid;
    border-width:1px;
    border-color:#0033CC;
    margin:2px;
}

a:active .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}


because the thumbnails images are in a tr with class .thumbnails you can override the image class like this:

add to style.css:

Code Select Expand


.thumbnails .image{
    border:none;
    margin:2px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.thumbnails a:link .image{
    border:none;
    margin:2px;
}
.thumbnails a:visited .image{
    border:none;
    margin:2px;
}

.thumbnails a:focus .image{
    border:none;
    margin:2px;
}

.thumbnails a:hover .image{
    border:5px solid #cccccc;
    margin:2px;
}

.thumbnails a:active .image{
    border:none;
    margin:2px;
}


you can add your custom styles to code above like background,opacity,border etc .

[allvip]

to override the image class for intermediate pictures:

Code Select Expand


.display_media .image{
    border-style:solid;
    border-width:5px;
    border-color:#444444;
    border-radius: 0px;
}
.display_media a:link .image{
    border-style:solid;
    border-width:5px;
    border-color:#444444;
    margin:2px;
}
.display_media a:visited .image{
    border-style:solid;
    border-width:5px;
    border-color:#444444;
    margin:2px;
}

.display_media a:focus .image{
    border-style:solid;
    border-width:5px;
    border-color:#444444;
    margin:2px;
}

.display_media a:hover .image{
    border-style:solid;
    border-width:5px;
    border-color:#900;
    margin:2px;
}

.display_media a:active .image{
    border-style:solid;
    border-width:5px;
    border-color:#444444;
    margin:2px;
}


[allvip]

bacuse the intermediate pictures has the class .image and is inside a td with class .display_media

[allvip]

to override the image class for category:

Code Select Expand


.catrow .image{
    border:none;
    margin:2px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.catrow a:link .image{
    border:none;
    margin:2px;
}
.catrow a:visited .image{
    border-style:solid;
    border-width:1px;
    border-color:#840084;
    margin:2px;
}

.catrow a:focus .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}

.catrow a:hover .image{
    border-style:solid;
    border-width:1px;
    border-color:#0033CC;
    margin:2px;
}

.catrow a:active .image{
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    margin:2px;
}


the class for empty category is .catrow_noalb.
an empty category has  no thumbnail but you can add thumbnail image with bbcode in the category description:

Code Select Expand


[img]http://www.allvip.us/cpg/z/themes/zimbio/imgs_cat/beyonce.jpg[/img]


and style it like this:

Code Select Expand


.catrow_noalb img{
    border:1px dotted red;
}


[allvip]

to override the image class for albums thumbnails:

Code Select Expand


.tableb_alternate .thumbnails .image{
    border:10px solid #000000;
    margin:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.tableb_alternate .thumbnails a:link .image{
    border:10px solid #000000;
    margin:2px;
}
.tableb_alternate .thumbnails a:visited .image{
    border:10px solid #000000;
    margin:2px;
}

.tableb tableb_alternate .thumbnails a:focus .image{
    border:10px solid #000000;
    margin:2px;
}

.tableb_alternate .thumbnails a:hover .image{
    border:10px solid #000000;
    margin:2px;
}

.tableb_alternate .thumbnails a:active .image{
    border:10px solid #000000;
    margin:2px;
}


because the images for the albums thumbnails are in a td with class .thumbnails and the td is in a tr with class .tableb_alternate.

[Αndré]

I suppose that this change also requires making a change in the index.php file

Added CSS class "thumbnail" to album thumbnails in SVN revision 8619.