[Pro] Text on a picture in an inline layout

Freeway
1

I would like to place some text on top of a picture.

How do I combine a graphic item with a html item? It is fairly easy in a ‘standard’ layout but I have an inline layout and I expirienced that in an inline layout it is not that easy… Or?

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

2

The easiest way to do this is to create an HTML box, style your text inside it (including using padding to move the text away from the edges of the box), then set the image as a background image for that HTML box. You will need to save the image as a Web-friendly format at an appropriate size (make sure it’s a little larger than the box, so any text-size changes won’t show a gap) before you do this.

Walter

On Nov 26, 2013, at 1:25 PM, Wimdg wrote:

I would like to place some text on top of a picture.

How do I combine a graphic item with a html item? It is fairly easy in a ‘standard’ layout but I have an inline layout and I expirienced that in an inline layout it is not that easy… Or?

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

3

Aha, of course ! It’s a quite easy solution.

Can I use the extended dialog for the html box for width and height?

And do you mean web friendly, in kb size?

Willem

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

4

On Nov 26, 2013, at 1:39 PM, Wimdg wrote:

Aha, of course ! It’s a quite easy solution.

Can I use the extended dialog for the html box for width and height?

No need. You can set these dimensions directly in the Inspector.

And do you mean web friendly, in kb size?

Yes, and also format. While Safari can show almost any image format that Photoshop can make (since it leverages the QuickTime framework or CoreImage, depending on version) all other browsers are limited to JPEG, PNG, and GIF.

Walter

Willem

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

5

So Walt, if I set the scale in the inspector, the box will adjust its size when viewed on an iPhone?
For every graphic box I normally use the exented dialog for this. Never saw this is possible for a html box. Thanks for that.

And if I export a picture from Aperture as a percentage of the original and the result is a JPG picture 600x450. Is it sensible to use this one?

Willem

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

6

On Nov 26, 2013, at 1:51 PM, Wimdg wrote:

So Walt, if I set the scale in the inspector, the box will adjust its size when viewed on an iPhone?
For every graphic box I normally use the exented dialog for this. Never saw this is possible for a html box. Thanks for that.

And if I export a picture from Aperture as a percentage of the original and the result is a JPG picture 600x450. Is it sensible to use this one?

You need to figure out how large it should be in pixels, and make it no larger than that. Then you may want to try extending the DIV Style (use the Item / Extended interface to explore this) with the following attributes (multiple, because not all browsers use this un-prefixed any more):

-ms-background-size: cover
-moz-background-size: cover
-o-background-size: cover
-webkit-background-size: cover
background-size: cover

This attribute will tell the picture to scale to the smallest size that will cover the height and width of the object without introducing anamorphic scaling (squishing).

But even with that big raft of prefixes above, there will still be some browsers that don’t follow the hint, so for them, you need to make sure the image is at least big enough (but not much bigger), and deal with the fact that it will crop on smaller browsers. Most mobile browsers are based on WebKit, and that will definitely work, either with or without the prefix (which is only there for old Android devices – Macs and iPhones will all work without the prefix).

Walter

Willem

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

7

Will definitely try that.

One thing to make sure it is working: how do I enter these settings in the extended dialog?

Willem

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

8

I wrote them here with the code style, and separated the name and value with a colon. In Freeway, you would click once on the HTML box, open up the Item / Extended dialog, then click on the

segment in the dialog. For each attribute, click Add, then type in just the name (not the colon), then tab into the Value field, and type in the value (the part after the colon). Repeat until done.

Walter

On Nov 26, 2013, at 2:05 PM, Wimdg wrote:

Will definitely try that.

One thing to make sure it is working: how do I enter these settings in the extended dialog?

Willem

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

9

Allright Walt, understood! Thanks!

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

10

Hi Walt,

Could you check one thing for me?

I have the picture with a white text on my index page.
On my Mac (safari) everything looks fine, but in Freeway there is no gap between this picture and the picture below it (the lightbulb). The gap is much larger when viewed on an iPad or iPhone. Do you know what is causing this?

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

11

Mobile Safari makes adjustments to font size to make things more readable on small screens – but this effect is more pronounced on iPhone than iPad. Can you confirm that you’re seeing the same amount of difference from the desktop browser in both Mobile devices? Also, can you just post a link so we can see what you see?

Walter

On Nov 26, 2013, at 4:30 PM, Wimdg wrote:

Hi Walt,

Could you check one thing for me?

I have the picture with a white text on my index page.
On my Mac (safari) everything looks fine, but in Freeway there is no gap between this picture and the picture below it (the lightbulb). The gap is much larger when viewed on an iPad or iPhone. Do you know what is causing this?

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

12

Thank you waltd,

I just found this with a google search (trying to scale a background picture in an inline html) and it was exactly the answer I was looking for!

Craig

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