Empty album color difference Empty album color difference
 

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

Main Menu

Empty album color difference

Started by kegobeer, September 10, 2004, 06:06:41 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

kegobeer

In all themes, I've noticed that empty albums aren't one solid color.
Do not send me a private message unless I ask for one.  Make your post public so everyone can benefit.

There are no stupid questions
But there are a LOT of inquisitive idiots

Tranz

I noticed that before in 1.3 whenever using Opera. I was surprised to see it happen in 1.4 in Internet Explorer and FireFox. Strangely, it doesn't happen in my theme, which I based on Project vii. I still see this behavior with 1.4 in Opera, regardless of theme.

Tranz

I swapped things around to see what the source of the problem was. Nothing made a difference.

I could only use v1.4 style.css with v.1.3.2 since there are functions in theme.php which are incompatible. However, there was no change in color in empty table cells. So, v 1.3.2 looked fine even with 1.4's style.css

When I replaced the entire project vii folder of 1.4 with 1.3.2's folder, v. 1.4 still had the issue with empty album color.

So I'm guessing the bug exists beyond the theme folders.

Tranz

#3
But strangely, my theme that I made based on project vii doesn't have that problem. I didn't update my theme from v. 1.3.2 though.

I've already mentioned it, but now that I've uploaded my cpg dev installation, you can see for yourself. http://cpg.thu.lunarpages.com/

Tarique Sani

I had posted a fix for this in the CSS theme thread - my connects today are too bad and I am barely able to surf - please look up that thread and fix
SANIsoft PHP applications for E Biz

Tranz

#5
Quote from: Tarique Sani on September 23, 2004, 06:51:03 AM
I had posted a fix for this in the CSS theme thread - my connects today are too bad and I am barely able to surf - please look up that thread and fix
I went through several threads after running a search for "css theme" authored by you, Tarique. I think this is the one. I am guessing this is the post where you posted the solution.

It didn't work though. The color still shows up in the blank areas; it's just lighter. I put the exact same maintable code in my theme into the project vii. The color still showed in blank cells. I removed the background-color attribute and the page just didn't look right. When I removed the same attribute from my theme, it didn't make a difference.

For demonstration purposes, I made the maintable's background-color bright red so you can compare the difference when viewing Classic and my theme when using this in style.css:
.maintable {
        border: 1px solid #0E72A4; //specific to Classic theme
        background-color: #FF0000;
        margin-top: 1px;
        margin-bottom: 1px;
}





Tarique Sani

Quote from: TranzNDance on September 23, 2004, 08:11:31 AM
.maintable {
        border: 1px solid #0E72A4; //specific to Classic theme
        background-color: #FF0000;
        margin-top: 1px;
        margin-bottom: 1px;
}


Try this instead (of course specific to Classic still)

.maintable {
        border: 1px solid #0E72A4; //specific to Classic theme
        background-color: #efefef;
        margin-top: 1px;
        margin-bottom: 1px;
}


SANIsoft PHP applications for E Biz

Tranz

Yes, it works. :) However, I think it hides a problem rather than addresses it. With the current stable version, it is unnecessary to be so specific with the background-color to make things match. Every theme would have to be edited to make the blank area match, instead of fixing the source(s) of the problem. Know what I mean?

donnoman

In doing more research on this problem I've also uncovered a number of bad html tags in the themes:

These are specific instances in rainy_day:



line 274
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

283
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

304
      <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

383
  <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

392
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

413
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

919
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'

920
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'


They are also found in eyeball, styleguide, and fruity.

donnoman

Found the problem with maintable showing through.

At some point during the process the height="100%" attributes had been removed.

In order for it to work all elements starting with <td width="{COL_WIDTH} down need to be changed as in this example:

Note: The HTML tags were also fixed in this example for rainy_day


<!-- BEGIN c_empty_cell -->
        <td width="{COL_WIDTH}%" height="100%" valign="top">
        <table width="100%" cellspacing="0" height="100%" cellpadding="0">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /> <br />
                </td>
        </tr>
        <tr height="100%">
        <!-- debug c_empty_cell -->
                <td width="100%" height="100%" valign="top" class="tableb_compact">
                        &nbsp;
                </td>
        </tr>
        </table>
        </td>
<!-- END c_empty_cell -->



donnoman

I went through CVS Logs rev 1.44 of rainy day had the comment that hieght attribute was removed for <table> <tr> and <td> for standards compliance.

I don't know if it helps to rewrite these with CSS, but here it is anyway using inline styles. It required fewer attribute modifications than the first attempt.


<!-- BEGIN c_empty_cell -->
        <td width="{COL_WIDTH}%" valign="top" style="height:100%">
        <table width="100%" cellspacing="0" cellpadding="0" style="height:100%">
        <tr>
                <td height="1" valign="top" class="tableh2">
                        <b>&nbsp;</b>
                </td>
        </tr>
        <tr>
                <td>
                        <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                </td>
        </tr>
        <tr>
                <td width="100%" valign="top" class="tableb_compact" style="height:100%">
                        &nbsp;
                </td>
        </tr>
        </table>
        </td>
<!-- END c_empty_cell -->

Tranz

Awesome, thanks for figuring this out, donnoman. I implemented this fix and it worked for albums that belong to categories. However, empty cells in tables containing albums that don't belong to categories still had the bug.

So I added  style="height:100%"
to
<!-- BEGIN empty_cell --> (specifically the one under $template_album_list)
<!-- BEGIN c_album_cell -->

Here's my test gallery

At the time of this post I have updated Rainy Day theme (but have not committed the changes pending approval).

Tranz

Quote from: donnoman on December 01, 2004, 06:08:49 AM
In doing more research on this problem I've also uncovered a number of bad html tags in the themes:

These are specific instances in rainy_day:



line 274
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

283
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

304
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

383
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

392
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /

413
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /<br />

919
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'

920
<img src="images/spacer.gif" width="1" height="1" border="0" alt="" /</td>'


They are also found in eyeball, styleguide, and fruity.

Thank you for the report. I have fixed the errors and committed the changes.

Tranz

argh... the empty cell still shows up in a different color in Opera, just as with cpg 1.3x.

donnoman

My guess is the problem with Opera isn't related to these changes, or maybe it never paid attention to the height attributes in the first place.

I'll install opera and do some testing tonite.

Joachim Müller

putting the height attribute back in is not an option imo, we should only do so if there's no other way to fix this issue. There have been troubles in the past with browsers handling empty cells differently - maybe putting &nbsp; into empty cells might help...

Joachim

Casper

I have just modified the water drop theme for xhtml compliance, and this fix, although not causing a validation failure with either the css or xhtml, only worked for FF, not IE.
And the empty cells already have '&nbsp;' in them.
It has been a long time now since I did my little bit here, and have done no coding or any other such stuff since. I'm back to being a noob here

donnoman

What about dynamically changing the hieght of spacer.gif in the empty cells based on the minimum height configured for thumbnails by the system?

donnoman

I fixed the background showing through in Firefox, Opera, and IE 6 for Rainy_Day in 1.4devel

I tested this fix with album list thumbnails set at 100, 75, and 50.

I did see some odd heights that were throwing off my measurements that I tracked down to height
differences returned by two function in index.php.

In these tests Album List Thumbnails were set to 50 in the config.

theme_display_album_list_cat returned a height 1 pixel taller than theme_display_album_list

<img src="albums/Bruce/Strip%20Wood%20Floors/thumb_WIND.JPG" class="image"  height="51" border="0" alt="WIND.JPG" />

theme_display_album_list

<img src="albums/Bruce/Plank%20Wood%20Floors/thumb_WMASTM.JPG" class="image"  height="50" border="0" alt="WMASTM.JPG" />


My html is set to account for the difference at 50, but at 75 they were 1 pixel off, at 100 the were the same again.
I think this has been happening all along, and its just because I was counting every pixel to get my fix to look right
that I caught it. Regardless of picture size I don't think those two functions should return anything other than what's in the system config.
But I couldn't track it down.

Empty Cell Fix for Rainy_Day, the cvs version as of 12/2/04):

Need to add a class to the css, I thought this method was peferrable to burying a +7 in the code somewhere when calculating height.
If a user changes their .image class it will throw off the height needed for spacer.gif.


.blank_image {
/* Margin should = .image (margin+border-width) */
       border:0;
       margin: 3px;
}


Everything else is in theme.php

In function theme_display_album_list_cat AND function theme_display_album_list find


   $params = array('{COL_WIDTH}' => $column_width);
   $empty_cell = template_eval($empty_cell, $params);


Replace with

   $params = array('{COL_WIDTH}' => $column_width,
   '{SPACER_HEIGHT}' => $CONFIG['alb_list_thumb_size']
   );
   $empty_cell = template_eval($empty_cell, $params);


Replace the empty_cell section starting at line 294

<!-- BEGIN empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
               <td height="1" valign="top" class="tableh2">
               &nbsp;
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>
               <td align="center" class="thumbnails">
                       <img src="images/spacer.gif" width="1" height="2" border="0" alt="" /><br />
                       <img src="images/spacer.gif" width="1" height="{SPACER_HEIGHT}" class="blank_image" alt="" /><br />
               </td>
       </tr>
       </table>
       </td>
<!-- END empty_cell -->


Replace the c_empty_cell section starting at line 404

<!-- BEGIN c_empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
               <td height="1" valign="top" class="tableh2">
               &nbsp;
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>        
               <td align="center" class="thumbnails">
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
                       <img src="images/spacer.gif" width="1" height="{SPACER_HEIGHT}" class="blank_image" alt="" /><br />
               </td>
       </tr>
       </table>
       </td>
<!-- END c_empty_cell -->



I know this may be an ugly fix, but at least its a starting point.

donnoman

This is the more refined fix that went into core.inc.php

from $template_album_list

<!-- BEGIN empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0">
       <tr>
               <td height="1" valign="top" class="tableh2">
                       <b>&nbsp;</b>
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>
               <td width="100%" valign="top" class="tableb_compact">
                   <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1;margin-bottom:0" alt="" /></div>
               </td>
       </tr>
       </table>
       </td>
<!-- END empty_cell -->

from $template_album_list_cat

<!-- BEGIN c_empty_cell -->
       <td width="{COL_WIDTH}%" valign="top">
       <table width="100%" cellspacing="0" cellpadding="0" >
       <tr>
               <td height="1" valign="top" class="tableh2">
                       <b>&nbsp;</b>
               </td>
       </tr>
       <tr>
               <td>
                       <img src="images/spacer.gif" width="1" height="1" border="0" alt="" /><br />
               </td>
       </tr>
       <tr>
               <td width="100%" valign="top" class="tableb_compact" >
                     <div class="thumbnails" style="background-color:transparent"><img src="images/spacer.gif" width="1" height="{SPACER}" border="0" class="image" style="border:0;margin-top:1;margin-bottom:0" alt="" /></div>
               </td>
       </tr>
       </table>
       </td>
<!-- END c_empty_cell -->


from function theme_display_album_list & theme_display_album_list_cat

   $params = array('{COL_WIDTH}' => $column_width,
         '{SPACER}' => $thumb_cell_width
         );
   $empty_cell = template_eval($empty_cell, $params);