I’m building a responsive website. The logos and images that I add will be responsive (using the Flexible Image action or similar). But what happens if the client uses the CMS to add images to the site - how do I make these responsive?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That’s where things get interesting or awkward depending your viewpoint.
In your CSS you’re going to have to set a series of overrides depending on your device width. Doing things like making the images within column text with:100% !important; float: none !important; on say narrow devices like phones where images are not already 100% width.
–
David
On 23 Aug 2013, at 12:01, “Mark” email@hidden wrote:
I’m building a responsive website. The logos and images that I add will be responsive (using the Flexible Image action or similar). But what happens if the client uses the CMS to add images to the site - how do I make these responsive?
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
Mark,
There are quite a few different ways to do this. I would start by adding this just before the page tag:
<style type="text/css">
.flexImage {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
</style>
In a nutshell, that little bit of CSS makes the image flexible-width, while not allowing it to grow past its pixel dimensions.
Then, all you have to do is ensure that class="flexImage" is contained within the <img> tag, like so:
<img id="image2" class="flexImage" src="image.jpeg">
In vanilla FW (without any CMS), this can be added though the extended dialog for the image. Just add an entry in the tab with
class as the name, and flexImage as the value.
If you are using the WebYep image action, you will need to use the action’s extended dialog, like so:
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
How are you guys doing this? To get this code to work I have to make sure
the image is enclosed in an html element that responds to the
layout, instead of inserting an image into a run of text, to limit the
image from expanding uncontrollably.
–
Ernie Simpson
.flexImage {
width: auto !important; height: auto !important; max-width: 100% !important; }
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ernie,
The principal of that code is that the image shouldn’t expand past its pixel dimensions. It will scale down indefinitely, but if the image file is 700px wide, it should stop growing at 700px.
It’s strange if it isn’t working for you, mind if I have a link?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I just tested this here with an image I made to be 200px x 300px. When I applied this class to the image, even if I bumped up the “width” attribute of the img tag to 800, the image stayed 200px wide. I couldn’t even make it larger by adding width:800px to the img tag’s “style” attribute. Now if you are scaling massive images (such as in your big heavy-equipment-for-sale site) then you will get the result you describe, where the image grows like topsy unless you constrain it within another sized element.
Walter
On Aug 23, 2013, at 1:07 PM, Caleb Grove wrote:
.flexImage {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here is an example file which shows the difference - scale the page (or
view it on devices) and you’ll see the difference in behavior.
There is also a third method I’ve been futzing with but that I won’t get
into just now.
–
Ernie Simpson
On Fri, Aug 23, 2013 at 1:26 PM, Caleb Grove email@hidden wrote:
Ernie,
The principal of that code is that the image shouldn’t expand past its
pixel dimensions. It will scale down indefinitely, but if the image file is
700px wide, it should stop growing at 700px.It’s strange if it isn’t working for you, mind if I have a link?
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
er, link = http://cssway.thebigerns.com/workbench/flexible-imagery/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I think these are both handsome ways to handle the scaling, and which one you choose will be a function of whether you want a layout that absolutely scales to a smaller screen, or that degrades gracefully to a smaller screen. These are not always precisely the same thing.
Walter
On Aug 23, 2013, at 4:18 PM, Ernie Simpson wrote:
er, link = http://cssway.thebigerns.com/workbench/flexible-imagery/
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 don’t know if responsive equates to adaptive but came across this recently.
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Seoras,
I use that on most of my responsive sites. While it doesn’t make your images flexible width, what it does do is automatically create different sizes of the same image and serve them to the correct devices.
Let’s say that you had a huge graphic that was 2000px wide on a flexible width website, which was set span the entire browser width. The last thing you want to do is require a mobile user with spotty 3g and data caps to download that gigantic graphic.
That is where http://adaptive-images.com steps in. When the first mobile user visits your website, it will use an image scaling feature in Apache to generate a version of the graphic that is 480px wide (you decide on the breakpoints). Then, it will cache that image on your server and serve it to any mobile devices instead of the 2000px wide version.
As you can imagine, if you are using large graphics, this will greatly speed up the loading time and will result in happier users that are more likely to stick around.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Caleb,
That’s really interesting and clarified how it actually works which was a bit puzzling.
As a photographer I’m interested in the different ways of presenting images on the web.
Might be a good template opportunity, I would certainly buy it.
Currently thinking how I can make my updated website more responsive (landscape1), using Pulse and magnific-popup that’s shipped with it at the moment.
Magnific Popup: Responsive jQuery Lightbox Plugin
s
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Caleb
I’ve been away from my office for a few days.
Thanks for your solution, but I intend to use Surreal CMS (not WebYep). Any ideas?
Thanks again
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Mark,
I’ve never use Surrreal, but it looks like you would just use the vanilla Freeway method I posted above. The CMS should respect that.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Caleb
But that requires me to use FW rather than a client being able to add images to their site using their CMS and the images being responsive/flexible size?
Thanks
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Mark,
Like I said, I’ve never use Surreal before, so these are just guesses. If anyone has a FW website using Surreal, and would be willing to share the login credentials with me, I could do some better testing (click on my name above to go to my profile and get my email address).
From what I’m seeing on Surreals website, there are two ways to add images to a site:
Have the dev (you) include the image in the HTML, then set it to be editable using class="editable". In Freeway, it would look like this:
Insert a graphic item on the page. Size it to the dimensions that you like.
Right-click on the image, click on “Extended”, and go to the <img> tab.
Add a new entry with “class” as the name and “editable” as the value.
If you want the image to be flexible width, make sure that you have added this before the </head> tag:
<style type="text/css">
.flexImage {
width: auto !important;
height: auto !important;
max-width: 100% !important;
}
</style>
Then instead of just using “editable” in the value field, use “flexImage editable” (with the space in-between).
Have the clients add the images through the rich-text editor. If you have included the block of code above before the </head> tag, you somehow have to ensure that class="flex image" is somehow added to the <img> tag. I don’t know if you can do this with Surreal, or how you would do it.
That should get you started!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options