Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

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

0 Members and 1 Guest are viewing this topic.

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
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: 15764
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

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
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: 15764
Re: diffrent class for thumbnails
« Reply #3 on: November 05, 2013, 02: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, 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.
« Last Edit: November 05, 2013, 11:38:08 pm by Niecher »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Re: diffrent class for thumbnails
« Reply #5 on: November 06, 2013, 02: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

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: diffrent class for thumbnails
« Reply #6 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;
}
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: diffrent class for thumbnails
« Reply #7 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
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: diffrent class for thumbnails
« Reply #8 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;
}
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: diffrent class for thumbnails
« Reply #9 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.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15764
Re: diffrent class for thumbnails
« Reply #10 on: November 06, 2013, 11:38:16 am »

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.024 seconds with 20 queries.