I’m trying to create a website very much like the example below. The main image is the most important element, with either a click-through or thumbnails to other images.
If you resize the browser window you will see that the main image automatically re-sizes, with the other elements staying in relative position. Eventually a breakpoint comes into play and the page modifies to suit other devices.
I’m struggling to find settings which allow me to do this - any help or pointers would be much appreciated! I’m using Freeway 7.1.1
I meant to add that using fixed % allows the image to scale in one direction but not both. Using fixed % on both height and width almost works, but the image won’t stay in proportion (i.e. distorts).
What I’m looking for is to have the image as large as possible (as in the example above) in whatever device window it is viewed in without being cropped or distorted.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
What I’m looking for is to have the image as large as possible (as in the example above) in whatever device window it is viewed in without being cropped or distorted.
Thanks Todd, I appreciate you taking the time to reply. At the risk of sounding dumb (I am!), should I use the Page > HTML markup function or edit the HTML directly?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thanks Todd, I appreciate you taking the time to reply. At the risk of sounding dumb (I am!), should I use the Page > HTML markup function or edit the HTML directly?
Okay, let’s all just remember that any % measurement must be seen in relation to something else. So that, width=100% should make you automatically ask “one-hundred percent of what?”
What = The Containing Element, whatever that may be.
The real answer to the original question is NOT how to make an image flexible but how to make a layout that is flexible. Inflow layouts in Freeway are simply flexible layouts.
When you have a flexible inflow layout, then you will have a container for your image. In Freeway 7 you simply select the container and use the inspector to set the width (%). Then select the contained image directly and use the inspector to set it to no height and 100% width. No extra markup or styles needed, unless you really just want to.
Here’s a quick example of a fluid layout, with a fluid image, and also responsive, all using only Freeway 7’s built-in tools-- no extra markup required.
Okay, let’s all just remember that any % measurement must be seen in relation to something else. So that, width=100% should make you automatically ask “one-hundred percent of what?”
What = The Containing Element, whatever that may be.
The real answer to the original question is NOT how to make an image flexible but how to make a layout that is flexible. Inflow layouts in Freeway are simply flexible layouts.
When you have a flexible inflow layout, then you will have a container for your image. In Freeway 7 you simply select the container and use the inspector to set the width (%). Then select the contained image directly and use the inspector to set it to no height and 100% width. No extra markup or styles needed, unless you really just want to.
Here’s a quick example of a fluid layout, with a fluid image, and also responsive, all using only Freeway 7’s built-in tools-- no extra markup required.
Thank you Erns, that is a great help, and thank you for taking the trouble to show a working example. I have probably missed something but I’m still struggling to replicate the website I gave in the example:
The large image automatically resizes to the height of the window of whatever the device screen size (I’m talking specifically about monitors, laptops etc rather than phones or tablets). If you grab hold of the bottom of the window and reduce the window height you will see what I mean. The main image is never cropped in height and there is no need to scroll.
The large image automatically resizes to the height of the window of whatever the device screen size
Maybe but doesn’t give a satisfactory experience with short height and wider width window.
Ernie’s method gives the best all around experience
D
I have a specific reason for wanting to emulate this, which is why I posted the request. It’s not a matter of wanting short height, but an image which will fit the height of a window on a variety screens.
So, just to reiterate once more, I need to have an image which is as large as possible - specifically height - in any window, on any browser, on any device.
I will need to be able to apply this to several pages and images so would like to avoid having to get into the html. I will also need to be able to make the pages responsive for phones, tablets etc., though the height requirement won’t apply. This is the effect I would like to replicate:
I think you do not realize what a complicated thing you’re asking for… a layout plus html slideshow that must fit both browser width and height, except on mobile screens.
If you look at how your example link accomplished the task, it is done with a lot of custom code, ostensibly written for Squarespace users. However, the behavior is limited to just the slideshows-- no other page on the site displays that behavior, not even the Home page which is the most similar. The behavior is also limited to desktop screens, as iPhone and iPad screens show the image and text as one long scrolling page.
The challenge here is to not only figure out how to do all that, but then retrofit that solution into Freeway. Then I’d have to explain how all that was done. Too much effort for me at the moment so I will pass. Also, I find that such design “solutions” place too heavy a value on presentation-- in disregard for the content, certainly for the end-user who should be in control of how they view content.
Perhaps you can find a similar third-party slideshow you can customize to fit your design goals, or perhaps you can make your own. What I am saying is there is no magic bullet to get what you want. You are going to have to decide if it’s worth it and then make the investment to reach that goal.
Good luck.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Thanks Ern, I appreciate you taking the trouble to look into it. Thanks again for your earlier guide - through to that I have been able to get pretty close.
In this case the reason for wanting to show max image size is to present artwork in this manner, hence the specific request. End users (typically collectors and gallerists) usually have to go through loops themselves - clicking on a lightbox for example, and waiting -albeit fractions of a second(!) for a larger in-window image to open. The example seems a very elegant, and in this case end-user friendly solution.
Through trial and error I found it possible to make an image fit, but not in proportion. Freeway has this potential in there somewhere, but not quite yet.
Back to the drawing board! Thanks again, Phil
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Freeway has this potential in there somewhere, but not quite yet.
If you use the images as backgrounds to your containers then investigate the properties of
background: contain and background: cover that FW offers to you under the Size dropdown.
You have to think quite carefully before you go down the route of integrating a 3rd party script into your FW document - the support you need may not be available.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
I’m also looking at Fancybox which appears in the source for the same site.
This one is free although on the face of it is less sophisticated. In fact this may suit me because I am only looking for the ‘full-height’ function primarily, with a basic slide show if possible.
freewaytalk mailing list
email@hidden
Update your subscriptions at: