[Pro] High volume image find/display ideas

Legacy Tutorials
21

You’ll need to alter the PHP code for that. This line:

  {{figure_title}} — Posted <time datetime="{{datetime}}">{{posted}}</time>

does everything for the link text. Edit it to be what you would prefer, and you’re all set.

If all you want is the name to appear, you would make this line only {{figure_title}}.

If you don’t want the list item structure around the links, you can do that two different ways. One would be to edit the PHP so it just makes a sentence rather than a list (the list has certain usability benefits, though, I wouldn’t recommend getting rid of it entirely. You could also use CSS to make it appear to be a sentence. In the li style you made, add one more attribute pair:

display: inline;

…and that will remove the return after each item. They will simply become one massive run-on sentence.

The file names are simple. You just rename the actual files on your server. Any underscores in the filename will be converted to spaces, you don’t want to use any spaces in a filename, naturally. So if your comic was called ‘A_meeting_in_the_dark,_in_the_park!.jpg’, it would appear in the list as ‘A meeting in the dark, in the park!’ Just remember to upload or rename these one at a time, slowly (so as to separate their modification dates from one another) in the reverse order that you want them to appear. The sort order is most recent = first.

Walter

On Mar 8, 2012, at 4:38 PM, Joe Vissichelli wrote:

I also need to alter the file names, maybe just using the numbers or a new name, but definitely getting the dates off the list. How would I change that?

Can the list also appear in paragraph form – in other words, just the numbers separated by spaces?

Sorry to work you here, but I hope it’ll help others as well.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

22

What confuses me is the last modification dates showing up in the list too, that weren’t part of the file name. Not sure how to get rid of those, since they’re part of the file info.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

23

What confuses me is the last modification dates showing up in the list too, that weren’t part of the file name.

It comes from this line of code

 {{figure_title}} — Posted <time datetime="{{datetime}}">{{posted}}</time>

So if you change it as Walter suggested earlier it wont appear.

D

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

24

Just re-read it and see what I didn’t get at first. Sorry – this is a lot for a clueless type such as myself.

Last question, if you will: This has certainly helped me resolve my problems in setting up the archive the way I want. I was also looking for a PHP-type slider for the home page and I now see that this is almost it.

I wanted to have one tabbed slider for each year’s collection with the strip numbers appearing below (as we’ve just done for the archive). If it’s possible, can you suggest the last two changes I’d need to get it there? Those would be to have the images slide into the frame, and besides the control by these links also controlling the slides with the arrows on my home page:

http://zakmakestracks.com/

For layout purposes and to show the action I want, I currently have the standard FW carousel there that requires a stack of images and wouldn’t work for the high volume I have in mind. And I have some dummy “links” below it for layout purposes, which I now know I can work out thanks to you gentlemen. Lastly there are the arrow controls, which work off the Carousel Button Action at the moment.

So what I’m asking is if I could use the basic setup we’ve just worked on, maybe call its image box a carousel, maybe add the carousel container action or another strip of code for the slide and arrow controls and voila! I’m done with my major web site roadblocks. Is this feasible without going nuts or starting over?

BTW, I know it may seem redundant to have both the archive and the carousel, but I plan to make the archive more of an advanced search feature and the home page just for straight viewing.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

25

You couldn’t switch from one comic to another with a Carousel effect, but what you could do to get part of this is to create a carousel pane for each year, and in that pane include the area to display the comics as well as the list of comics for that year. Then put all the comics for each year in a separate folder, so you would have

comics/
	1999/
		funny.jpg
	2000/
		hah.jpg
	2001/
		huh.jpg
	...

Put a copy of list.php in each of the year folders along with the comics.

In Freeway, you would need to modify your approach to the display area slightly. Instead of using the ID of the box as the hook, we need to use a classname attribute instead, since there will be multiple items on the same page with the same behavior, and IDs have to be unique on the page.

Click on your display element in each pane and choose Item / Extended from the main menu. Click New, then enter:

  • Name: class
  • Value: comic

and okay out of the stack of elements. If you do this on the first pane, then duplicate the entire nested pane to create the others, you will only need to go through this teetering stack of dialogs once.

Now, the JavaScript that you paste into Protaculous will become a little different to accommodate this different approach to “finding” the playback element:

First, you need a separate updater for each of the year list elements. Naming these boxes as I have done helps keep everything sorted out in your head. When you add another year, you would add another pane and another line in Protaculous to update the list area in that pane with the desired content. You would need to apply this ID using the Title field in the Item Inspector, and then whatever you enter would need to match the JavaScript that you paste into the Protaculous Action. Remember, IDs cannot begin with a number, so that’s why I used list_ as a prefix.

The rest of the changes make the connection between the list where the link was clicked and the correct playback area – you wouldn’t want to be updating a comic that was currently hidden by the Carousel effect, after all. All Carousel panes get the classname ‘section’ applied to them, so the function looks up the DOM tree for the first parent element with that class, then looks down within the section for the first element with the comic class. The result is that we don’t have to write a separate click handler for each pane – one will do for the entire page.

Walter

On Mar 8, 2012, at 7:35 PM, Joe wrote:

So what I’m asking is if I could use the basic setup we’ve just worked on, maybe call its image box a carousel, maybe add the carousel container action or another strip of code for the slide and arrow controls and voila! I’m done with my major web site roadblocks. Is this feasible without going nuts or starting over?

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

26

Walter & David,

Thanks so much for getting me out my morass. You guys have really been great and your generosity is appreciated. I was really stuck on these issues and now I’m finally seeing the end of the tunnel (Whew!).

As my now unstuck thoughts on setting up my advanced search options evolve with these newly understood possibilites, two (truly) final questions come to mind. Because I may want to do keyword searches with text links under different headings/categories that wouldn’t involve listing every image in a folder (just selected ones), is there a code to apply to each link in a column that would pull images out of the folder by using the links to the URLs? Alternately, maybe a code to apply to the column’s text box and then just link each line to the image URL?

This would be so I don’t have to repeatedly make new folders of images, one for each keyword. I’d rather just link to their central folder location and have them pop in the box when called with a click on this link and that.

Is there a name for a link that calls and image to a box on the same page? I still don’t know what to call such a thing.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

27

There’s two ways you could attack this. One would be to add a form handler to the PHP script, so that your search form would send a request to the PHP script in the folder of comics (which is acting a bit like a database here) and then have the matching results (rather than the entire list) appear in the list of links.

The other would be to have all of the results in the page already, and then filter them while the search field is being typed in. This sort of “live search” can be a compelling visual effect.

As far as the name for these sorts of live updates, they are commonly tagged with the neologism Ajax, which started as an acronym for Asynchronous JavaScript And XML. Over time, the definition has spread to also cover most forms of what used to be called DHTML or Dynamic HTML.

Walter

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

28

Option 1: Would a form handler be a standard script or Freeway feature/action?

I’m trying to envision option 2: By “all of the results” do you mean a list of the keywords?

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

29

It would be a modification of the PHP script I shared with you last week. That script at the moment just reads the directory it finds itself in, lists all the photos in the same folder, and outputs some HTML. It would need to be modified to accept a form input and return a modified form of the HTML (a limited subset of all the photos in the folder).

Walter

On Mar 10, 2012, at 11:27 AM, Joe Vissichelli wrote:

Option 1: Would a form handler be a standard script or Freeway feature/action?

I’m trying to envision option 2: By “all of the results” do you mean a list of the keywords?

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

30

A few puzzles:

I’m trying to test out having my list appear as a space-saving paragraph of file number links instead of in columns, but I’m not understanding where to insert the code (display: inline;) you suggested above. Can you give me a hint?

I’d also much prefer that my list begin with the first strips first (01, 02, 03…) rather than the most recent in the current default setup. I’ve re-saved them in order of creation. Now is there a way to change the sort order? I tried changing the “descending” to “ascending” to no avail.

The CSS Column Action is giving me odd spacing. The columns are wide apart regardless of my Column Gap settings, and I’ve selected 8 columns but the live page shows six. The first link on the list also insists on appearing one line lower than the rest. Any clues here?

I’m leaning toward the paragraph style list, but I want to see how the Column Action can look too.

Here’s the current incarnation:
http://zakmakestracks.com/test1.html

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

31

On Mar 11, 2012, at 9:28 PM, Joe wrote:

A few puzzles:

I’m trying to test out having my list appear as a space-saving paragraph of file number links instead of in columns, but I’m not understanding where to insert the code (display: inline;) you suggested above. Can you give me a hint?

In the Edit Styles dialog, after selecting the #item2 li style in the styles list. Use the Extended dialog to add that attribute, since it’s not exposed in the normal Freeway style tools.

I’d also much prefer that my list begin with the first strips first (01, 02, 03…) rather than the most recent in the current default setup. I’ve re-saved them in order of creation. Now is there a way to change the sort order? I tried changing the “descending” to “ascending” to no avail.

In the PHP, change rsort to sort. That gives you an ascending order by datetime uploaded to the server. If you want to sort by filename, then that’s a different bit of code. This example was abstracted from another example where the key was to present the files in uploaded order, most recent first.

The CSS Column Action is giving me odd spacing. The columns are wide apart regardless of my Column Gap settings, and I’ve selected 8 columns but the live page shows six. The first link on the list also insists on appearing one line lower than the rest. Any clues here?

I’m not sure why it’s using 6 of the 8 columns here, that does look odd. As far as the first link being dropped down like that, try adding padding: 0 to the ul style, replacing padding-left: 0. That should sort that part out.

I’m leaning toward the paragraph style list, but I want to see how the Column Action can look too.

Here’s the current incarnation:
http://zakmakestracks.com/test1.html

Looks very nice. When you get to adding the character, keyword, and topic stuff, I recommend you use Photoshop to add those to the IPTC metadata, and save the JPEGs out from Photoshop directly. That way we can extend the IPTC-reading code that Tim wrote and extract all that data without having to do a giant hack like make really long filenames with all the keywords in them.

Walter

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

32

On Mar 11, 2012, at 10:04 PM, Walter Lee Davis wrote:

In the PHP, change rsort to sort. That gives you an ascending order by datetime uploaded to the server. If you want to sort by filename, then that’s a different bit of code. This example was abstracted from another example where the key was to present the files in uploaded order, most recent first.

Actually, what I had there is arsort, change that to asort.

If you want to sort the photos by filename, then you would replace this whole bit of code:

foreach(scandir($dir) as $file){
  if(preg_match('/^[^.].+?.(jpe?g|png|gif)$/i', $file)){
    $timestamp = filemtime($dir . '/' . $file);
    $latest = ($timestamp > $latest) ? $timestamp : $latest;
    $files[] = $file;
    $times[] = $timestamp;
  }
}
$page_updated = date('F j, Y, g:i a', $latest);
$pubdate = date('Y-m-d H:iZ', $latest);
$latest = gmdate('Y-m-dTH:i:sZ',$latest);

//sort by date descending
arsort($times);
foreach($times as $k => $v){
  $photos[] = array($files[$k], $times[$k]);
}

with something more like this:

foreach(scandir($dir) as $file){
  if(preg_match('/^[^.].+?.(jpe?g|png|gif)$/i', $file)){
    $photos[] = $file;
  }
}

//sort by filename ascending
natcasesort($photos);

//build the current set of entries as an array of strings
foreach($photos as $photo){
  if($i < $limit){
    $link = $url . $photo;
    $item_title = readCaption($dir . '/' . $photo);
    if ($item_title === ""){
      $item_title = preg_replace('/_/', ' ', preg_replace('/.[a-zA-Z]{3,4}$/','',$photo));
    }
    $figure_title = $item_title;
    $figures[] = replace_vars($figure);
    $i++;
  }else{
    break;
  }
}

Note that this removes the modification date from the data extracted from the folder, but you weren’t using that anyway.

Walter

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

33

Whew – quick response! Thanks again. Will try to digest all this.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

34

I removed the column action, played with the padding and then, to stop being tied to perfectly sequential uploading of files, changed that chunk of php code as suggested. But thigns got messy:
http://zakmakestracks.com/test1.html

I’d still like to use that php change rather than just the arsort/rsort one.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

35

It looks like you got part of the changes, but not everything. If you’re sorting by filename, you don’t need to call filemtime any more.

Here’s an updated Gist that has all of the changes in one place.

Walter

On Mar 12, 2012, at 11:23 AM, Joe wrote:

I removed the column action, played with the padding and then, to stop being tied to perfectly sequential uploading of files, changed that chunk of php code as suggested. But thigns got messy:
http://zakmakestracks.com/test1.html

I’d still like to use that php change rather than just the arsort/rsort one.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

36

Can’t say it’s working right, but it’s less unhappy than it was: http://zakmakestracks.com/test1.html

To make sure I’m not messing it up, I’ll tell you that I copied the new code from my browser, pasted it into an html editor and saved the document as list.php, with which I replaced my existing list.php in my web site folder. Hope that’s kosher.

From: Walter Lee Davis email@hidden
To: email@hidden
Sent: Monday, March 12, 2012 11:33 AM
Subject: Re: [Pro] High volume image find/display ideas

It looks like you got part of the changes, but not everything. If you’re sorting by filename, you don’t need to call filemtime any more.

Here’s an updated Gist that has all of the changes in one place.

gist:2022679 · GitHub

Walter

On Mar 12, 2012, at 11:23 AM, Joe wrote:

I removed the column action, played with the padding and then, to stop being tied to perfectly sequential uploading of files, changed that chunk of php code as suggested. But thigns got messy:
http://zakmakestracks.com/test1.html

I’d still like to use that php change rather than just the arsort/rsort one.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

37

Can’t say it’s working right, but it’s less unhappy than it was: http://zakmakestracks.com/test1.html

To make sure I’m not messing it up, I’ll tell you that I copied the new code from my browser, pasted it into an html editor and saved the document as list.php, with which I replaced my existing list.php in my web site folder. Hope that’s kosher.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

38

Try this: visit this URL in a browser, then choose File / Save As… and name the result list.php from the Standard File dialog. I think you’re getting an encoding issue when you copy from the browser and paste into your text editor (particularly if your editor doesn’t default to UTF-8 (No BOM) encoding. There are some fancy Unicode characters in this script, and I’ll bet a small amount you aren’t getting them correctly.

Walter

On Mar 13, 2012, at 12:02 AM, Joe wrote:

Can’t say it’s working right, but it’s less unhappy than it was: http://zakmakestracks.com/test1.html

To make sure I’m not messing it up, I’ll tell you that I copied the new code from my browser, pasted it into an html editor and saved the document as list.php, with which I replaced my existing list.php in my web site folder. Hope that’s kosher.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

39

Not sure what URL you mean. Do you mean to just go back and download the code again at gist:2022679 · GitHub?

Sounds plausible. First I was using TextEdit, then I downloaded TextWrangler for the latest change. Who knows what evil lurks?

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

40

I re-downloaded the gistfile, renamed it list.php and replaced the old one with it. The list is now cleaned up:

http://zakmakestracks.com/test1.html

Now it’s a single vertical column 10 lines high, so I still need a change to get the “paragraph” look I want. I had addressed this once before with Tag-only styles > Extended > display: inline, but that seems to have no effect right now. Not sure what to to mess with right now.

I’m also wondering how to gain control of the side margins in the list box, which are always wider than I want regardless of padding settings. Padding is now 0 and still wide on the sides, though the top and bottom are fine.

Thanks to some web research, I’ve also set the preferences in TextWrangler and TextEdit to proper settings to avoid future screwups. Don’t need to add confusion.

tutorials mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options