A new gallery manager : Album

[tonyg]

Hi Elijah,

I am getting weird things happening since installing Album 0.50 - note that I have deleted all my old albums and recreated them from scratch.

After I click on a thumbnail, I get URLs like http://www.brisbanebikers.com/cms/index ... bum-2/8/31

And I can see both the album thumbs/pics and the code line that inserts the album in the page.

Any idea what's causing this? I suspect caching, but not sure.

TonyG

[Elijah Lofgren]

Hi Elijah,

I am getting weird things happening since installing Album 0.50 - note that I have deleted all my old albums and recreated them from scratch.

After I click on a thumbnail, I get URLs like http://www.brisbanebikers.com/cms/index ... bum-2/8/31

And I can see both the album thumbs/pics and the code line that inserts the album in the page.

Any idea what's causing this? I suspect caching, but not sure.

TonyG

It was caused because I was just removing code like this from the page content:

\{cms_module module="album".*?\}

I've changed it to remove code like this:

{cms_module module=.*?\}

this should make the following stop showing up above the pictures:

{cms_module module='Album' albums='2' }

This has been fixed in the latest SVN version of Album:
http://viewsvn.cmsmadesimple.org/viewsv ... m&view=rev

If you want  you can just download the "action.default.php.txt" attached to this post, rename it to  "action.default.php" and replace your current modules/Album/action.default.php with the one attached to this post.

[attachment deleted by admin]

[tonyg]

It was caused because I was just removing code like this from the page content:

\{cms_module module="album".*?\}

I've changed it to remove code like this:

{cms_module module=.*?\}

this should make the following stop showing up above the pictures:

{cms_module module='Album' albums='2' }

Hi Elijah,

Would that also be cause other CMS links to be displayed in the page? All of a sudden, my internal page links are also being printed instead of converted to links, so I suspect there is more to this than your code change. But it's only happened since I went to Album 0.51.

You can see what I mean at www.brisbanebikers.com/cms/ near the album thumbs at the bottom of the page.

Also, any idea what is causing the strange URLs (e.g. /cms/index.php/cms/index.php/photo_gallery/three_dams_ride_200/album-5/22/34)?

And I think I have found a new minor bug - one the last thumbnail page, the "Return to album index page" link is very small, almost unreadable. Not sure where that's generated from, but it might be getting two styles applied at that point?

Tony

[Dr.CSS]

this leads me to believe you put the tag in the page with out use the "source" button...
when i put a tag in a page in the Content » Pages » Edit Page:  i always clik the"Source" button and paste/type the tag in that window... some times i'll open the source again just to make sure it's not being formatted...

[tonyg]

this leads me to believe you put the tag in the page with out use the "source" button...
when i put a tag in a page in the Content » Pages » Edit Page:  i always clik the"Source" button and paste/type the tag in that window... some times i'll open the source again just to make sure it's not being formatted...

Hi Mark,

The CMS tags are not being formatted. They do not display, for example, in the home page when you first load it. Only when you click on a photo gallery (Album mod) link. If you go to http://www.brisbanebikers.com and click on one of the thumbs at the bottom of the home page, you will see what I mean. It's got to be something in Album code that's causing it.

Tony

[tonyg]

Hi again,

I think I see the problem. In action.default.php on Line 29, Elijah uses

Code: Select all

preg_replace('/\{cms_module module=.*?\}/'

to parse the cms module tag, which is fine. But he does not look for or parse any other CMS tags in the page. So if a page with a CMS album tag also has a CMS selflink tag, that tag is not parsed and is then printed to the page as text by Album. It would be a bit limiting if we cannot use other CMS tags on album pages.

Actually, I believe you are trying too hard in some ways, Elijah. I don't know about other people, but I don't really need image paging or integrated photo display. I am happy just to display thumbnails and have a self-configuring stripped popup window display the full photo.

Also, I suspect the crazy URLs I am seeing are caused by Line 14 where Elijah uses

Code: Select all

$page_alias = substr(substr($_SERVER['REQUEST_URI'], 1), 0, strlen($_SERVER['REQUEST_URI']) - 2);

I think it's picking up too much of the string (i.e, it is replicating "/cms/index.php" when it doesn't need to.

Thoughts?

Tony

[Dr.CSS]

have you checked my sight for alternate galleries... like this...
http://www.multiintech.com/index.php?pa ... orbit_pics

[Elijah Lofgren]

Would that also be cause other CMS links to be displayed in the page? All of a sudden, my internal page links are also being printed instead of converted to links, so I suspect there is more to this than your code change. But it's only happened since I went to Album 0.51.

It seems like every feature I add to Album, creates another bug. That's the way it goes I guess. 

This problem is craeated by the feature which makes Album display the page content of the page it's being called from. It works fine for normal pages that only have the smarty tag to call Album. Would you like me to just make displaying the page content of the calling page above the pictues an option that can be turned on or off?

I've filed a bug about this: http://dev.cmsmadesimple.org/tracker/in ... 7&atid=725

Also, any idea what is causing the strange URLs (e.g. /cms/index.php/cms/index.php/photo_gallery/three_dams_ride_200/album-5/22/34)?

That's a bug caused by the "improved" pretty URLs for Album, I think the're causing more trouble than they are worth, I'll probably remove them.... I think functionality is much more important than "pretty URLs" most normal people don't look at the URL anyway..

I've filed a bug about this: http://dev.cmsmadesimple.org/tracker/in ... 7&atid=725

I'll hopefully get around to fixing these 2 bugs someday soonish.

And I think I have found a new minor bug - one the last thumbnail page, the "Return to album index page" link is very small, almost unreadable. Not sure where that's generated from, but it might be getting two styles applied at that point?

Check in album template, I'm not sure about this one.

Goodnight,

Elijah

[Elijah Lofgren]

have you checked my sight for alternate galleries... like this...
http://www.multiintech.com/index.php?pa ... orbit_pics

That's really cool. 
Reminds me of the Thickbox template for Album that Russ submitted.

[Dr.CSS]

yea it's the new lightbox with the UDT you worked up...

[tonyg]

have you checked my sight for alternate galleries... like this...
http://www.multiintech.com/index.php?pa ... orbit_pics

Hey Mark, that's pretty cute. Does it comes with a CMSMS module installer?

Is it a template or a module? Either way, where can I download it?

Tony

[Russ]

I think the idea for Thickbox came from Lightbox. For Album I initially used Lightbox, but had a few issues cross browser and using other Javascripts and some accessibility issues. It also seems quite big and seemed to be a little slow compared to Thickbox? This coupled with the fact that Thickbox doesn't only have to be used for pictures made Thickbox a better choice in my view.

I'm all in favour of Ajaxy type stuff, if it merely augments the web site not overwhelms it. A web site has gotta work without all this Ajaxy stuff!
"Web standards and accessibility..." is the mantra web developers should repeat to themselves every morning... after coffee of course

There is a possible fix for the problem with Thickbox and IE selects boxes showing through, I'm going to have a play today (probably Monday though)  if I get time. I also need to look at the Opera problem with the new Opera 9 - here's hoping...

I'm also going to get the new version Elijah been working so hard on - well done Elijah ! (See, you go away for a few weeks and CMS has evolved again!)

Russ
P.S. Sorry I've not been posting much. I've been away, but I'm back for a bit come Monday (2006/06/26)...

[Dr.CSS]

it's a UDT... and i just figured out how to add a caption to the thumbs... i don't know anything about no Ajax thingy i just put a tag on page like so {gallery} with the code below in it... PS. i forgot to include the images they are now in the zip file

global $gCms;
$dir = $gCms->config['root_path'] . DIRECTORY_SEPARATOR .'uploads/images/sesame1/';
$url = './uploads/images/sesame1/';
echo '';
// Open a known directory, and proceed to read its contents
if (is_dir($dir)) {
        if ($dh = opendir($dir)) {
                while (($file = readdir($dh)) !== false) {
                    if ('file' == filetype($dir . $file)) {
$thumb0_pos = strpos($file, 'thumb_');
$thumb1_pos = strpos($file, '_thumb');
$pos = strpos($file, '.');
$extension = substr($file, $pos);
if ($thumb0_pos === false && '.jpg' == $extension && $thumb1_pos === false) {
// Note our use of ===.  Simply == would not work as expected
// because the position of 'a' was the 0th (first) character.
if ($pos === false) {
//  echo "The string '$findme' was not found in the string '$mystring'";
} else {
$name = substr($file, 0, $pos);
echo '
'.$name.''."\n";
}
}
                     
                    }
      }
      closedir($dh);
  }
}
echo '';

put this in a CSS sheet called litebox attached to the template...

.thumb {
margin: 1em 1em 1.6em 0; /* Space between images */
padding: 0;
float: left;
text-decoration: none;
line-height: normal;
text-align: left;
}

.thumb img, .thumb a img, .thumb a:link img{ /* Set link formatting*/
width: 100px; /* Image width*/
eight: 100px; /* Image height*/
display: inline;
padding: 12px; /* Image padding to form photo frame */
/* You can set the above to 0px = no frame - but no hover indication! Adjust other widths ot text!*/
margin: 0;
background-color: white; /*Background of photo */
border-top: 1px solid #eee; /* Borders of photo frame */
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
border-left: 1px solid #eee;
text-decoration: none;
}

.thumb a:visited img {
background-color: #eee; /*Background of photo on hover - sort of a light grey */
}

.thumb a:hover img {
background-color: #dae6e4; /*Background of photo on hover - sort of light blue/green */
}

.thumbPicCaption {
text-align: center;
font-size: smaller;
margin: 0 1px 0 0;
padding: 0;
width: 124px; /* Image width plus 2 x padding for image (photo frame) - to center text on image */
/* display: none;  if you do not want to display this text */
}

#lightbox{
position: absolute;
top: 40px;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{
padding:0 10px;
}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

* html>body .clearfix {
display: inline-block;
width: 100%;
}

* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}

How to Use:
Part 1 - Setup

  1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

slap this in the (note your path may vary)

     
     
     

  2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

skipped this as i already have a CSS for it

     

  3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

      image #1

      Optional: Use the title attribute if you want to show a caption.

  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

      image #1
      image #2
      image #3

      No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

doing it this [vac] way allows you to go to the next img. while it's still in the lightbox if you roll your mouse to the edges of the img. you will see next/previous buttons

attached is the JS, remove the .txt and it's a zip file

[attachment deleted by admin]

[tonyg]

That's very clever, Mark, but I think well beyond my old school web developer comprehension. I have not yet caught up with a lot of the stuff you are working with, especially Ajax. Have to find time to update my skillset!!!! I could bumble through it using the code you provided, but if it worked it would be more by good fortune than good work on my part. I'm an old ASP hacker still struggling to fully understand PHP and Javascript.

But thanks anyway.

Tony

[Elijah Lofgren]

Also, any idea what is causing the strange URLs (e.g. /cms/index.php/cms/index.php/photo_gallery/three_dams_ride_200/album-5/22/34)?

Should be fixed in the latest SVN version of Album: http://viewsvn.cmsmadesimple.org/viewsv ... m&view=rev

I removed all that "hackish" code that was getting the page_alias out of the URL and replaced it with a database query to get the 'hierarchy_path' of the page calling Album

Please test and see if the URLs are fixed by downloading "action.default.php" from here http://viewsvn.cmsmadesimple.org/viewsv ... iew=markup

Thanks,

Elijah