This happens occasionally, although the attached picture appears to be fairly frequent. The album thumbnails are messed up and overly the captions. http://nanwich.info/acidfree_album_messed_up.jpg

CommentFileSizeAuthor
#12 acidfree-cell.jpg24.94 KBjaredwiltshire

Comments

vhmauery’s picture

What can you tell me about the thumbs that get messed up? Are they always the same picture? Does that album have a set thumbnail or is it random? Are you using drupal to serve the image files or not? Is it always the same thumbnail image? Is it always the same album? Does it happen often? Can you look at the html source and compare the broken thumb to a good thumb?

I think that should give us a good start on this one.

vhmauery’s picture

What can you tell me about the thumbs that get messed up? Are they always the same picture? Does that album have a set thumbnail or is it random? Are you using drupal to serve the image files or not? Is it always the same thumbnail image? Is it always the same album? Does it happen often? Can you look at the html source and compare the broken thumb to a good thumb?

I think that should give us a good start on this one.

vhmauery’s picture

oops. That got posted twice because the first time I got a 500 internal server error. :-) Silly server.

nancydru’s picture

>What can you tell me about the thumbs that get messed up? Are they always the same picture?
No, and it's not always the same album either, although it is usually either that one or the one to its left.

>Does that album have a set thumbnail or is it random?
Random

>Are you using drupal to serve the image files or not?
What are my choices? I just installed the module and am using it the way it comes, other than setting pictures per page to 10 and the padding to 15.

>Is it always the same thumbnail image? Is it always the same album?
No, no.

>Does it happen often?
Yes, usually when I first enter the albums.

>Can you look at the html source and compare the broken thumb to a good thumb?
They look okay to me. This time it's the one to the left ("September 2006"), and the thumbnail is square.

<div class="clear-block acidfree">
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 135px; height: 105px;"><a href="http://KappaBeta/april_2004_meeting" title="April 2004 Meeting: 13  Items"><img src="http://KappaBeta/files/images/kb412.thumbnail.jpg" alt="kb412"  id="acidfree-thumb652" title="April 2004 Meeting: 13  Items" width="120" height="90" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/april_2004_meeting" title="April 2004 Meeting: 13  Items"></a></div></div><p><a href="http://KappaBeta/april_2004_meeting" title="April 2004 Meeting: 13  Items">April 2004 Meeting</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 104px; height: 135px;"><a href="http://KappaBeta/november_2004_meeting" title="November 2004 Meeting: 9  Items"><img src="http://KappaBeta/files/images/P1010035.thumbnail.jpg" alt="P1010035"  id="acidfree-thumb666" title="November 2004 Meeting: 9  Items" width="89" height="120" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/november_2004_meeting" title="November 2004 Meeting: 9  Items"></a></div></div><p><a href="http://KappaBeta/november_2004_meeting" title="November 2004 Meeting: 9  Items">November 2004 Meeting</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 15px; height: 15px;"><a href="http://KappaBeta/september_2005" title="September 2005: 15  Items"><img src="http://KappaBeta/files/images/Donna.thumbnail.jpg" alt="Donna"  id="acidfree-thumb677" title="September 2005: 15  Items" width="" height="" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/september_2005" title="September 2005: 15  Items"></a></div></div><p><a href="http://KappaBeta/september_2005" title="September 2005: 15  Items">September 2005</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 135px; height: 83px;"><a href="http://KappaBeta/august_2006_meeting" title="August 2006 Meeting: 5  Items"><img src="http://KappaBeta/files/images/081906b_cr.thumbnail.JPG" alt="081906b_cr"  id="acidfree-thumb708" title="August 2006 Meeting: 5  Items" width="120" height="68" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/august_2006_meeting" title="August 2006 Meeting: 5  Items"></a></div></div><p><a href="http://KappaBeta/august_2006_meeting" title="August 2006 Meeting: 5  Items">August 2006 Meeting</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 135px; height: 104px;"><a href="http://KappaBeta/september_2006" title="September 2006: 5  Items"><img src="http://KappaBeta/files/images/091606group.thumbnail.jpg" alt="091606group"  id="acidfree-thumb719" title="September 2006: 5  Items" width="120" height="89" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/september_2006" title="September 2006: 5  Items"></a></div></div><p><a href="http://KappaBeta/september_2006" title="September 2006: 5  Items">September 2006</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 135px; height: 111px;"><a href="http://KappaBeta/march_2006" title="March 2006: 16  Items"><img src="http://KappaBeta/files/images/06Mar21.thumbnail.jpg" alt="06Mar21"  id="acidfree-thumb725" title="March 2006: 16  Items" width="120" height="96" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/march_2006" title="March 2006: 16  Items"></a></div></div><p><a href="http://KappaBeta/march_2006" title="March 2006: 16  Items">March 2006</a></p></div></div>

<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 135px; height: 105px;"><a href="http://KappaBeta/november_2006" title="November 2006: 13  Items"><img src="http://KappaBeta/files/images/111806c.thumbnail.jpg" alt="111806c"  id="acidfree-thumb748" title="November 2006: 13  Items" width="120" height="90" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/november_2006" title="November 2006: 13  Items"></a></div></div><p><a href="http://KappaBeta/november_2006" title="November 2006: 13  Items">November 2006</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 135px; height: 105px;"><a href="http://KappaBeta/january_2007_0" title="January 2007: 13  Items"><img src="http://KappaBeta/files/images/Soc070120_0003.thumbnail.JPG" alt="Soc070120_0003"  id="acidfree-thumb767" title="January 2007: 13  Items" width="120" height="90" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/january_2007_0" title="January 2007: 13  Items"></a></div></div><p><a href="http://KappaBeta/january_2007_0" title="January 2007: 13  Items">January 2007</a></p></div></div>
<div class="acidfree-cell"><div class="acidfree-item acidfree-folder"><div class="acidfree-thumbnail" style="width: 65px; height: 135px;"><a href="http://KappaBeta/february_2007_0" title="February 2007: 11  Items"><img src="http://KappaBeta/files/images/070217_0001.thumbnail.JPG" alt="070217_0001"  id="acidfree-thumb967" title="February 2007: 11  Items" width="50" height="120" class="image thumbnail" /></a><div class="acidfree-overlay"><a href="http://KappaBeta/february_2007_0" title="February 2007: 11  Items"></a></div></div><p><a href="http://KappaBeta/february_2007_0" title="February 2007: 11  Items">February 2007</a></p></div></div>
</div>

An additional possible symptom, where the album thumbnail overlaps: http://nanwich.info/acidfree_album_overlap.jpg
but this depends on the thumbnail being displayed (portrait vs landscape). The sample HTML includes this problem too ("November 2004").

nancydru’s picture

OOPS, it's the "September 2005"album that's messed up

nancydru’s picture

Also, FF2, Garland theme

nancydru’s picture

Having now played with 3 different settings for "Amount of padding/border on each side of thumbnail image." I have a strong suspicion that this setting is involved. BTW, things definitely do mess up when it is anything other than the "out of the box" 12.

jaredwiltshire’s picture

Yes that setting is what is causing your problems.

That setting doesn't actually change the padding around the image it compensates for it if you change the border/padding in your themes css.

The default css that comes with the module has 12px of border and padding around the image and thus the setting defaults to 12px.

I think we might need to change the description for this setting to make it more clear.

nancydru’s picture

I see, thank you for the explanation. So I can increase the extra padding to help avoid this problem, but need to specify that in the settings as well?

vhmauery’s picture

@jaredwiltshire

Since you wrote this fancy theme (which I do like) could you confirm that we don't even really need this setting? It is my opinion, that while causing confusion on the settings page, it is highly dependent of the default acidfree theme and therefore unnecessary for others to be messing with. If they want to write a new theme, that is fine, but does this setting affect them?

That said, this means that we may have to find some other way to inject some of the drupal_set_html_head calls into the page.

nancydru’s picture

I think the problems I'm seeing are a result of my font size and amount of caption in concert with the orientation of the randomly chosen image.

I realize I should be doing a bit more investigation, but it's sometimes easier to ask, which style(s) should I change to make the whole thumbnail set larger?

jaredwiltshire’s picture

StatusFileSize
new24.94 KB

OK I think these rough diagrams might help with the explanation.
Acidfree-cell
Img-thumbnail

Firstly more about the "Amount of padding/border on each side of thumbnail image" setting, what it does and is it needed.

Basically we needed to set the width & height of acidfree-thumbnail to the width and height of the actual thumbnail dimensions + the amount of padding and border around it (see img.thumbnail.jpg). In acidfree.css the padding is set to 5px and the border 1px giving our default setting of 12px.

If someone decides to change the amount of border/padding around img.thumbnail in their themes css (eg to remove the printed photo with a border look) they would have to change this setting. If this setting wasnt provided the theme would look stuffed up.

@vhmauery
Why do we have to change the drupal_set_html_head() calls?

@nancyw
I'm not sure what is causing the problem seen in acidfree_album_messed_up.jpg assuming you have "the setting" set to 12 and havent modified any css.

The problem seen in acidfree_album_overlap.jpg however is easily fixed.
div.acidfree-cell has to have a fixed height and width which by default is calculated by php and set in an internal style sheet in the head. Because you have a tall image and a long caption you need to manually set the height of div.acidfree-cell to a larger value in your themes css.
So something like:
div.acidfree-cell {
height: 180px;
}

vhmauery’s picture

@jaredwiltshire
My only concern was adding css that was not necessary if somebody was using a different theme. If they wrote garland_acidfree_print_thumb_* then their new theme will likely not need the CSS that is injected using the call to drupal_set_html_head().

nancydru’s picture

Changing the height seemed to have absolutely no effect. I still get the bottom of the cell cut off on tall images on the second (bottom) row. However, changing the width and font size so that the caption doesn't go into two rows seemed to solve that problem for now. It may return if someone creates an album with a long caption.

jaredwiltshire’s picture

Hmm.. Changing the height should (theoretically) work...

@vhmauery
Are there any other options?

The css inserted in the head can be easily overridden, but are you more worried about resources and cleanness?

nancydru’s picture

Actually, I guess I need to clarify that a bit. I display 10 albums per page. That comes out to two rows of 5. The top row did seem to create more space on the bottom. But the bottom row did not, albums with longer titles that went to two lines would have the bottom border cut off. This might very well be a rendering problem. I wonder if inserting a clear block (and maybe a blank line) after the cells are created might solve this problem.

nancydru’s picture

Title: Album page messed up » Album page: Overlaps and cutoffs

Well, I downloaded to refresh my code. Unfortunately that wiped out my CSS changes. But I went back and tried to reapply them and it isn't working. I have thumbnails overlapping (even with height: 180px) and the bottom row is being cut off when the thumbnail is portrait orientation. See http://nanwich.info/acidfree_overlap.jpg

It looks like you're including a STYLE tag in the HTML and CSS won't override that.

jaredwiltshire’s picture

Downloading and installing a new version of acidfree should not overwrite changes you make to your themes CSS. Please make sure you are editing your themes style.css file and not directly editing the acidfree css file.

I assume you are referring to this tag:
<style type="text/css" media="all">.acidfree-cell{width:126px;}.acidfree .acidfree-cell{height:145px;}</style>

These widths and heights can be overridden in your themes css file. E.g. if you insert
<style type="text/css" media="all">.acidfree-cell{width:150px;}.acidfree .acidfree-cell{height:180px;}</style>
into your themes css this will take precedence over the values in the style tag in the HTML.

If you are still having problems, post a link to the gallery so I can have a look at it (or email it to me if you want).

vhmauery’s picture

Status: Active » Closed (fixed)

closing old bugs.