Advanced search  

News:

cpg1.5.36 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.34 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: diffrent class for thumbnails  (Read 5565 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
diffrent class for thumbnails
« 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
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15039
Re: diffrent class for thumbnails
« Reply #1 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.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
Re: diffrent class for thumbnails
« Reply #2 on: September 20, 2013, 03:05:32 PM »

thanks.worked
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15039
Re: diffrent class for thumbnails
« Reply #3 on: November 05, 2013, 03:35:05 PM »

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

Niecher

  • LocalSupporter
  • Coppermine frequent poster
  • ***
  • Country: es
  • Offline Offline
  • Gender: Male
  • Posts: 191
Re: diffrent class for thumbnails
« Reply #4 on: November 05, 2013, 11: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.
« Last Edit: November 06, 2013, 12:38:08 AM by Niecher »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
Re: Re: diffrent class for thumbnails
« Reply #5 on: November 06, 2013, 03:34:15 AM »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
Re: diffrent class for thumbnails
« Reply #6 on: November 06, 2013, 03: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;
}
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
Re: diffrent class for thumbnails
« Reply #7 on: November 06, 2013, 03:56:09 AM »

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

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
Re: diffrent class for thumbnails
« Reply #8 on: November 06, 2013, 04: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;
}
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1278
Re: diffrent class for thumbnails
« Reply #9 on: November 06, 2013, 04: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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15039
Re: diffrent class for thumbnails
« Reply #10 on: November 06, 2013, 12:38:16 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.
Logged
Pages: [1]   Go Up
 

Page created in 0.076 seconds with 21 queries.