Imageflow

[Ruud]

Sorry for switching to English. My German writing is BAD.

I added some simple logic to actually read the folder given in the backend.

NOTE: It is still not ready, dut a bit more functional than v0.1.
NOTE2: Make sure that register_frontend_m odfiles is included in your template.

The module creates cached images (with the reflection) in the same folder.
The only way to clear that cache is to use FTP and remove the "refl_***" files. (if you have the rights to do so).

I will add this in the next version.


Try it on your own risk 

Ruud

[vyni]

Hi RuudE,
I gave them a try.
Looks great at all. But there are some main things I mentioned before still to report.
1. In IE7 it is still missplaced (in FF2.16 also - but this wasn´t before) or does it need position declared in the parent-div? (I havn´t tried now - will do next)
2. The created pics  are 50% bigger (in height) than the originals - of course due to the reflection. This is done with full quality. Perfect. - But not perfect is the size of the file. It is more than 200% than the original. (48kb are 110kb in reflection) My pic is around 620 x 500 - Imageshow displays a "thumb" with 170 x 200 but it loads the full size. The reflection should be created for the thumb only - because it´s used there only. - In my dir are about 20 pics, and the loading takes naturally much too long.
3. On click it shows up in a simple window (displaying the original) - maybe You can present it by a size-fitting, centered popup?

  And beware - if I find something else - You will find it here! 

Best regards from Himberg
Vyni

Further more: I tried it out with an other template - which has position defined. That´s it. If someone has troubles with the position of the thumbs - put the posiition-attribute to the content-div.
Annother thing I found: In WB2.6 there is a line under the thumbs and a "ball" sliding with the thumbs. This ball starts in the middle of this line and goes too far out to the right. - In WB2.7 this line is there, but not the ball. - Please could You remove this line at all? It disturbes the thumbs. Displaying the filename - naja. Maybe as option.
But 1 thing, please: let it remember which was the last displayed pic.

[BerndJM]

Hi vyni,

ich glaube bei einigen deiner Anmerkungen bist du bei RuudE vieleicht an der falschen Adresse?
Er hat ja "nur" an der Einbindung als Modul gearbeitet, aber etliche der von dir angemerkten Sachen kommen ja von der Originalsoftware.
Wobei du natürlich mit deinen Anmerkungen absolut recht hast, die Ladezeiten sind unnötigerweise ätzend und das öffnen im gleichen Fenster ist auch etwas unglücklich. Vielleicht könnte man da den Originalautor bischen "anschubsen":

I think RuudE is not the correct adress for your remarks, he only worked at the functionality as a wb-modul, and you remarks are related to the original software.
Nevertheless your remarks are correct, the preload time is much to long and opening the pictures in the same window is not so nice. Maybe one should contact the orignals autor for this things.

Grüßle Bernd

[vyni]

Hi, da bin i wieder.

Ich bin ja kein Programmierer oder sowas, nur ein Anwender.

Hast ja recht - hätt´ja sein können, dass er im code werkelt. - Bis auf die Ladezeiten hab´ ich eigentlich alles in den Griff bekommen in der Zwischenzeit. Mit dem Frontend.css kann man´s richten wie man will.

Na und beim googlen hab´ ich doch das da gefunden.
Und wenn i jetzt noch genug englisch könnt´ könnt´ i wahrscheinlich das auch noch machen.
highslide check this!

Ich hab´s jetzt local auf xampp laufen (leider noch ohne dem highslide) - und da sind die Bilder kaum größer als die originalen. Hat bestimmt was mit dem komprimier-Faktor zu tun. Serverseitig mein ich.

Let me try to translate it too: You are right - but maybe RuudE is doing something with the code and by the way he could have a look if this things could be fixed easyly. Except this horrible loading-time I could adjust everything by editing the frontend.css. Great.

and open in a popup-window: I think it MUST BE highslide instead!!

I installed it local on xampp and there are thie createdt pic almost the same size than the orig. Maybe a Server-thing of compression.

regards from Himberg

[Ruud]

Here I am again introducing v0.3. (In English again)

Some additions to the previous version:

- added resizing thumbnails
- added HighSlide popup (using a modified version found here)
- added parameter for height of reflection (in pixel or percentage)
- added parameter for Background color to fade into, default = #000000
- added parameter to force jpeg output including quality setting (less quality = smaller thumbs)
- added manual (and automatic) deletion of cached thumbnails
- improved css loading for the sliding ball

Note: The first time the page is loaded, the thumbnails are created. This will take longer.

I found that positioning does not work well when the template uses tables (i.e. the Round template).
I'm not sure why, but I still wanted to share the work until now.

Let me have the comments 

Ruud

Ps. Maybe someone can translate this post to German?

ps2: Started a thread on this module in the English section too. Please join me over there.
http://www.websitebaker2.org/forum/index.php/topic,10460.msg61622.html#msg61622

Download removed, newer version below

[vyni]

Translation into german!
Übersetzung des posts von RuudE, frei nach Verständnis.

So da bin i wieda  ich stelle v0.3 vor (wieder englisch)

Einige Änderungen gegenüber der vorigen Version:

- Änderung der Thumbnail-Größe
- Highslide Popup hinzugefügt (angepasste version die man hier findet .... )
- Paramenter für die Höhe der Reflektion hinzugefügt (Pixel oder Prozentangabe)
- Paramenter für die Hintergrundfarbe (in die der Verlauf erfolgt) hinzugefügt, voreingestellt schwarz
- Parameter für Ausgabe-Kompression der jpeg hinzugefügt (weniger Qualität - kleinere Vorschaubilder)
- manuelle (und automatische) Löschung der zwischengespeichert en Vorschaubilder
- überarbeitetes css für den Schieberegler

Bemerkung: Beim ersten Aufruf der Seite müssen die Vorschaubilder generiert werden, deshalb dauert das einige Zeit.

Die Positionierung funktioniert nicht besonders, wenn das Template Tabellen verwendet (z.B: Round).
Ich weiß zwar nicht warum, aber ich möchte trotzdem das Ergebnis bis jetzt mit Euch teilen.

Sagt mir Eure Meinung

Ruud

Ps. -  ................... ..............hab´ich gerade getan

########################################################

  RuudE - I´m going to love You!

regards from Himberg

PS : Da hab´ ich die passende Sprachdatei. einfach in den entsprechenden Ordner kopieren wie im zip.

[Ruud]

version 0.31

Bugfixed:
- the backcolor parameter had a typo. Due to this it always faded to black.
- small error in the language files.
- added the German language file (thanks to Vyni)

Ruud

Download removed, newer version below

[Stefek]

Hallo Rudee,
großartig, dass Du es aufgreifst und ein Modul davon fertigstellst.

Es wäre vielleicht eine gute Idee, wenn man den ursprünglichen Entwickler davon wissen lässt, sodass er einen Blogeintrag in seinem Blog macht?
Ein wenig Promo für WB.
Here the Blog


ENGLISH--------------------

Hallo Rudee,
it's great you picked this up and made a workable Modul out of it.

Maybe it was a good Idea to let the original devoloper know about it, and he will make a Blog-Entry on his Blog?
Some "Promo" for websitebaker.
Here the Blog


Best Regards,
Stefek

[Ruud]

Version 0.32

Just a small fix that should correct some (not all) positioning problems.

Ruud

Newer version below

[Ruud]

Maybe it was a good Idea to let the original devoloper know about it, and he will make a Blog-Entry on his Blog?
Some "Promo" for websitebaker.

I agree on that, but before that it would be nice if we have it fully debugged (still too many CSS problems), and we have some showcases available.

Ruud

[Stefek]

Du hast Recht.
Gutes Argument Ruud.

Best,
Stefek

[vyni]

Hi together,

I installed it and found it satisfying. Just set and go! Very very nice. - Good idea - stefek - but because of the licence maybe a little bit complicated? It isn´t free to all.

How about a whishlist, RuudE.
I really don´t  have a glue hoe complicated or easy:
What about an option wether thumbs will be created or not.
What about to have an option to which color it fades and a different color for the background.
How about an option for separate background-colors or background transparent?
What about annother surrounding div with an option to display a background-picture?
At least what about of different pre-defined displaying-configurations for the highslide script?

Here You could have a look of what I´m talking about. Check this

Just a couple of ideas - if You are planning to present it to the blog it shouldn´t be just "hey - me too..." - it must be awesome.
Bescause this two scripts are so awesome for itself, but "Johnny User" will have no idea how to use it in a proper way, this would be great and maybe a reason "talk about WB".

Regards from Himberg.

PS: But beware - there will come a lot of "vyni´s" after that and bordering You with this or that.

Und das ganze in deutsch:

2 oder 3 Fragen ob´s denn möglich wär´, 2 oder 3 Sacherln dazumachen. Und wegen dem blog hab´ i a mein senf dazuageb´n.

PS: .....und dann kommen a ganze Menge "vyni´s" nach und sekkieren wegen dem oder dem.....

[Ruud]

Version 0.4

- added extra positioning div, including resize possibilities.
  (This seems to fix all positioning problems. (also in tables))
- added option to disable filename caption and/or slider
- added option to select Highslide border style.
- fixed problem with filenames with whitespace or special characters
- fixed positioning of the slider
- added option to NOT cache thumbnails

Ruud

[aldus]

At first of all: nice Work Ruudi - real.

But imho the big problem started here:

Code:

<?php echo WB_URL; ?>/modules/imageflow/reflect.php?img=<?php echo urlencode($picdir.'/'.$img).$params ?>"

Once you have f.ex. 20 Images then the generated HTML-file will call 20 times the php-function;
this is a time-leak at worste.
Imho then the modul is called by WB the images must be ready at all so you can place a
more or less smaler link there. Iow: the browser of the client didn't call 20 times a script - it's calling
for the images.

Add.: what about building a class instead of a script?

Also inside the "save.php": please use "file_name" instead of "file_size" - you are not delete the "size"

Code:

if ($picdir) {
    $list = glob(WB_PATH.MEDIA_DIRECTORY.$picdir.'/refl_*');
    if ($list) foreach ($list as $file_name) if (strrchr($file_name,'.')!='.') unlink($file_name);
    $admin->print_success('Cached files removed', ADMIN_URL.'/pages/modify.php?page_id='.$page_id);
}

And inside "modify.php" you can combine the two <?php ... ?> sections to one:

Code:

<?php echo $MOD_IMAGEFLOW['CURRENT_BORDER'].$settings['high_border']; ?>

and you can use a temp_variable instead of calling one function two times
a little bit more readable and [micro]-time saving

Code:

$temp_name = str_replace(WB_PATH.MEDIA_DIRECTORY,'',$foldername);
echo "<option value='".$temp_name."'>".$temp_name."</option>\n";

And at last a little typo in the "info.php" - missing dot at the end of the modul-description

Code:

.. and the HighSlide popups.

Regards
Aldus

[Ruud]

The reflect.php method is the original script. Not part of the module. I will not change anything in that.
The big "trick" of this gallery is to manipulate (add the reflection to the bottom) the original image.

However, reflect.php creates thumbnail files (same filename with a prefix created by hashing). It will use the thumbnails the next time the page loads. When a setting is changed (saved) in the admin section, the thumbnails will be removed and created again the next time you load the page in the frontend.
The thumbnails can be made small (my own modification of the reflect.php script), depending on the size and quality you select.

The time difference between calling a static image or a php-page serving a cached file is next to nothing.

Ruud

[Ruud]

Also inside the "save.php": please use "file_name" instead of "file_size" - you are not delete the "size"

Code:

if ($picdir) {
    $list = glob(WB_PATH.MEDIA_DIRECTORY.$picdir.'/refl_*');
    if ($list) foreach ($list as $file_name) if (strrchr($file_name,'.')!='.') unlink($file_name);
    $admin->print_success('Cached files removed', ADMIN_URL.'/pages/modify.php?page_id='.$page_id);
}

Must have copy-pasted that from somwhere.
Doesn't hurt, it's just a variable name, but I will change it in the next version.

Ruud

[Ruud]

And inside "modify.php" you can combine the two <?php ... ?> sections to one:

Code:

<?php echo $MOD_IMAGEFLOW['CURRENT_BORDER'].$settings['high_border']; ?>

and you can use a temp_variable instead of calling one function two times
a little bit more readable and [micro]-time saving

Code:

$temp_name = str_replace(WB_PATH.MEDIA_DIRECTORY,'',$foldername);
echo "<option value='".$temp_name."'>".$temp_name."</option>\n";

I'll wait some time before I look up all the cosmethic improvements.
Your edits are created faster than I can respond. 

But, you're right. Some things could be better.
I started programming PHP just a few months ago (25yrs programming M$ background). It will improve, I promise.

Ruud

[aldus]

The time difference between calling a static image or a php-page serving a cached file is next to nothing.
Ruud

Hm local yes - but on "real-server-side" hm no; as i plan to use the transparent background png's
it's still heavy - but that's also my own.

first studie run:
http://www.drp-x-work.de/spielwiese/websitebaker270/wb/pages/gallerie_1.php

add:in the backend some missing informations; see the attachment. [ ff 3.0.1, 2008070206 , MacOs 10.5.4 MBP 2.4 ]


Regards
Aldus

[aldus]

Hello Ruud
next round:

file: modify.php

- imho its a more or less good idea to modify the thumbnail_quality to a selection to get rid of
user typos like " 8 0 p x" instead of "80". A stepsize of 10 should be ok. As a minimum
i would say 40 is "bad" enought.

- to get rid of the third < td > for additional informations for the
inserts i would prefert a new css-style f.ex. ".info" inside the "backend.css".

- instead of hard-coding the "styles" inside the php-file i would prefer to use css-classes instead.

- There is no gallery-name or title to edit.

- There are some inconsistences between the field-names and the submited values:
f.ex. "tquality" -> "thumbnail_quality".
Ok - this isn't a bug at all - but it makes debugging harder than it must be ...
"MySql-field-Names" === "form-field-names" makes it mutch easyer.

- instead of stay on the screen i would prefer to go to the "pages"-side ("pages/index.php") when i've save my settings.
But that's also my own ...

file: save.php

- there is no value-validation inside "save.php".
- some minor cosmetic changes to get rid of the kryptic temp-valuenames and [micro-]timeleaks;


Additional zip with the modified files:
- backend.css
- modify.php
- save.php

Add:
- file: info.php
    $module_version = '0.3'; -> should be 0.4 instead of 0.3

- file: save.php
     as you/we are using 'glob' where should be a mark/info that
     this comes up with PHP>=4.3.0 - so less versions of PHP are not supported by this modul.
   
 - file: reflect.php
     line: 95
     

Code:

    $cache_file = 'refl_' . md5($_SERVER['REQUEST_URI']) . '_' . $cache_base;
   

   
    Hm ... this could be problematic if you are using more than one gallery on your site.
    Even if you've got two or three test-pages - every page generates another "refl_"-id,
    so the images are produce two/three times ...
    So, using the server_name instead should fix the problem like:
   

Code:

    $cache_file = 'refl_' . md5($_SERVER['SERVER_NAME']) . '_' . $cache_base;
   

   
Add2: Next problem found. If you use more sections on your gallery-page, f.ex. both
with the imageflow-modul, only the first one is working. However - this must be solved:
if the page got one image-flow-section you can't add a second one to get rid of un-useble results.

Regards
Aldus

[Ruud]

Hi Aldus,

You have been busy

modify.php and save.php: thanks for the polish up. It looks good. (I learned some stuff today)
I only reverted the go-to-index-after-save. Especially with the thumbnail /color settings I like to stay on the page. My pages/index is getting big and takes ages to load. As you said: Thats personal. (i kept your line, just un-remark)

About the cached-file-names:
I don't agree. If/when i would have two galleries on my site, I would assume this is because you want to show differently. (maybe different fade/background colors).
In that case hashing with the URI actually helps. You will need different thumbs.

About the multiple sections:
I modified my current version so the scripts are loaded only once, but it will not work. Looking at the designers website, he tells it is only possible in iframes. (meaning it is not possible)
Since the script is playing with fixed ID's, it will not work.

I am currently testing verion 0.5.
I added the lightbox2 script. Since the Highslide popups cannot be used (without paying) in commercial sites, this looked a nice extra option to me.

Ruud

PS. this is the German thread. Maybe it is better to do these long posts in the English thread.
I will keep reading this thread, but answering in German is no option for me 

[Ruud]

Here is version 0.5

 - Many cosmetic / code / debugging improvements (thnx to Aldus)
 - Added Lightbox script.
 - Added choice for Highslide / Lighbox2 / None(original) popups

Ruud

[vyni]

Fine, fine, fine!
Lightbox is a good thing. Great.

You know - there is still an invalid argument if there is only 1 pic in the folder?

....and the german language again. - Also a bit modified.

regards Vyni

[aldus]

ups - hab ich eigenlich schon danke gesagt? Hab ich nicht, muss ich
ergo hier mal nachholen:

Danke für die deutsche Übersetzung - vyni

Die 0.6-er steht schon vor der Tür

Gruß
Aldus

[frank76]

schönes script. gefällt mir gut.

[Ruud]

v0.6 is available.

Download from this (English) post: http://www.websitebaker2.org/forum/index.php/topic,10460.msg62079.html#msg62079

Ruud