[Pro] High volume image find/display ideas

I’m trying to figure out how to do what I think is a very basic thing in Freeway, but I don’t know what to call it or if there’s a built-in solution in Freeway Pro 5.6 or I need a script from somewhere.

I’m designing a comic strip archive page. I want to have a long list of text links (like 150+) on a page and when any one of them is clicked, it would show a specific image in a box at the top of the page. The rest of the page would stay the same. Each link clicked changes the image only not other page elements.

I prefer to use something that would get images from a web folder (not a database) perhaps a PHP script if it’s not built into FW?.

Any ideas what would do it, how to do it or at least what to call it so I can search for it somewhere? I’ve been stuck on this for a long time.


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

I posted a script last week that creates an RSS feed from a folder of photos. I’m thinking this could be modified to create your specific page, skipping the RSS part (or maybe not) and simply listing the folder as text links. You could then use Prototype’s Ajax.Updater to put the desired image into the preview area based on a click.

If I have some time later, I’ll see what I can do with it. If you’ve coded PHP before, it’s not a very large leap from the starting point I’ve made:

Walter

On Mar 7, 2012, at 12:28 PM, Joe wrote:

I’m trying to figure out how to do what I think is a very basic thing in Freeway, but I don’t know what to call it or if there’s a built-in solution in Freeway Pro 5.6 or I need a script from somewhere.

I’m designing a comic strip archive page. I want to have a long list of text links (like 150+) on a page and when any one of them is clicked, it would show a specific image in a box at the top of the page. The rest of the page would stay the same. Each link clicked changes the image only not other page elements.

I prefer to use something that would get images from a web folder (not a database) perhaps a PHP script if it’s not built into FW?.

Any ideas what would do it, how to do it or at least what to call it so I can search for it somewhere? I’ve been stuck on this for a long time.


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

Try this. You’ll need to apply Protaculous to the page, and choose prototype-packed from the Library picker. Click on the top Function Body button and paste in the JavaScript portion of the Gist. The other part should be saved in a plain text file named list.php, which should go into your folder of photos (separate from all your other photos, so make a comics/ folder next to your Resources/ and put all of your comics and the php file into it).

In your layout, draw an HTML box large enough to hold the photos and name it something you recognize. Change the word ‘your_preview_area’ to match. Then click somewhere blank on the page, and from the main menu choose Insert / Markup Item. You will see a dialog box. Inside that, put in the following code:

<?php require('comics/list.php'); ?>

When you okay that dialog, you will see a 100px square box in the middle of your screen. Click on it and place it where you want your list to appear. You can drag it into a different shape if you like. Make sure your page filename is changed from whatever.html to whatever.php in the Filename field of the Inspector. Then upload this to your server. Make sure you also create that comics folder and put the images and the script inside it.

Visit the page on your server (http://example.com/gallery.php or whatever you called the outer page) and you will see the list of links to the photos. When you click one, you should see the image appear in the HTML box. If you want to have a default image appear in the box when the page first loads, you can add the image as a pass-through or background.

Walter

On Mar 7, 2012, at 12:28 PM, Joe wrote:

I’m trying to figure out how to do what I think is a very basic thing in Freeway, but I don’t know what to call it or if there’s a built-in solution in Freeway Pro 5.6 or I need a script from somewhere.

I’m designing a comic strip archive page. I want to have a long list of text links (like 150+) on a page and when any one of them is clicked, it would show a specific image in a box at the top of the page. The rest of the page would stay the same. Each link clicked changes the image only not other page elements.

I prefer to use something that would get images from a web folder (not a database) perhaps a PHP script if it’s not built into FW?.

Any ideas what would do it, how to do it or at least what to call it so I can search for it somewhere? I’ve been stuck on this for a long time.


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

On Mar 7, 2012, at 2:20 PM, Walter Lee Davis wrote:

Try this.


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

Ack! Just tested this, and the links don’t work because of the way that PHP includes work. I’ve changed it to reflect the new method. Here’s the new instructions for Freeway:

  1. You don’t need to change your page filename to end in .php.
  2. Instead of drawing or inserting a Markup Item, just draw an HTML box where you want your list to appear. Make note of its name (I used ‘list_area’ in my example).
  3. Make sure you change both the name of the preview area and the list area in the JavaScript.

Walter

On Mar 7, 2012, at 2:29 PM, Walter Lee Davis wrote:

List of photos in a folder · GitHub

On Mar 7, 2012, at 2:20 PM, Walter Lee Davis wrote:

Try this.


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

Hi, Walter,

Thanks for the scripts and tips. I’ve just started playing with them and will see how it goes. As I know next to nothing about code, at least I feel more in control than I did before! Will be in touch with the outcome.

Joe Vissichelli

Joe’s Caricatures
Web: http://BringYourFace.com
Email: email@hidden

Artifax Creative Services
Web: http://ArtifaxArt.com
Email: email@hidden

117 Delmonico Place
Valley Stream, NY 11581
Phone-Fax: 516-593-4844


From: Walter Lee Davis email@hidden
To: email@hidden
Sent: Wednesday, March 7, 2012 1:05 PM
Subject: Re: [Pro] High volume image find/display ideas

I posted a script last week that creates an RSS feed from a folder of photos. I’m thinking this could be modified to create your specific page, skipping the RSS part (or maybe not) and simply listing the folder as text links. You could then use Prototype’s Ajax.Updater to put the desired image into the preview area based on a click.

If I have some time later, I’ll see what I can do with it. If you’ve coded PHP before, it’s not a very large leap from the starting point I’ve made:

HTML index and RSS feed from a folder of photos · GitHub

Walter

On Mar 7, 2012, at 12:28 PM, Joe wrote:

I’m trying to figure out how to do what I think is a very basic thing in Freeway, but I don’t know what to call it or if there’s a built-in solution in Freeway Pro 5.6 or I need a script from somewhere.

I’m designing a comic strip archive page. I want to have a long list of text links (like 150+) on a page and when any one of them is clicked, it would show a specific image in a box at the top of the page. The rest of the page would stay the same. Each link clicked changes the image only not other page elements.

I prefer to use something that would get images from a web folder (not a database) perhaps a PHP script if it’s not built into FW?.

Any ideas what would do it, how to do it or at least what to call it so I can search for it somewhere? I’ve been stuck on this for a long time.


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

Hi, Walter,

Thanks for the scripts and tips. I’ve just started playing with them and will see how it goes. As I know next to nothing about code, at least I feel more in control than I did before! Will be in touch with the outcome.

Joe Vissichelli

Joe’s Caricatures
Web: http://BringYourFace.com
Email: email@hidden

Artifax Creative Services
Web: http://ArtifaxArt.com
Email: email@hidden

117 Delmonico Place
Valley Stream, NY 11581
Phone-Fax: 516-593-4844


From: Walter Lee Davis email@hidden
To: email@hidden
Sent: Wednesday, March 7, 2012 2:47 PM
Subject: Re: [Pro] High volume image find/display ideas

Ack! Just tested this, and the links don’t work because of the way that PHP includes work. I’ve changed it to reflect the new method. Here’s the new instructions for Freeway:

  1. You don’t need to change your page filename to end in .php.
  2. Instead of drawing or inserting a Markup Item, just draw an HTML box where you want your list to appear. Make note of its name (I used ‘list_area’ in my example).
  3. Make sure you change both the name of the preview area and the list area in the JavaScript.

Walter

On Mar 7, 2012, at 2:29 PM, Walter Lee Davis wrote:

List of photos in a folder · GitHub

On Mar 7, 2012, at 2:20 PM, Walter Lee Davis wrote:

Try this.


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

It’s working as hoped on my test page. Now I need to format the list, which is currently appearing as a little blue flyspeck on the page: http://zakmakestracks.com/test1.html

I tried adding the formatting to my FW doc but it’s not changing it. I’m also hoping to flow it in linked columns as it grows, which I hope the code will allow though the usual FW method.

Can you suggest how to format the list? I’m not a coder but I can make some changes if I can recognize where to tamper. Haven’t found that.


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

It sounds like your list box is getting the “I’m empty” styling, which is usually used when a table cell doesn’t have any content, so that any images in that box can appear to fill it completely, rather than having a margin forced by the line-height. I’m having a hard time duplicating this output here, so there may be something else about your layout that I didn’t consider in my instructions. Can you post a link to the page, or tell me a little more about how you set up the document (HTML Level, Layout Method, etc.)?

Walter

On Mar 8, 2012, at 12:24 PM, Joe wrote:

It’s working as hoped on my test page. Now I need to format the list, which is currently appearing as a little blue flyspeck on the page: http://zakmakestracks.com/test1.html

I tried adding the formatting to my FW doc but it’s not changing it. I’m also hoping to flow it in linked columns as it grows, which I hope the code will allow though the usual FW method.

Can you suggest how to format the list? I’m not a coder but I can make some changes if I can recognize where to tamper. Haven’t found that.


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

Also your exact Freeway version…

On Mar 8, 2012, at 12:40 PM, Walter Lee Davis wrote:

It sounds like your list box is getting the “I’m empty” styling, which is usually used when a table cell doesn’t have any content, so that any images in that box can appear to fill it completely, rather than having a margin forced by the line-height. I’m having a hard time duplicating this output here, so there may be something else about your layout that I didn’t consider in my instructions. Can you post a link to the page, or tell me a little more about how you set up the document (HTML Level, Layout Method, etc.)?

Walter

On Mar 8, 2012, at 12:24 PM, Joe wrote:

It’s working as hoped on my test page. Now I need to format the list, which is currently appearing as a little blue flyspeck on the page: http://zakmakestracks.com/test1.html

I tried adding the formatting to my FW doc but it’s not changing it. I’m also hoping to flow it in linked columns as it grows, which I hope the code will allow though the usual FW method.

Can you suggest how to format the list? I’m not a coder but I can make some changes if I can recognize where to tamper. Haven’t found that.


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

I’m also hoping to flow it in linked columns as it grows, which I hope the code will allow though the usual FW method.

The way this works in FW is even though you have linked columns in the FW doc. At publish time the links between columns become fixed.

You can have a single text box that expands with more text and one that has a multi-column layout using CSS but you cannot link between separate HTML items so that text flows into successive ones as the number of items increases.

David


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

Try this. Click once on the box where you are placing the list, and open up the Item / Extended interface. Click on the DIV Style tab, and click New. The sub-dialog that appears will have a Name and Value field, enter font-size and 16px respectively. Be sure to type them exactly that way. Okay out of the stack of dialogs and preview again. You should see normal size type.

If you want multiple columns, try applying the CSS3 Columns Action to the same box. There are controls for the number of columns, column spacing, dividers, etc. Once you’ve set everything up the way you like it, be sure to remove the height attribute from the box by clicking on the up/down arrow icon left of the height field. This will allow the box to flex in height depending on its contents.

Walter

On Mar 8, 2012, at 12:40 PM, Walter Lee Davis wrote:

It sounds like your list box is getting the “I’m empty” styling, which is usually used when a table cell doesn’t have any content


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

I tried the Item/Extended trick. No normal size type, just a bigger flyspeck separated into lines. I even tried entering 33px for the font size with no major enlargement, so there has to be another factor involved.

The CSS3 column action works for what little list there is.

http://zakmakestracks.com/test1.html


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

Thanks, David I just saw your comments. I was in the process of deducing that myself. I must be learning something!

I sure hope all these actions I’m using translate into a web site that works in multiple devices.


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

You entered font-style: 16px, and you want font-size: 16px.

Walter

On Mar 8, 2012, at 3:16 PM, Joe wrote:

I tried the Item/Extended trick. No normal size type, just a bigger flyspeck separated into lines. I even tried entering 33px for the font size with no major enlargement, so there has to be another factor involved.

The CSS3 column action works for what little list there is.

http://zakmakestracks.com/test1.html


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

Duh. Fried brains from late night web design. Sorry for the confusion.

It’s fixed now and shows an unstyled list of the proper size. For further styling, I assume I have to work through the I/E palette as well. If so, do you know where I’d find the right terms to use for font, link styling, colors, etc?


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

If so, do you know where I’d find the right terms to use for font, link styling, colors, etc?

If you open any FW page with good old Text Edit you will see all the styling attributes near the top of the page.

Link styling can be applied on an Item basis by selecting the HTML container and then looking in the Inspector. Under the Paintbrush icon (second Tab) you will see a section for Links. There you can set your Link styles and it will only affect the selected HTML container.

If you do this with nothing selected on your page the styling will affect all links on the page (unless there is an item specific styling set)

1 click on the U will turn the underline off.

David


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

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

Whew – so nice and easy. Thanks.


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

In the Style palette, you can create a style to remove the list bullets (for example) by creating two Tag-only styles (http://actionsforge.com/articles/view/9-tag-only-styles) as follows:

#item2 ul {
	padding-left: 0;
}
#item2 li {
	list-style-type: none;
	margin-left: 0;
}

(I started these with #item2 because the element where you placed your list has the ID item2 in your layout. Please adjust these style names if you change that box name.) All of these attributes will need to be created using the Extended sub-dialog in the Create Style dialog (Freeway doesn’t expose these, you just have to know what they are). In a nutshell, you want to click the Extended button, then New, and then enter what’s on the left of the colon in the Name field and what’s on the right of the colon in the Value field. You don’t enter the colon or the semicolon in this dialog. For the list item (li) you need to press New, enter the first attribute, then Okay, and press New again to enter the second.

Next, you can click on the box and use the Inspector (Style tab, Links segment) to change the way that unstyled links will appear inside that box. This is covered in the manual, and is a very powerful way to make your links look like anything you can imagine.

Walter

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

Duh. Fried brains from late night web design. Sorry for the confusion.

It’s fixed now and shows an unstyled list of the proper size. For further styling, I assume I have to work through the I/E palette as well. If so, do you know where I’d find the right terms to use for font, link styling, colors, etc?


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