[Pro] Backdraft, NewCycle and Pass thru images

I am using Backdraft to create a new version of an existing site, the home page as per link uses Walters Newscycle action to cycle through some images which are imported as Pass Thru. all seems fine on a desktop but when you get to tablets in Portrait some strange things start happening, the last image in the sequence refuses to scale correctly, and when i change the Mobile setting to 100% on initial i get even stranger results.

Also take a look at

http://www.reenoserve.com/ghyc/fleets/dragons.html

and none of the images in this Newscycle sequence scale correctly I have tried variations of using the Extended class flexImage and margin :auto and display :block and i cannot get the correct results.

I thought that Pass thru images should scale and act in a responsive and consistent manner.

Any suggestions would be grateful

Thanks
John

http://www.reenoserve.com/ghyc/index.html


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

On the home page image 1 has defined width

image1 {
width: 562px;
min-height: 401px;
max-width: 562%;
z-index: 0;
padding: 8px;
margin-left: auto;

Whereas the others are percentages such as

#image3 {
width: 96.89%;
min-height: 401px;
max-width: 99.64%;
z-index: 0;
padding: 8px;
margin-left: auto;
margin-right: auto;
}

David


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

But looking deeper - which is difficult as the images swop out constantly!

><div id="image1">
<p class="f-fp f-lp"><img id="MG1" src="Resources/_MG_8751.jpg" alt="MG1" class="flexImage"></p>
</div>
<p>&nbsp;</p>
<div id="image2"><p class="f-fp f-lp"><img id="MG1773" src="Resources/_MG_1773.jpg" alt="MG1773" class="flexImage"></p>
</div>
<p>&nbsp;</p>
<div id="image3"><p class="f-fp f-lp"><img id="MG1609" src="Resources/_MG_1609.jpg" alt="MG1609"></p>
</div>

No flexImage class on img id=“MG1609”

D


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

But looking deeper - which is difficult as the images swop out constantly!

There is an option in the Safari Inspector for pausing scripted animations

  • click the Debugger and then the Pause icon, then switch back to inspect
    and the animation is paused - and so is the code which cycled out
    constantly :wink:

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

There is an option in the Safari Inspector for pausing

Thanks Ernie - didn’t know that. Unless it’s not available in my old version - will check when I get back to the ranch.

D


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

Gents,

Dave/Big Erns,

Apologies for the delay in the response… travelling…

I have added the Extended

class flexImage

to all the images in question and now there appears to be some consistency, but i noted that i had to do several reloads of the page on the tablet to get the correct display.

However my question is are Pass thu images truly responsive ??

Why do i need the class flexImage???

And what i do not understand is the interaction of the setting in the Document Setup > Mobile page

and what is the correct setting i had all sorts of problems when the Initial setting was at 100% but at 85% as it is now it appears to be more understandable???

Again

Thanks

John


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

However my question is are Pass thu images truly responsive ??

Pass through images are more accessible to percentage size controls in
Freeway. In fact, I believe that you can in FW7 set a pass thru image width
as a percentage in the inspector. That’s not truly responsive, but in a
flexible inflow layout it means the image will inhabit that percentage of
the container’s width – in other words, scale.

Why do i need the class flexImage???

I think this is a Backdraft thing… I’d guess that it does what I mentioned
previously, use CSS to make the image flexible with regard to it’s
container. However, I’m not a Backdraft expert and thus leave explaining
the inner workings of it to them.


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

Not sure if this is any help, but have a look at http://getbackdraft.com/docs/flexible-graphics


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

Noel,

Thanks, i have had a brief email interchange with Caleb on this and i believe his view would be that

class flexImage          

should not be needed if Pass thru image responsiveness is working correctly.

John


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

On the home page image 1 has defined width

image1 {
width: 562px;
min-height: 401px;
max-width: 562%;
z-index: 0;
padding: 8px;
margin-left: auto;

Whereas the others are percentages such as

#image3 {
width: 96.89%;
min-height: 401px;
max-width: 99.64%;
z-index: 0;
padding: 8px;
margin-left: auto;
margin-right: auto;
}

David

David,

Apologies i did not respond to your intial post on this issue, yes correct, my oversight on that, fixed it now.

I am still a little confused about how Pass Thru images are supposed to respond to responsive designs… why do i need to use the

  class flexImage    

??? is this a strange interaction issue with Walters NewsCycle action?

Thanks

John


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