FreewayTalk

6 replies to this thread. Most Recent

Tom

29 Jun 2016, 6:11 pm

Switch image for a breakpoint

Hi,

I have two images that should be used for one flexible-sized image slot (shrinks on smaller screens).

The first image should be shown till a breakpoint of 640px has reached, then the other one should take its place.

My idea is to replace an image with some text by a non-text version for resolutions where the text parts cannot be read any longer.

I wonder if there is a method doing so. So far, when I replaced an image on a slot, all breakpoints are affected.

Is there a solution for this or a better one I should use instead of?

Thank you, Tom.

The Big Erns

30 Jun 2016, 5:09 am

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

no longer subscribed to this discussion…

Tom

1 Jul 2016, 12:09 am

Hi Big Erns, thank you very much for your extensive explanation. It was really helpful for a novice like me! :-))

I think I’ll go and use the extended interface since this appears being the most logical solution to me. I was unsure if FW overwrites already existing attributes like the ‘src’ one, but it seems to work fine.

Trying to change the default image is not working, I have played with that way first without success. Replacing an image always replaces it for all breakpoints.

waltd

1 Jul 2016, 12:13 am

Yes, the src attribute cannot be modified by CSS, which is all that the responsive system has to work with. What you can do is change the background image of an HTML element at different breakpoints, so you may want to try that instead. Instead of drawing a graphic box and filling it with an image, draw an HTML box and apply your image as its background. Then at a different breakpoint, change the background image to a different image. Using a background image also lets you do very tricky things like always force the image to fill the HTML item, even if it changes size because of percentage dimensions responding to the size of the viewport.

Walter

On Jun 30, 2016, at 8:09 PM, Tom <[email protected]> wrote:

Hi Big Erns, thank you very much for your extensive explanation. It was really helpful for a novice like me! :-))

I think I’ll go and use the extended interface since this appears being the most logical solution to me. I was unsure if FW overwrites already existing attributes like the ‘src’ one, but it seems to work fine.

Trying to change the default image is not working, I have played with that way first without success. Replacing an image always replaces it for all breakpoints.

Freeway user since 1997

http://www.walterdavisstudio.com

Tom

1 Jul 2016, 10:51 pm

Great hint, thanks. :-)

John Daniel

4 Jul 2016, 4:52 am

Thanks David, i had tried that, it seems to simply affect the view only, not the actual output. (or preview for that matter)

I have had success with the opacity, but I intuit that having a element at 0 opacity (but still “in” the page) could still cause unexpected formatting issues.

If the “show” checkbox worked on the output also, that would be exactly the results i am hunting for.

thanks! jd

Back to Top

waltd

4 Jul 2016, 3:04 pm

You want the Display checkbox, which is in the Output tab (far right) of the Inspector while the item is selected (corner handles showing).

Walter

On Jul 4, 2016, at 12:52 AM, John Daniel <[email protected]> wrote:

Thanks David, i had tried that, it seems to simply affect the view only, not the actual output. (or preview for that matter)

I have had success with the opacity, but I intuit that having a element at 0 opacity (but still “in” the page) could still cause unexpected formatting issues.

If the “show” checkbox worked on the output also, that would be exactly the results i am hunting for.

thanks! jd

Freeway user since 1997

http://www.walterdavisstudio.com