Home› General support

HTML Framing Album and Image Page

pxwee5 Member
in General support
Hi guys, I'm trying to do something like dpreview's gallery.

I've tested various methods to include the album at the top 10% of the screen along with it's first image at the bottom for viewing ... and I failed miserably.

Is there anyway to do it?

Comments

  • acrylian Administrator, Developer
    I don't know what dpreview's gallery is. Have a link?
  • pxwee5 Member
    http://www.dpreview.com/gallery/canona700_samples/
    There you go ..

    It's a combination of album page(first frame) and the image page (bottom frame) to create a page that saves bandwidth because the upper(album) is not reloaded whenever there's a change to the picture.
  • acrylian Administrator, Developer
    I see but that setup on that page is a very outdated and oldschool using frames. It does not really save bandwidht because it loads the page in the frame below new. Do a google search why frames are out..:-)

    Of course you can do that if you need to. In that case I would recommend to use an iFrame to call the image.php page (not elegant but better than real frames). Put the normal album.php page in one frame and call the image.php page in the other. But that will not work out of the box you will have some work to do.

    There are more elegant solutions using Javascript out there for example. There was a third party theme called "Gallery" that uses the jQuery script jCarousel for a similar thing. Try a forum search as that is not on our themes page currently.

    Also you could call the thumbs directly on the image.php page by moving the next_image loop to image.php. Take a look at the theming tutorial or the theme files itself. Or use the paged_thumbs_plugin as the Zenpage-default theme does optionally). These both do not load anything separatly but it is not really that much bandwidth because both the browser and the server already do some caching.
  • pxwee5 Member
    Okay ... I throw the Album.php code I written into the image.php and it works now ...
    Looks pretty ... Just like what I wanted ...

    Here comes the permalink question.

    I will be using the main page (myurl.com/gallery, as the permalink), the index ...
    But I don't need the album.php because it doesn't load individual pictures

    I need the image.php because it loads both the thumbnails and the individual pictures.
    So how do I make the image.php (that contains images from "camera" album) to have url that looks like
    myurl.com/gallery/camera ??
  • pxwee5 Member
    LOL Things went terribly wrong when I tried to add more pictures into the post ...
    Here's the link to the picture ...
    http://ahwee.com/images/help.jpg
    In the picture I set the album navigation width to 150%. That's why there's the scroll thing ... But if I don't set it to 150, the thumbnails will go downwards thus making the album navigation increase in height.

    A way to preserve the height at 70px is to limit the number of thumbnails per page, but that introduces another problem which is

    1. The 1, 2, 3 navigation page for the album forces the page back to the album.php (which the functions from the image.php does not work.

    I'm only good with HTML CSS and a little bit of programming logic ...
    PHP and javascript is really something quite alien to me ...

    Anybody can help me out with a solution to the problem?
  • acrylian Administrator, Developer
    The modrewrite url of an image is always `www.yourdomain.com/gallery//.suffix`

    The 1,2,2 album page navigation does not work on image.php. Try the paged_thumbs_nav plugin. (Take a look at the zenpage -default theme demo on http://zenpage-demo.maltem.de that uses it).

    To skip the album.php page you need to do some more work. Please try a forum search for that.
  • pxwee5 Member
    Hi I'm back again.

    I read some code of the plugin and I found out that instead of using the actual function to create the thumbnails, printImageThumb(). It's actually printing it from getCustomImage().

    The difference between these 2 functions is that printImageThumb prints a clearer (not stretched) thumbnail by cropping some parts. While getCustomImage only creates a different Height and Width for the same picture, resulting in a very stretched/compressed image. eg 16:9 ratio image will look ugly in a compressed 1:1 thumbnail.

    Is there a way to let the plugin use printImageThumb instead ?

    I tried

    `
    echo "imageprintImageThumb(getTitle())."'
    alt=\"".strip_tags($image->getTitle())."\" width='".$width."' height='".$height."' />";
    `
    but it returned

    `Fatal error: Call to undefined method Image::printImageThumb() in C:\xampp\htdocs\gallery\zp-core\plugins\paged_thumbs_nav.php on line 158`

    Some help here ?
  • acrylian Administrator, Developer
    Please try the zenphoto nightly/svn, there have been some corrections that were needed because of some image processor changes.

    The class method `getCustomImage` actually also crops images if you set width and height. It does not if you only set size.
  • pxwee5 Member
    Thanks acrylian ...
    It's currently working now (the image page), to my liking.

    Will ask more questions when I face any.

    1 last question though (abit off topic). Is it wise to have a subdomain to host the pictures (gallery.myurl.com) or is it wiser to make it like (myurl.com/gallery) ?
  • acrylian Administrator, Developer
    Zenphoto runs fine with a subdomain (like on the Zenpage site).
  • pxwee5 Member
    The Image size feature has a BUG with the earliest Nightly Builds (I think).

    Case 1: I set Image Size : 800 px for the longest side
    I get a 1422 width x 800 height picture cached in Zenphoto. But the image displayed is browser scaled down to 800 width x 450 height.

    Case 2: I set Image Size : 800 px for width
    I get a 1422 width x 800 height picture cached in Zenphoto. But the image displayed is browser scaled down to 800 width x 450 height.

    Case 3: I set Image Size : 800 px for Height
    I get a 1422 width x 800 height picture cached in Zenphoto. But the image displayed is not browser scaled, but the original cached Image size (1422W x 800H). Which I think is the correct way to do it.

    It looks like the function sets the image to be displayed correctly but resized the cached picture wrongly. Instead of width/longest side, it actually mistaken for height and shorter side.

    So there are some bug when setting image width and longest side.

    Do you mind to confirm this with me arcylian?

    The nightly build name is zenphoto-2008-12-10-trunk
  • acrylian Administrator, Developer
    Case 1: No, that is correctly. For a landscape image the width is the longest side so that is scaled to 800px width.

    Case 2: Hm, it should actually be cached as 800px wide... What function exactly did you use? And to be sure to clear alsways the cache.

    Case 3: That is correctly also if you set upscale to false. If you set a higher value than you image has it will not be processed.

    If you woulp set both values you will get an image cropped to width x height with the `get/printCustomImage()` functions.

    If you want to have an uncropped image you need to use the `maxspace` family of template-functions.

    We or more exactly sbillard did some work on the image processing recently to get out hte bug the maxspace function had in 1.2.2. I hope not another unexpected side effect...
  • pxwee5 Member
    `Case 1: No, that is correctly. For a landscape image the width is the longest side so that is scaled to 800px width.`
    Yes, that's correct. But if you take a look at the cached image. It's actually 1422`W` x 800 `H`. By right I should get a 800W x 450H image cached right? Instead of a huge 1422W x 800H.

    Well I'm not doing my own functions or anything, I'm just setting the values to see the image processed in the image.php.
  • acrylian Administrator, Developer
    Ah, sorry, right, I missread that and probably too fast inbetween... Indeed that would not be correct. Although I can't reproduce it with the latest nightly and the default theme. I have set the default value 595px and longest side set. It displays correctly. Also setting width or height in the options work correctly.

    DId you try this with different images?
  • pxwee5 Member
    I've tested in both my theme and the default theme and both in xampp and my online subdomain. With more than 5 images already.

    This is what I do.
    I set the image to be displayed with 800px for the longest side

    I've uploaded an image of 1920W x 1080H.

    Here's what I got - 1422W x 800H (scaled to 800W x 450H).

    I downloaded the latest nightly build from here. The first one. http://www.zenphoto.org/files/nightly/

    I suppose I am doing it right ... ?
  • acrylian Administrator, Developer
    You did everything correctly. I did again a test and indeed I can reproduce it now. Well seems we sadly got a new bug here. Thanks for finding and insisting on it.
  • pxwee5 Member
    Just to add on to it... There's also something wrong (I think) with the time.

    `
    Strict Standards: strtotime() [function.strtotime]: It is not safe to rely on the system's timezone settings. Please use the date.timezone setting, the TZ environment variable or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Kuala_Lumpur' for 'MYT/8.0/no DST' instead in /home/MYURL/public_html/blog/zp-core/template-functions.php on line 820

    Strict Standards: strftime() [function.strftime]: It is not safe to rely on the system's timezone settings. Please use the date.timezone setting, the TZ environment variable or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Kuala_Lumpur' for 'MYT/8.0/no DST' instead in /home/MYURL/public_html/blog/zp-core/functions.php on line 267
    December 12, 2008 16:24
    `
    I have no idea what is wrong. This is the one that comes out from the nightly builds with default theme and I did not edit anything.

    Doesn't seems to have this problem on the stable version 1.2.2 though.
  • acrylian Administrator, Developer
    We know: http://www.zenphoto.org/support/topic.php?id=4482#post-26506
    It disappeared for me with svn3052.
  • pxwee5 Member
    Acrylian, I really thank you for helping me out with so many problems solved.
    Anyways, about the bug, do let us know when it's fixed.

    Erm 1 more thing. How does the modrewrite works ?

    I'm doing it under a subdomain. The subdomain works with both gallery.myurl.com or myurl.com/gallery because they share the same folder.

    This is the example i got from the xampp.
    `
    #### !!! Change this to the web path (eg: http://www.yourwebsite.com/photos --> /photos) !!!
    RewriteBase /zenphoto
    ####
    `
    I've tried

    `RewriteBase /gallery`

    But it doesn't work as well. My htaccess file is in the gallery folder. Does it automatically changes the ?album=etc to /etc/ ? Or I have to do some writing?
  • acrylian Administrator, Developer
    My subdomain is setup with `/` which of course needs to be the folder where your Zenphoto is. If it is in a folder it runs also directly in the root btw.

    But my main domain does not link there, too, and I actually never tried that. I guess I can't answer that currently.
  • sbillard Member
    Sorry, zenphoto can only occupy one place at a time. It depends on the WEBROOT for its addressing. You can have it run from your subdomain or from your main domain, but not both because the rewrite base will be set for either one or the other.
  • pxwee5 Member
    Oh~ I didn't know I have to first check it in the Admin Options to enable mod rewrite.

    I noticed that the modrewrite changes
    `http://gallery.myurl.com/index.php?album=ETC&image=PB120009.JPG`
    INTO
    `http://gallery.myurl.com/ETC/PB120009.JPG`

    Is there anyway to discard image name? And only put the album name.

    Make it something like
    `http://gallery.myurl.com/ETC/`
Sign In or Register to comment.