[Pro] Flexible page size with browser window for portfolio site

I’m a newcomer to Freeway v 5.5
I usually use Dreamweaver and Flash.
I am trying to create a photographic portfolio website with a simple stylish appearance, quickly.
With the emphasis on quickly, as this will be an interim site before I invest more time on the final site. Hence I chose Freeway which states it’s ease of use, helpful community of users and it’s WYSIWYG approach.
I find the Showcase approach to galleries restrictive in layout and so will design from scratch.
But my main problem is how to get the site to resize with the browser window.
I have tried the “Flexible Image” action - this changes nothing. Does it work with v5.5?
The “Full background” action - this stretches and distorts images, not retaining aspect ratio, which is unusable for my needs.
The Fit Page To Screen 2 action - changes nothing.
I have the CSS button on.
Can anyone help ASAP? Thanks, Jeff


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

Welcome to Freeway, and FreewayTalk!

Could you please post a sketch or layout of what you’re after, and
indicate with arrows or something what parts of your layout you want
to scale to fill the window? This kind of layout can be very simple,
or not, depending on your goals.

Walter

On Sep 13, 2011, at 11:41 AM, Jeff Leyshon wrote:

But my main problem is how to get the site to resize with the
browser window.


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

Hi
Im trying to create something like this

That site I quickly launched with Capture One, a photographic app I use for capture and processing of RAW files that also has the facility to put Contact Sheets up on the web for clients. The problem there is the final quality of the images suffer. I wanted to have more control over image quality in Freeway but create something similar i.e. Thumbnail gallery that resizes and auto hides and a preview window that resizes, I also want the max resolution to be 1920 x 1200pxl because a lot of clients now have these monitor res. Thanks.


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

Well, this site was exported from Phase 1 (camera manufacturer)
Capture One software. It’s using a script called galleria.js, and at
least on my machine, it’s running extremely slowly on the page turns.

I’ll give this some thought, and let you know if I come up with
anything. I know I wrote a script over a year ago to do this sort of
“fit width or fit height, depending on aspect ratio” scaling. I think
mine was meant to do a full-screen background, though, so it might not
be a good fit for this layout.

Are you planning on using this many images? Any other parameters you
can share?

Also, when you say that this or the other Action didn’t work at all,
can you be more specific? What did you try, what did you expect, and
what happened instead?

Walter

On Sep 13, 2011, at 12:11 PM, Jeff Leyshon wrote:

Hi
Im trying to create something like this

http://www.paulabeetlestone.com/

That site I quickly launched with Capture One, a photographic app I
use for capture and processing of RAW files that also has the
facility to put Contact Sheets up on the web for clients. The
problem there is the final quality of the images suffer. I wanted to
have more control over image quality in Freeway but create something
similar i.e. Thumbnail gallery that resizes and auto hides and a
preview window that resizes, I also want the max resolution to be
1920 x 1200pxl because a lot of clients now have these monitor res.
Thanks.


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


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

Hi, Thanks for your help, I thought this might be more straight forward.

Yes, as a professional photographer I use Capture One daily.

Yes, this will be the minimum number of images used.

I applies the Flexible Image action to a graphic item and expected it to resize both the height and width whilst retaining the ratio between the two. It did nothing.

I applied the Full Background action to the page and expected a similar result. It did resize the background but did not retain the ratio between height and width.

I applied the Fit to Screen action hoping in vain for the same effect as the Flexible image, and I got it!, it did nothing.

I do have the CSS button on. Do you need additional info?

Thanks


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

Okay, the first stage is pretty simple. Here is how to get an image to center and fill the screen as much as possible without being cropped.

Make a new page in Freeway using a blank Master page (no align, no style of any sort). Choose the HTML Box tool, and draw a box somewhere on the screen (CSS Positioning on).

In the Inspector, set the following values:

  • Title: box
  • Top: 0
  • Left: 0
  • Width: 100%
  • Height: 100%
  • Overflow: Hidden

Double-click inside this box, set the text align to Center, and then choose Insert/Graphic Item from the main menu. Click once on the graphic item (it will be a little 100px square) and choose File / Import from the main menu. Fill it with a photo. Scale the photo to fit (Shift-Command-F) and then Shift-Command-drag a corner to resize proportionally until the image is as large as will fit within your page without cropping.

Here’s the code you will add to your page:

First is the CSS, you copy that, open the Page / HTML Markup dialog, move to the Before /HEAD section using the picker in the lower-left corner of that dialog, and paste in everything including the tags.

Next is the JavaScript. You need to apply the Protaculous Action to the page, choose the prototype-packed library in the Actions palette, click on the top Function Body button, and paste in the second blob of code.

Preview in a browser. You should see the image filling the screen as best it can. If you don’t, please post a link to it and I’ll take another look.

As far as adding the thumbnails along the bottom, that’s a job for another day. Let’s get this part started and then you can move to the next level.

Walter


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

Hi guys,

This Action will let you select a folder of images to be used as a full screen slideshow. There’s no support for thumbnails as it is, though.

http://actionsforge.com/actions/view/234-background-supersizer

Joe

On 13 Sep 2011, at 20:01, waltd wrote:

Okay, the first stage is pretty simple. Here is how to get an image to center and fill the screen as much as possible without being cropped.

Make a new page in Freeway using a blank Master page (no align, no style of any sort). Choose the HTML Box tool, and draw a box somewhere on the screen (CSS Positioning on).

In the Inspector, set the following values:

  • Title: box
  • Top: 0
  • Left: 0
  • Width: 100%
  • Height: 100%
  • Overflow: Hidden

Double-click inside this box, set the text align to Center, and then choose Insert/Graphic Item from the main menu. Click once on the graphic item (it will be a little 100px square) and choose File / Import from the main menu. Fill it with a photo. Scale the photo to fit (Shift-Command-F) and then Shift-Command-drag a corner to resize proportionally until the image is as large as will fit within your page without cropping.

Here’s the code you will add to your page:

add_to_before_end_head.html · GitHub

First is the CSS, you copy that, open the Page / HTML Markup dialog, move to the Before /HEAD section using the picker in the lower-left corner of that dialog, and paste in everything including the tags.

Next is the JavaScript. You need to apply the Protaculous Action to the page, choose the prototype-packed library in the Actions palette, click on the top Function Body button, and paste in the second blob of code.

Preview in a browser. You should see the image filling the screen as best it can. If you don’t, please post a link to it and I’ll take another look.

As far as adding the thumbnails along the bottom, that’s a job for another day. Let’s get this part started and then you can move to the next level.

Walter


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


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

this thread is interesting! i’ve done well with the CSS but the JavaScript part i didn’t understand at all.

should i see an Action called Function Body at the window that pops up when i click on the plus sign at the bottom of the actions pallete? if yes i don’t have it.

cheers :slight_smile:
k


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

You need to download and install Protaculous from ActionsForge.

Walter


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

thanks about that!
but i’m getting an error. i did what you explained but something is wrong, of course. where am i making the mistake?
here is a screen shot of the code that’s underlined in red:
http://www.kenjiarimura.com/javascripterror.png

appreciate your help.
regards
k


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

In your Freeway prefs, locate the one for “Allow AppleScript in Actions”. Something like that. Turn that on, and you’re all set.

Walter


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

fantastic!! you’re a star!!
thanks!!


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

Great, that works, thanks for going to the trouble.
Again, it does seem very complicated, I did choose Freeway to avoid writing code.

I now plan to make a page full of thumbnails each with a link to an individual page of a larger image. I need this page to resize in the same way.

Jeff


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

Is it all possible to make this a slideshow?


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