[Pro] Changing Images at Break Points

Hi all.

Can anyone tell me if it’s possible to change one image for another at a certain break point?

I’m building an inline responsive site and certain flexible images get too small at a 640px breakpoint and I’d like to change them for a different format of the same image that works better at the smaller screen size. But if I change the image at that break point it of course changes the image for all the larger break points. Help!

Thanks in advance.

Dave


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

You can build your layout with more than one image.

Then at the Breakpoints you want to change you can turn the Display option on or off depending which image you want to appear.

With the item selected look in the Inspector under the 3rd Tab. Display: checked or unchecked.

You can also do this manually by writing a media query such as:

@media screen and (max-width:1024px)
	{
	#item1 { background-image: url(Resources/yourbigimage.png);
			background-position: center;
			background-repeat: no-repeat;
			}
	}
	
@media screen and (max-width:480px)
	{
	#item1 { background-image: url(Resources/yoursmallimage.png);
			background-position: center;
			background-repeat: no-repeat;
			}
	}

But that does require some understanding of CSS

David


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

There was also this CSS Tricks discussion-- which I have not tried, but looks promising. I’m not sure it addresses the problem of downloading the larger image files in the background on mobile devices.


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

No CSS knowledge required. You can do this in Freeway 7 without having to resort to markup items.

Add a background image to a container item, select a breakpoint and change the background image for another image. Freeway will write the correct code for you and swap the image when the user hits the specified browser width. Background images have their own usability issues but if you just want to change images this is the quickest and simplest way of doing so in Freeway 7.
Regards,
Tim.

On 25 May 2015, at 11:31, DeltaDave wrote:

But that does require some understanding of CSS


Experienced Freeway designer for hire - http://www.freewayactions.com


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

Add a background image to a container item, select a breakpoint and change the background image for another image.

This is one of the FW7 features that is not documented - and I am sure there are many others!

Thanks for pointing that out Tim but it would be nice if it was in the Documentation.

D


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

Or in Freeway 7 Add two images at your default page size. Turn “display” off in the inspector palette for one of them. Then at your desired break point turn display on again with the other off to swap out the images.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk
http://www.ineedwebhosting.co.uk

On 25 May 2015, at 20:13, Tim Plumb email@hidden wrote:

Add a background image to a container item, select a breakpoint and change the background image for another image. Freeway will write the correct code for you and swap the image when the user hits the specified browser width. Background images have their own usability issues but if you just want to change images this is the quickest and simplest way of doing so in Freeway 7.


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

Hi all.

Thanks for your responses and apologies for my late reply.

Tim - thanks re the background images, that’s the solution I’m currently using and I can confirm that it does work a treat, I guess my concern was that maybe this wasn’t the best way to do it and also if the site is viewed on a screen size that isn’t covered by the break points then the edges of the image will be cropped off as it’s not flexing to fit.

DeltaDave & David - thanks and yes understand the theory of this but having tried it I’m lost on how I can get two images to essentially occupy the same space. I can achieve it if the second image to be turned on at the smaller break point is a floating layer but then it doesn’t ‘interact’ with the other elements on the page - i.e. causing text boxes to move with it etc, unless of course I’m doing it wrong!??

Big Erns - thanks for the link, I’ll give it a read as I’m keen to learn all I can about CSS.

Thanks
Dave


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

unless of course I’m doing it wrong!??

Your page does have to use an inline construction for this.

D


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

Yes DD it is an inline construction and I had another play around with it yesterday and I think I’ve got it working now.

Thanks
Dave


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

Yes DD it is an inline construction

I knew that you had said that originally but later you said “it doesn’t ‘interact’ with the other elements on the page” which made me suspect that not all of your elements were inline.

D


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