[Pro] Responsive image problem with cms

Hi Again,

Ok; built a simple site using FW7* and Pulsecms. All generally fine, something of a learning curve (re learning) but ok. However the images that come in from the cms do not resize, text is fine but images, the form and thumbnail galleries, mess things up with not resizing as they should. Well they do in the Pulse template sites I’ve made.

  • Also gave Caleb’s Backdraft a spin which is excellent btw.

Any thoughts ?

thanks,

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Well they do in the Pulse template sites I’ve made.

I suppose that this may depend on the particular Pulse template ie release date/age.

If you are using the latest Pulse I would hope it would be.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Seoras,

Could you post us a link perchance? It’s probably just a matter of writing a patch of CSS.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Guys,

Thanks.

Here is a link: Chris Partridge Artist - Scotland - Home page

I based it on the FW Sonata template but basically to get a handle on FW7, though BD helped a lot.

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Seoras.

Here ya go:

img {
    max-width: 100%;
    width: auto !important;
    height: auto !important;
}

Beware: This will make every single image on the page flexible. There doesn’t seem to be any styling hooks to plug into, so that’s why we’re using a broad brush. Wrap it in <style> tags and drop it in before the page </head> tag.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Many Thanks Caleb,

That generally works just grand, only issue I can see is that the galleries (http://www.cpartist.co.uk/cpbooks.php) and form pages need a tiny tweak when viewed on a tablet to size down to fit the screen. A bit clunky when resizing browser window but of course thats not such an issue. Other pages work fine. I’ll maybe need to play around with the size of the relevant div’s. of those elements.

Might be interesting to see if it works better using BD rather than my messed about first FW7 attempt.

S


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Just a work in progress update. This worked better (?), some images seemed to render as their input size rather than sized and saved in redactor:

img { height: auto; !important; max-height: 100%; max-width: 100%; width: auto; !important; }

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

img { height: auto; !important; max-height: 100%; max-width: 100%; width: auto; !important; }

That is invalid CSS

If the important! bit isn’t within the style ie height: auto !important; then it will be ignored.

So what you have in your code snippet actually translates to:

img { height: auto; max-height: 100%; max-width: 100%; width: auto; }

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Dave,

I thought I had replied but it appears … or rather it doesn’t, odd.

Anyway, thanks, I’ll change that. Leaving the ‘max-height: 100%’ element that seems to have solved the latter issue, on from Caleb’s rescue.

Pulse doesn’t it seem play too well with FW7, still a few issues to try and resolve but I need to check on something other than a nexus 7.
Might just stick to the pulse templates that work well.

cheers,

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I’m going to weigh in here with this thought… Percentage values should never be used with max or min dimension properties.

If you want to assign a % value, assign it to the width or height properties. Max-width works like this:

 width: %; max(min)-width: px

Min and max are limiters so you set the relative width and height of an object to its parent situation, but put brakes on absurdities of extremes.

If you don’t want a flexible item to shrink below a certain value, then min is your choice. If you want a flexible item not to grow above a certain value, then max is your choice.

###Example1:

You have a container you want to take about 20% of the parent width, but never smaller than 150px, then:

width: 20%; min-width: 150px; 

###Example 2

If you have a flexible container that you never wish to grow wider than 960px… like a content container centered in the main PageDiv, then:

max-width: 960px; margin: 0 auto; 
<!-- width: 100% is assumed, provided some other style is not interfering -->

###Auto

“Auto” with dimension properties like width or height is not totally necessary. It’s like telling the browser “you figure it out.” If the browser could respond, it would just say “Duh.”

That’s all.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Erns,

I’ll look at your thoughts when I’m clearer of mind, a long day and not with a website for a change.

I expect there will be some comeback given your input on the bit of code I’ve just used and that seems to work to make video responsive on this page. Still to road test :slight_smile:
http://www.cpartist.co.uk/cpabout.php

Anyhow I was going to add to this thread anyway for those that might encounter same. Any improvements welcome.

@media screen and (max-width: 750px) {
iframe {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

@media screen and (max-width: 750px) {
iframe {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}

Browsers are built to correct bad code. This is bad code, is all I’m saying. It’s the pidgin english of good code.

Should be written as:

width: 100%; 

and nothing else is needed, although height:auto is a harmless placebo for the superstitious.

Let the pushback begin.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Ernie,

A few things about the code:

  1. When it comes to images, max-width:100% means a very different thing than it would if it was applied to a div. With a div, I agree, that CSS would be nonsense. However, when applied to an image, it means “don’t let the image grow to be bigger than it’s native pixel dimensions”. On the other hand, width:100% would be interpreted at “make the image match the width of it’s container”. This is rarely desired, as it can result in very low-resolution graphics.

  2. width:auto is used to override the width attribute of the <img> tag. Because we are using the max-width property to set the image size, no value other than auto makes any sense.

  3. height:auto is used to ensure support in IE8. Otherwise, IE tends to flatten the images to a 1px high pancake, at least in my test: http://calebgrove.com/articles/flexible-width-images


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Oh, derp, I now see that Seoras was trying to apply that code to an iframe. My comment above only applies to images, and I wouldn’t use that CSS for iframes.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I use these styles to make video content responsive;

.youtube { position: relative; padding-bottom: 60%; height: 0; overflow: hidden; width:100%; }
.youtube iframe { position: absolute; top: 0; left:0; width:100% !important; height:100% !important; }

The padding value will directly relate to the aspect ratio of the video but 60% should work for you for standard 4:3 content.

Alternatively you can add the content directly in Pulse using the YouTube plug-in and a short code;
http://www.plumb-design.com/plugins/youtube
Regards,
Tim.

On 24 Jan 2016, at 21:40, seoras email@hidden wrote:

Anyhow I was going to add to this thread anyway for those that might encounter same. Any improvements welcome.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Caleb,

For inline images that are expected to scale down but grow no larger than their natural width, many use the method that you have described.

max-width: 100% !important;
width: auto !important;
height: auto !important;

I still think this is wrong use. Normally I would suggest

width: 100%; 
max-width: 800px; /* natural pixel width of image */
height: auto;

Now I know the obvious flaw in this plan is not knowing ahead of time what the natural image width is… then also having to write a style for every image you want to be responsive in the way outlined at the beginning.

The browser, however, knows the natural width of each image. We can take advantage of that by writing our image style this way:

width: 100%; 
max-width: intrinsic; 
height: auto;

This lets the image scale proportionally without exceeding its natural size. For images that scale with their container, this:

width: 100%;
height: auto;

And that’s what I think.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Wow ! Interesting and useful thread.

Tim, a much smoother solution than what I managed to find but I can’t have my client add code other than paste a youtube embed code. Also redactor have removed the iframe (video) button so you now just paste iframe code straight into text area, adding extra code would then require going into code view. [though my client has a science PHD she would not appreciate having to do that]
What would your solution be for Vimeo.

I’ve since viewed on an iphone and the site seems fine (client happy), resolved video post but should be ok. Clunky on android tablet with the pages that have two side by side elements.

thanks again all,

s


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options