WARNING: The following comments are being made in the context of Inflow construction and other methods of hacking Freeway. Readers who are inexperienced with this radical and unintended use of the software are advised to try and keep pace.
Hi Tom, I’m not sure that I have a clear idea of what you want to do. If it’s to make text appear at certain sizes, or to make text appear to replace other items at certain sizes…
Anyway, my basic response is that it is possible to replace one image with another. However, it’s not a Freeway thing… it’s an HTML and CSS thing. That’s because all Freeway does is make HTML and CSS things for you, but the number and cleverness of those things it makes is sorely limited. Software is pretty stupid, which is why it needs us humans to help them out.
Page code (a shorter way to say HTML or CSS, or even Javascript-- don’t wanna leave that out!) has some basic common structures. There are selectors and attributes, properties and values. So, while it is impossible for Freeway responsive design to change a thing for a different thing at different sizes, it is very possible to change how the same thing is described at these different sizes. Got it?
For example, when you place a pass-thru image into Freeway, it writes the code for that something like this:
<img src="image-filename.jpg">
So there is an attribute “src” telling the browser which image to display. Freeway responsiveness won’t let us replace one img
tag with another, but it will let us replace one “src” value with another.
Again, I am only speaking to pass-thru images (which is all I work with so what I know best). There are a couple ways to change the “src” value, as long as we a) Don’t delete the original default image or b) Build our layout to accommodate any change in image sizes.
###First try the obvious
I’ve not tried this, so I don’t know that it will work. First place the default image as pass through, then, set your layout to the desired breakpoint. Select the image and change it (cmnd-e). I doubt this will work, but why not try? You’ve nothing to lose but time, and if it works, you’re famous.
###Next, get tricky
The Extended interface is the way to augment or override the code Freeway would normally output. I use it all the time. Set your pass-thru image as before but at the breakpoint, select the image and invoke the Extended interface (menu or contextual menu or key command). The Extended widow usually has two options at the top of the window… the element or the element style. In this case the element is img
so let’s choose that. Make a new attribute with the name “src” and the value set to something like:
Resources/new-image-filename.jpg
or perhaps,
../Resources/new-image-filename.jpg
depending on how your CSS is setup. Save and return to default view, publish and test. What happens is Freeway will then override the src value for that element at the breakpoint, leaving all other values intact… which may be tricky. How you build your layout will affect how well this strategy works so be prepared to sort out a few things.
###Resort to a style
Responsive styles are imo easy in Freeway. Keep the same element and dimension (like a div) but use background image as a style for the element, changing which background image is used at the breakpoint. Hint: for a responsive style to work, it must be applied at the default size and redefined at breakpoint sizes. You cannot have instances where the style is or is not applied to the element.
###Technology to the rescue
Because Freeway is so slowly developed, whole technologies develop and are adopted while Freeway struggles to keep up. There is an HTML5 element, the Picture element, which uses similar media queries to set the source image so that you not only have a way to swap images at breakpoint sizes, you can swap images based on browser support… I started to write a little about it here:
https://dl.dropboxusercontent.com/u/27331610/cssway/picture-element/index.html
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options