Advanced search  

News:

cpg1.5.42 maintenance release - upgrade recommended
The Coppermine development team is releasing an update for Coppermine in order to fix several minor issues. All fixes are not security critical, so if your gallery is running fine with cpg1.5.36, cpg1.5.38 or cpg1.5.40 you don't need to upgrade. If you are running an older version than cpg1.5.36, you must update to this latest version as soon as possible because of the security impact!
[more]

Pages: [1]   Go Down

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

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1285
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: 15212
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: 1285
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: 15212
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: 1285
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: 1285
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: 1285
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: 1285
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: 1285
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: 15212
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.073 seconds with 19 queries.