Drop shadow effect on images?

[spiros71]

Has anybody got any idea how to have the drop shadow effect like here:

http://www.nukeworker.com/pictures/displayimage.php?album=lastup&cat=0&pos=0

I copied the css but still it does not work for me. It works for both Mozilla and IE.

[Paver]

Have you copied the shadow images onto your website and adjusted the URLs in the INTwrap CSS styles to your site?  If you haven't, I assume NukeWorker has hotlinking disabled and so you are not allowed to grab his images on-the-fly.

[spiros71]

Hi Paver,

Yes, I have done so.

http://www.translatum.gr/gallery/themes/classic/style.css

[Paver]

I just tried it out on my testbed site.  The drop shadows work fine for me.  Make sure you have copied the images to your site (ideally to your images folder under your theme), then change the URLs in the CSS file to the correct URLs (e.g. "images/INT_shadow.gif" if in your theme's images folder), then add the <div> classes to your theme.php file in the $template_display_media variable as appropriate (wrapping the {IMAGE} tag).  You might have to adjust your table cell's background color and border.

By the way, I don't know if this code is NukeWorker.com's code or not.  If it is, it falls under the site's copyright and so you cannot use it without getting permission from the site owner.

[spiros71]

Hello Paver,

No, it is not copyrighted, I saw the same code in a post on this forum.

I tried to follow your instructions but in my theme.php I can see no such $template_display_media variable and no {IMAGE} tag (I use classic)

Code Select Expand


<?php
/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.5
  $Source: /cvsroot/coppermine/stable/themes/classic/theme.php,v $
  $Revision: 1.16 $
  $Author: gaugau $
  $Date: 2006/03/02 08:25:15 $
**********************************************/

// ------------------------------------------------------------------------- //
// This theme has all CORE items removed                                     //
// ------------------------------------------------------------------------- //
define('THEME_IS_XHTML10_TRANSITIONAL',1);

// Added to display flim_strip
function theme_display_film_strip(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $pos, $sort_options, $mode = 'thumb')
{
    global $CONFIG, $THEME_DIR;
    global $template_film_strip, $lang_film_strip;

    static $template = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $spacer = '';

    if ((!$template)) {
        $template = $template_film_strip;
        $thumb_cell = template_extract_block($template, 'thumb_cell');
        $empty_cell = template_extract_block($template, 'empty_cell');
    }

    $cat_link = is_numeric($aid) ? '' : '&amp;cat=' . $cat;

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['max_film_strip_items']) . '%';

    $i = 0;
    $thumb_strip = '';
    foreach($thumb_list as $thumb) {
        //modify $new_size for max dimension of thumbnails in filmstrip
        $new_size = 65;
        preg_match('/(?<=width=")[0-9]*/',$thumb['image'],$matches,PREG_OFFSET_CAPTURE);
        $srcWidth=$matches[0][0];
        preg_match('/(?<=height=")[0-9]*/',$thumb['image'],$matches,PREG_OFFSET_CAPTURE);
        $srcHeight=$matches[0][0];
        $ratio = max($srcWidth, $srcHeight) / $new_size;
        $ratio = max($ratio, 1.0);
        $destWidth = (int)($srcWidth / $ratio);
        $destHeight = (int)($srcHeight / $ratio);
        $thumb['image']=preg_replace('/width="[^"]*"/','width="'.$destWidth.'"',$thumb['image']);
        $thumb['image']=preg_replace('/height="[^"]*"/','height="'.$destHeight.'"',$thumb['image']);
        $i++;
        if ($mode == 'thumb') {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&amp;pos={$thumb['pos']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => ''
                );
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => ''
                );
        }
        $thumb_strip .= template_eval($thumb_cell, $params);
    }

    if (defined('THEME_HAS_FILM_STRIP_GRAPHICS')) {
        $tile1 = $THEME_DIR . 'images/tile1.gif';
        $tile2 = $THEME_DIR . 'images/tile2.gif';
    } elseif (defined('THEME_HAS_FILM_STRIP_GRAPHIC')) {
        $tile1=$tile2=$THEME_DIR . 'images/tile.gif';
    } else {
        $tile1=$tile2= 'images/tile.gif';
    }

    $params = array('{THUMB_STRIP}' => $thumb_strip,
        '{COLS}' => $i,
        '{TILE1}' => $tile1,
        '{TILE2}' => $tile2,
        );

    ob_start();
    starttable($CONFIG['picture_table_width']);
    echo template_eval($template, $params);
    endtable();
    $film_strip = ob_get_contents();
    ob_end_clean();

    return $film_strip;
}
?>


[Paver]

The classic theme has all the items you can override removed.

In order to override a core theme element, you copy it from the sample/theme.php into your theme.php and modify as desired.  If you are currently using the "classic" theme (and its folder), copy it to a new folder, give it a name you like, then modify its theme.php and style.css.  You should restore the classic theme to its original state so that you always will have a working default classic theme to fall back to (and for future upgrades it will be updated correctly).

[spiros71]

I did try, but I get a lot of these errors:

Parse error: parse error, unexpected '<' in /home/translat/public_html/gallery/themes/classic/theme.php on line 25


Parse error: parse error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/translat/public_html/gallery/themes/classic/theme.php on line 79

Where exactly should I plase it and how?

What I did was add this:

Code Select Expand

$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
        <tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->

<td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
<table>
<tr><td>
<div id="v1">
<div id="main" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap1" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap2" style="padding:0px 0px 0px 0px;" align="center">
<div class="wrap3" align="center"> <a href="{LINK_TGT}">{THUMB}</a></div>
</div>
</div>

</div>

</div>
</td></tr>
<tr><td>
{CAPTION}
                                        {ADMIN_MENU}
                </td>


<!-- END thumb_cell -->


below

Code Select Expand

define('THEME_IS_XHTML10_TRANSITIONAL',1);

[Paver]

If you look at the first line you added, you'll see "<<<EOT".  This means (in PHP) to include every line below until you reach a line with "EOT;" on it.  So you need to copy properly each variable that uses this "EOT" syntax (a.k.a. heredoc syntax).  The errors you're getting is because your theme.php is not syntactically correct.

[spiros71]

Cheers Paver, thanks to your guidance it now works OK
(I've applied it for both thumbs and intermediate pics)

http://www.translatum.gr/gallery/index.php

[Paver]

It looks good, but you probably should re-do the images to match your current background, i.e. fade with your background color.  This is always an issue with transparent images that use shadows and other diffuse effects - you need to create them for a specific background color so they fade correctly.

Marking this thread as Solved.