Does anyone know if Freeway Pro can do something like this? The image scales itself and zooms as well depending on the size of the browser. It can even fill an entire browser.
Best!
Steven Houtzager
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Actionsforge.com - full background image actions.
http://actionsforge.com/actions?q=full+background
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks that works fairly well. It would be better if it were a little more responsive. It would be great if the whole screen was always full of the image, even if the screen is very tall or wide.
Like this http://catalystproperties.smarthomeprice.com/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Steven,
Try this:
Select the page in the sidebar, the immediately open the inspector.
Match these settings:
In the menubar, go to Page > Extended
Add this as a new entry:
| Name | Value |
|---|---|
style |
background-size: cover; |
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The directions above are for setting a background image for the entire page, but you can also do this for a inline, 100% width, HTML item. If you are using Backdraft, check this out: http://backdraft.onrampwebdesign.com/docs/full-width.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Wow! That works great.
SH
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Caleb,
You indicated this can be done with an HTML item. Can you be a bit more specific.
Also I purchased backdraft a bit ago…still learning. I would like to create a site similar to Steve’s link http://catalystproperties.smarthomeprice.com/
Is that full image possible with backdraft (i noticed the photos change on that site as well).
Trying to create a responsive site now torn between using backdraft now that FW7 is here.
Appreciate any response.
Rob
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
An HTML element with a background image can be responsive in lots of different ways. The quickest and easiest of these is to give it a percentage dimension, like 80% width, and then use the Extended interface to add the Name/Value pair:
background-size: cover
in the
What this does is get the image to magically fill the HTML box no matter how it stretches. For an even more magical trick, you can get an image to scale proportional to its container in both dimensions by doing the same thing, but then adding the following wrinkle:
What this does is make the image scale proportionally no matter how wide you make the box. Here’s an example to show the difference between these approaches: Image Scaling - Two Ways
Walter
On Aug 3, 2014, at 2:27 PM, Rob wrote:
Caleb,
You indicated this can be done with an HTML item. Can you be a bit more specific.
Also I purchased backdraft a bit ago…still learning. I would like to create a site similar to Steve’s link http://catalystproperties.smarthomeprice.com/
Is that full image possible with backdraft (i noticed the photos change on that site as well).
Trying to create a responsive site now torn between using backdraft now that FW7 is here.
Appreciate any response.
Rob
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 Waltd
New to Freeway 7 and you show a great example of percentage reduction of images in your link:
http://scripty.walterdavisstudio.com/image-scaling.html
I would like to know how you managed to get the text to follow the images without reducing the size of the text.
Could you let me know.
K
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The images are inline within a text box. The text flows around them because in that context, the image acts like just a single character of text. These images scale when the page changes because they are styled as the background-image of an HTML box, and in the case of the bottom image, the height of the box is defined as a percentage (using padding-top, although padding-bottom also works) and since padding in percentages is scaled by the width of the object it is applied to, the image is locked into an aspect ration of 1:4 and never varies.
The background-images are set to the background-size: cover mode (you need to use the Extended tools in Freeway’s Edit Style dialog to access this, and the percentage padding trick as well). View the source of this page to see the (very minimal) styling that I used to build the image behavior.
Walter
On Jan 7, 2015, at 5:21 AM, kasbah email@hidden wrote:
Hi Waltd
New to Freeway 7 and you show a great example of percentage reduction of images in your link:
I would like to know how you managed to get the text to follow the images without reducing the size of the text.
Could you let me know.
K
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 Walter
I do apologise and it’s very rude of me, but I forgot to thank you for this advice and it was very useful.
Working on responsive site (fresh to this) and I must be looking too hard, but I understand the Default page changes the ones further down the scale but why is it that changing any imagery or deleting items, adding other items and changing point size affects the default page.
I need to do this as the text is too large and I need to add items that do not appear on the desktop version.
Could you point me in the right direction?
Thank you.
Best
Keith
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can you point us to a view of a page that shows the problem (HTML, not a screenshot of it)? That way we can see it in a browser, and resize, and see what happens.
Walter
On Jan 15, 2015, at 3:28 PM, kasbah email@hidden wrote:
Hi Walter
I do apologise and it’s very rude of me, but I forgot to thank you for this advice and it was very useful.
Working on responsive site (fresh to this) and I must be looking too hard, but I understand the Default page changes the ones further down the scale but why is it that changing any imagery or deleting items, adding other items and changing point size affects the default page.
I need to do this as the text is too large and I need to add items that do not appear on the desktop version.
Could you point me in the right direction?
Thank you.
Best
Keith
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
I need to do this as the text is too large and I need to add items that do not appear on the desktop version.
Could you point me in the right direction?
All items, no matter when they enter the stage are already part of the default page. This is making sense because a responsive page works on one set of information.
Whether they show up on certain devices or not can be steered by a CSS property display:none which is the tick “show” in inspector’s third tab.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter and Thomas,
Thanks again for your response and offer of help.
I managed to find out that if you go Item Output Settings in inspector > Display > uncheck the graphics not required to display, on say portrait mobile devices because of lack of space along the header, become invisible and do not affect the Default page.
K
(PS - Walter, I downloaded your template ‘Walter Kittens’. Where are your Kittens on the page layout? They appear on the preview.)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I think those are using the PlaceKitten service – I wrote an Action for that a while back, too. The kittens are in the cloud (playing with yarn, I guess).
Walter
On Jan 30, 2015, at 5:26 AM, kasbah email@hidden wrote:
Hi Walter and Thomas,
Thanks again for your response and offer of help.
I managed to find out that if you go Item Output Settings in inspector > Display > uncheck the graphics not required to display, on say portrait mobile devices because of lack of space along the header, become invisible and do not affect the Default page.
K
(PS - Walter, I downloaded your template ‘Walter Kittens’. Where are your Kittens on the page layout? They appear on the preview.)
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 Walter
I wonder if I could get more instruction with your image scaling full in an html item… I’m having quite a time with it in FW7… I don’t know why
the image only appears as a tiny slice or nothing at all in preview… thx so much…
ill keep trying and if I can get it Ill post again
thx C
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can you post a link to what you have gotten? I can tell more from looking at the page in a browser.
Walter
On Mar 10, 2015, at 10:49 PM, Carla email@hidden wrote:
HI Walter
I wonder if I could get more instruction with your image scaling full in an html item… I’m having quite a time with it in FW7… I don’t know whythe image only appears as a tiny slice or nothing at all in preview… thx so much…
ill keep trying and if I can get it Ill post again
thx C
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
oh thx Walt… I don’t have online but let me send the page up will be right back thx
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here you go Walter
http://carlosalomar.com/biotest.html
this is a huge help
x
Carla
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’m not sure what you’re seeing in your browser, but this is a perfect execution of the padding-bottom trick. It looks exactly proportional at all screen widths that I can see.
Walter
On Mar 10, 2015, at 11:06 PM, Carla email@hidden wrote:
Here you go Walter
http://carlosalomar.com/biotest.htmlthis is a huge help
x
Carla
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