Change Random image Backgrd

[rubbersoul]

What I'm trying to do is change the color of the random image table's background. If I 'view' the source code of my website I can see that the class of that table is 'maintable' however....I don't want to alter 'maintables' color as that will alter it everywhere maintable is set! I just want to change the color of the random images table....how can this be done? I know that that table is generated somehow as it's not part of any .php table layout that I can see....I'm confused, where can I change it...thanks!

[rubbersoul]

Nothing?

[kegobeer]

I think this is possible.  First, open up your theme's style.css file and duplicate the maintable section, and give it a unique name (in this example I used maintable234).  Then in your theme.php file, change

Code Select Expand

function starttable($width = '-1', $title = '', $title_colspan = '1')

to

Code Select Expand

function starttable($width = '-1', $title = '', $title_colspan = '1', $album = '')

and in function theme_display_thumbnails, change

Code Select Expand

    if ($mode == 'thumb') {
        starttable('100%', $title, $thumbcols);

to

Code Select Expand

    if ($mode == 'thumb') {
        if ($aid == 'random') {
          starttable('100%', $title, $thumbcols, $aid);
        } else {
          starttable('100%', $title, $thumbcols);
        }

Now, in function starttable, change

Code Select Expand

<!-- Start standard table -->
      echo <<<EOT

<!-- Start standard table -->
<table align="center" width="$width" cellspacing="1" cellpadding="0" class="maintable">

EOT;

to

Code Select Expand

     if ($aid) {
      echo <<<EOT
     
<!-- Start standard table -->
<table align="center" width="$width" cellspacing="1" cellpadding="0" class="maintable234">

EOT;
    } else {
      echo <<<EOT

<!-- Start standard table -->
<table align="center" width="$width" cellspacing="1" cellpadding="0" class="maintable">

EOT;
  }

This is untested.  Make sure to back up your originals first.

[rubbersoul]

No cigar! Changed everything as you said....no errors....but no change at all!

[Nibbler]

Post a link to your site.

[rubbersoul]

I cant.....hosted locally....no access from the outside yet......do you want the code I changed? I can post that and assure you that it's exactly as you said!

[rubbersoul]

OK.....have a link up http://70.80.114.119:498/index.php?cat=0 Let me know....need help on this one!

[kegobeer]

Ok, instead of

Code Select Expand

     if ($aid) {
      echo <<<EOT

try

Code Select Expand

     if ($album) {
      echo <<<EOT

$aid isn't the variable in starttable, it's $album.  My mistake.

[rubbersoul]

This is the stuff I'm struggeling to accomplish....

[kegobeer]

Whoa, you were asking to change one meta album's background.  Let's get that working first, ok?  Try my $aid -> $album fix posted above.

[rubbersoul]

OK....I did it...and I used an Orange color for the time being in my CSS just so I could see the change before I use my image.....however....if you look on my site you'll see that it changed a table behind a group of other tables.....I need those to become transparent so that you'll be able to see my image that will be streched across the four cells.....do I make sence? I hope so! Thanks though....your getting there

[kegobeer]

Let's try this:

In your style.css file, copy the thumbnails class and give it a unique name, like thumbrandom.  Make your background color/image/whatever changes.

In theme.php, in function theme_display_thumbnails, change this

Code Select Expand

    if ($header == '') {
        $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
        $tabs = template_extract_block($template_thumbnail_view, 'tabs');
        $header = template_extract_block($template_thumbnail_view, 'header');
        $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        $row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
        $footer = template_extract_block($template_thumbnail_view, 'footer');
        $spacer = template_extract_block($template_thumbnail_view, 'spacer');
    }

to this

Code Select Expand

    if ($header == '') {
        if ($aid=='random') {
          $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell_random');
          $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell_random');
        } else {
          $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
          $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        }
        $tabs = template_extract_block($template_thumbnail_view, 'tabs');
        $header = template_extract_block($template_thumbnail_view, 'header');
        //$empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        $row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
        $footer = template_extract_block($template_thumbnail_view, 'footer');
        $spacer = template_extract_block($template_thumbnail_view, 'spacer');
    }

Find this:

Code Select Expand

$template_thumbnail_view = <<<EOT

Underneath, you'll find

Code Select Expand

<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->

Copy that chunk and paste it underneath the <!-- END empty_cell --> line.  Change class="thumbnails" to class="thumbrandom", and add _random to thumb_cell and empty_cell.

See what damage that does.   

[rubbersoul]

" and add _random to thumb_cell and empty_cell."

Sorry...what do you mean by this last part?

[kegobeer]

thumb_cell_random
empty_cell_random

[kegobeer]

Code Select Expand

<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->

becomes

Code Select Expand

<!-- BEGIN thumb_cell -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN thumb_cell_random -->
        <td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">
                <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                                <td align="center">
                                        <a href="{LINK_TGT}">{THUMB}<br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </td>
                        </tr>
                </table>
        </td>
<!-- END thumb_cell_random -->
<!-- BEGIN empty_cell_random -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell_random -->

[rubbersoul]

Very good  I take my hat off 2 you.....wow! I would have never got that...you know your PHP....good job!

[rubbersoul]

Was great with a colo, but now that I put my image I can see where it's applying it not only to the row...but also to the 4 cells which makes it double up.....if I could set those cells to 'transparent' this would be good!

[kegobeer]

I've actually got a much cleaner way of doing this.  I'm still tweaking a bit.  I don't understand about the image problem.  Can you rephrase that?

[kegobeer]

Ok, let's say, just for a minute, you want to undo the changes you've made so far.  Let's even say you want to do this again.

Leave the changes to your style.css sheet, but rename the altered maintable class to random and the altered thumbnails class to thumbrandom.

In theme.php, there's a bunch of changes needed.

Find $template_thumbnail_view = <<<EOT

Under it, find

Code Select Expand

<td valign="top" class="thumbnails" width ="{CELL_WIDTH}" align="center">

replace with

Code Select Expand

<td valign="top" class="{THUMB_CLASS}" width ="{CELL_WIDTH}" align="center">

under that, find

Code Select Expand

<td valign="top" class="thumbnails" align="center">&nbsp;</td>

replace with

Code Select Expand

<td valign="top" class="{THUMB_CLASS}" align="center">&nbsp;</td>

In function starttable:

find

Code Select Expand

function starttable($width = '-1', $title = '', $title_colspan = '1')

replace with

Code Select Expand

function starttable($width = '-1', $title = '', $title_colspan = '1', $album='')

find

Code Select Expand

if ($width == '100%') $width = $CONFIG['main_table_width'];

after, add

Code Select Expand

    if ($album == 'random') {
      $style = 'random';
    } else {
      $style = 'maintable';
    }

find

Code Select Expand

<table align="center" width="$width" cellspacing="1" cellpadding="0" class="maintable">

replace with

Code Select Expand

<table align="center" width="$width" cellspacing="1" cellpadding="0" class="$style">

In function theme_display_thumbnails:

find

Code Select Expand

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

before, add

Code Select Expand

    if ($aid == 'random') {
      $style = 'thumbrandom';
    } else {
      $style = 'thumbnails';
    }

find

Code Select Expand

starttable('100%', $title, $thumbcols);

replace with

Code Select Expand

starttable('100%', $title, $thumbcols, $aid);

find

Code Select Expand

    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            if ($aid == 'lastalb') {
                $params = array('{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu']
                    );
            } else {
                $params = array('{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu']
                    );
            }
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => ''
                );
        }
        echo template_eval($thumb_cell, $params);

        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
    }
    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }

replace with

Code Select Expand

    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            if ($aid == 'lastalb') {
                $params = array('{THUMB_CLASS}' => $style,
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                    );
            } else {
                $params = array('{THUMB_CLASS}' => $style,
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}",
                    '{THUMB}' => $thumb['image'],
                    '{CAPTION}' => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                    );
            }
        } else {
            $params = array('{THUMB_CLASS}' => $style,
                '{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => $thumb['caption'],
                '{ADMIN_MENU}' => ''
                );
        }
        echo template_eval($thumb_cell, $params);

        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
    }
    for (;($i % $thumbcols); $i++) {
        $params = array('{THUMB_CLASS}' => $style);
        echo template_eval($empty_cell, $params);
    }

Same effect, just better coding.  Using this system, you could easily change each thumbnail section's style!

This has been tested with 1.3.2 and a copy of the classic theme.

[kegobeer]

About your background image:  It's repeating because you are applying it to the table, so it's repeating itself to fill up your table.  To center it on your table without repeating:

        background-image: url(images/site_logo.png);
        background-repeat: no-repeat;
        background-position: center center;

A helpful CSS background image link: http://www.w3schools.com/css/css_background.asp

Here's an example of a picture behind the entire table.  Make sure your image is at least large enough for 2 rows by 4 columns.