forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: allvip on September 20, 2013, 02:52:55 pm

Title: diffrent class for thumbnails
Post by: allvip on September 20, 2013, 02:52:55 pm

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

Title: Re: diffrent class for thumbnails
Post by: Αndré on September 20, 2013, 03:00:14 pm

Open include/functions.inc.php, find

Code: [Select]

$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.

Title: Re: diffrent class for thumbnails
Post by: allvip on September 20, 2013, 03:05:32 pm

thanks.worked

Title: Re: diffrent class for thumbnails
Post by: Αndré on November 05, 2013, 02:35:05 pm

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

Title: Re: diffrent class for thumbnails
Post by: Niecher on November 05, 2013, 10:56:09 pm

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

this one twice:

Code: [Select]

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


Code: [Select]

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


twice:

---

Code: [Select]

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


Code: [Select]

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


Code: [Select]

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

Regards.

Title: Re: Re: diffrent class for thumbnails
Post by: allvip on November 06, 2013, 02:34:15 am

Quote from: Αndré on September 20, 2013, 03:00:14 pm

Open include/functions.inc.php, find

Code: [Select]

$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]

.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]

.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 .

Title: Re: diffrent class for thumbnails
Post by: allvip on November 06, 2013, 02:54:37 am

to override the image class for intermediate pictures:

Code: [Select]

.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;
}


Title: Re: diffrent class for thumbnails
Post by: allvip on November 06, 2013, 02:56:09 am

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

Title: Re: diffrent class for thumbnails
Post by: allvip on November 06, 2013, 03:12:01 am

to override the image class for category:

Code: [Select]

.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]

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

and style it like this:

Code: [Select]

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


Title: Re: diffrent class for thumbnails
Post by: allvip on November 06, 2013, 03:35:01 am

to override the image class for albums thumbnails:

Code: [Select]

.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.

Title: Re: diffrent class for thumbnails
Post by: Αndré on November 06, 2013, 11:38:16 am

Quote from: Niecher on November 05, 2013, 10:56:09 pm

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.