The Clear and Float CSS Properties can introduce such flexibility, helping a Web Designer no end
Or they could drive you around the bend
I think I have a possible solution to the extra padding, or whitespace that occurs when inserting a random image set near the top of the page.
First a Description of the Problem:
Inserting a random set of images from the album causes a great deal of whitespace between the images and the next elements on the page. It appears the recently_updated action of the album tag follows the same logic.
Why this Happens:
The Album random image tag
Code: Select all
{cms_module module='album' action='random_image' number='3}
will insert 3 random images from your Photo Album anywhere on your page that you place this tag.
This is a great feature.
Unfortunately, the
Clear:Both at the bottom of the random_image template causes anything placed below this tag to appear after any page elements on the same level (horizontally.)
This means that if you have a either a large menu, or News on the left hand side, and you happen to insert a album random tag, anything that is below the random tag will be inserted on the page BELOW the elements on the left hand side.
The Solution:
Remove the along with its properties
In the Admin Menu
Navigate to Content -> Photo Albums
Click on Templates
Click the random_image Template
The last line should be:
Code: Select all
</ul><div style="clear:both"></div>
Remove the Div entirely so the last line reads:
Now we have to edit the Stylesheet for our Album module in order to compensate for the lack of space between our random_image insert and the next elements on the page.
Unfortunately, there doesn't appear to be anyway to edit the Stylesheet from within the Admin area, but this isn't a huge issue as most people will have no need to edit it.
It is located in {siteroot}/modules/Album/css/stylesheet.css
Locate the following section:
Code: Select all
/* Picture List UL */
.picturelist
{
margin:0;
padding:0;
}
We need to add padding at the bottom of the Unordered List of Photos. I've chosen to add 8em. You could also for instance add 100px for the same effect.
Code: Select all
/* Picture List UL */
.picturelist
{
margin:0;
padding-bottom:8em;
}
I've included three pictures to illustrate the situation.
Code: Select all
The Problem - Before doing anything
http://i24.tinypic.com/negjnn.jpg
Halfway There - (Further Problems)
At this point we have edited the template but still haven't edited the stylesheet
http://i22.tinypic.com/2zq6hq8.jpg
The Solution - having edited both template and stylesheet
http://i20.tinypic.com/2vudb8p.jpg
Hope this helps anyone having a problem with the Photo Album module.
It is a brilliant work of art and it truly is Photo Albums made Simple. A few little issues here and there should not take away from what is one of the most flexible but still user-friendly photo albums available for any CMS out there.
