[Pro] Resize images on the fly

Hi all,

I have a fairly complicated design for a website and I am just wondering if there is a method I could use in Freeway which would adjust the crop, depth, percentage of an image depending on what depth the related text next to the image makes.

The text is on a coloured background, and that background flows deeper depending on the number of text lines. So, if the text makes 10 lines in IE, but only 8 in Safari the box grows or shrinks to keep everything tidy. However, the pic is remaining at the size I import it at, and it would be good if I could show more depth to match how the text box flows.

Also considering using web fonts, and obviously should that fail to work on certain browsers, the layout could break completely if I can’t find a way of adjusting the image size on the fly.

Thanks in advance.

Jonathan


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

If you want to make your photo height responsive to the paragraph(s) of text to the right or left of it, then you want to use a background image and padding on a parent element to give this illusion. Make your background image as tall as you want to react to, but either center (vertically) or place the most important part of the image near the top of the overall image area:

+----------+
|          |
|   x  x   |
|     |    |
|   ___/  |
|          |
|          |
|          |
|          |
+----------+

(sorry in advance to Mail users, this ASCII-gram looks horrible in proportional fonts)

Now, insert an HTML box inline to hold your text. Paste the text into that box, then set its height to indeterminate (click on the up/down arrow icon left of the height field in the Inspector – the box will shrink-fit to its contents. Next, set the padding-left attribute to a width that is wider than the photo you made in the first step – just wider enough to provide a gutter between photo and text. Now, use the Style tab of the Inspector to set the background image of that HTML box to the photo you made. Make sure that you set the image position to top and left (no-repeat). That’s it, you’re done. If you want to make the image float to the right of the text, just set the image to position right top, and set the padding-right instead of the padding-left.

Now, when the text dimensions flex because of browser settings, more of the too-tall image will be revealed. Likewise, if the fonts are set smaller, the image will be cropped.

Walter

On Jul 3, 2012, at 4:57 AM, Jonathan Riddle wrote:

Hi all,

I have a fairly complicated design for a website and I am just wondering if there is a method I could use in Freeway which would adjust the crop, depth, percentage of an image depending on what depth the related text next to the image makes.

The text is on a coloured background, and that background flows deeper depending on the number of text lines. So, if the text makes 10 lines in IE, but only 8 in Safari the box grows or shrinks to keep everything tidy. However, the pic is remaining at the size I import it at, and it would be good if I could show more depth to match how the text box flows.

Also considering using web fonts, and obviously should that fail to work on certain browsers, the layout could break completely if I can’t find a way of adjusting the image size on the fly.

Thanks in advance.

Jonathan


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 this will help, but I’ve resurrected two antediluvian
examples from my archives on using alternate measurements for images. These
were made using Freeway Pro 4 and I am not liable for their condition.

example 1: http://cssway.thebigerns.com/legacy/zoomy/
example 2: http://cssway.thebigerns.com/legacy/bigernsmokun/

Actually, on re-reading your message I wonder if you wouldn’t be better
served instead of an image, a background image that is larger than… oh,
wait – I see that Walter already beat me there :slight_smile:


Ernie Simpson

On Tue, Jul 3, 2012 at 4:57 AM, Jonathan Riddle email@hiddenwrote:

Hi all,

I have a fairly complicated design for a website and I am just wondering
if there is a method I could use in Freeway which would adjust the crop,
depth, percentage of an image depending on what depth the related text next
to the image makes.

The text is on a coloured background, and that background flows deeper
depending on the number of text lines. So, if the text makes 10 lines in
IE, but only 8 in Safari the box grows or shrinks to keep everything tidy.
However, the pic is remaining at the size I import it at, and it would be
good if I could show more depth to match how the text box flows.

Also considering using web fonts, and obviously should that fail to work
on certain browsers, the layout could break completely if I can’t find a
way of adjusting the image size on the fly.

Thanks in advance.

Jonathan


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

Here is a more up-to-date example of what I think Walter might have been
saying. Or maybe what I think I was hearing. Or maybe not, but it was nice
fun :slight_smile:

http://cssway.thebigerns.com/workbench/grow-reveal-image/


Ernie Simpson

On Tue, Jul 3, 2012 at 10:39 AM, Walter Lee Davis email@hiddenwrote:

If you want to make your photo height responsive to the paragraph(s) of
text to the right or left of it, then you want to use a background image
and padding on a parent element to give this illusion. Make your background
image as tall as you want to react to, but either center (vertically) or
place the most important part of the image near the top of the overall
image area:

    +----------+
    |          |
    |   x  x   |
    |     |    |
    |   ___/  |
    |          |
    |          |
    |          |
    |          |
    +----------+

(sorry in advance to Mail users, this ASCII-gram looks horrible in
proportional fonts)

Now, insert an HTML box inline to hold your text. Paste the text into that
box, then set its height to indeterminate (click on the up/down arrow icon
left of the height field in the Inspector – the box will shrink-fit to its
contents. Next, set the padding-left attribute to a width that is wider
than the photo you made in the first step – just wider enough to provide a
gutter between photo and text. Now, use the Style tab of the Inspector to
set the background image of that HTML box to the photo you made. Make sure
that you set the image position to top and left (no-repeat). That’s it,
you’re done. If you want to make the image float to the right of the text,
just set the image to position right top, and set the padding-right instead
of the padding-left.

Now, when the text dimensions flex because of browser settings, more of
the too-tall image will be revealed. Likewise, if the fonts are set
smaller, the image will be cropped.

Walter

On Jul 3, 2012, at 4:57 AM, Jonathan Riddle wrote:

Hi all,

I have a fairly complicated design for a website and I am just wondering
if there is a method I could use in Freeway which would adjust the crop,
depth, percentage of an image depending on what depth the related text next
to the image makes.

The text is on a coloured background, and that background flows deeper
depending on the number of text lines. So, if the text makes 10 lines in
IE, but only 8 in Safari the box grows or shrinks to keep everything tidy.
However, the pic is remaining at the size I import it at, and it would be
good if I could show more depth to match how the text box flows.

Also considering using web fonts, and obviously should that fail to work
on certain browsers, the layout could break completely if I can’t find a
way of adjusting the image size on the fly.

Thanks in advance.

Jonathan


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


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

ooh, I like that.
Trev

On 3 Jul 2012, at 17:10, Ernie Simpson wrote:

Here is a more up-to-date example of what I think Walter might have been
saying. Or maybe what I think I was hearing. Or maybe not, but it was nice
fun :slight_smile:

http://cssway.thebigerns.com/workbench/grow-reveal-image/


Ernie Simpson


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

Speechless! Exactamondo!!! I have spent far too long on trying to make the layout look OK if the text reflowed. If only I had asked this earlier. The older I get, the more useless I become.

Really do appreciate this help so thank you.


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

I just downloaded the test file Ernie and that really is very clever using a background image, so thank you both for helping me with this. The complicated layout now suddenly doesn’t seem so complicated!


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

Walter is the brains, really. I am just the eye-candy :smiley:


Ernie Simpson

On Tue, Jul 3, 2012 at 12:33 PM, Jonathan Riddle email@hiddenwrote:

I just downloaded the test file Ernie and that really is very clever using
a background image, so thank you both for helping me with this. The
complicated layout now suddenly doesn’t seem so complicated!


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

Great example Ernie - filed for future reference.

Might also be worth mentioning that using Item>Extended and adding a min-height would stop your image being reduced too much if it was to go the other way.

David


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

Eye candy Ernie! I like it!

This has revolutionsed my workflow on this site. In all honesty, is this something I should have sussed? Is this basic web knowledge? This has been a challenging layout to achieve, but I think it is such a smart design it was worth pursuing, but I made it hard for myself right from the offset.

I guess not working on sites full-time means that tricks like this will pass me by. Not happy though at how long I have messed around when a solution was there right from the start. I just didn’t ask the right questions to the right people.


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