Photo galleries + display text

The first I suspect of many questions. Having used Freeway since its inception, Xway is like starting over!

I’ve been creating galleries of photos using Showcase and the Sequence Timer action. Will Showcase eventually be supported, or would Exhibeo be a better bet? In which case, would Exhibeo work in place of the ST action?

Freeway handles a greater variety of fonts and point sizes well using graphic boxes, will I need to turn display type into a jpeg in Photoshop etc then insert that format into Xway?

Apologies for the questions being so basic!

Geoff

Hi Geoff,

I’ve been creating galleries of photos using Showcase and the Sequence Timer action. Will Showcase eventually be supported, or would Exhibeo be a better bet? In which case, would Exhibeo work in place of the ST action?

We’re planning to provide better support for Exhibeo in a future version of Xway (currently you need to export HTML and use markup).

Freeway handles a greater variety of fonts and point sizes well using graphic boxes, will I need to turn display type into a jpeg in Photoshop etc then insert that format into Xway?

It’s best to avoid using graphic text, because it isn’t searchable and it’s not very accessible. Freeway supports graphic text because it was written a long time ago!

If you really need to use graphic text, you can use Photoshop or something else to create it.

Otherwise, web fonts (e.g. Google fonts) are a much better option if you want to specify a particular font family. In Freeway, you need to use markup to specify web fonts - but Xway supports them directly. As for font sizes, Xway supports any font size that you care to use (and gives you a wider choice of measurements for specifying sizes).

Jeremy

Just to elaborate on font sizes:

If you want 36px text, type “36px” in the Size field.
If you want 36pt text, type “36pt” in the Size field - and note that points are not the same as pixels in Xway or in CSS (Freeway wrongly treats them as being identical).
If you want text that is twice as large as the current (inherited) size, type “2em” in the Size field.

For web fonts see “Working with fonts” in the Xway User Guide.

Jeremy

Many thanks – plenty to be getting on with there!

Geoff

On 12 Nov 2019, at 12:06, Jeremy Hughes <email@hidden> wrote:

Just to elaborate on font sizes:

If you want 36px text, type “36px” in the Size field.
If you want 36pt text, type “36pt” in the Size field - and note that points are not the same as pixels in Xway or in CSS (Freeway wrongly treats them as being identical).
If you want text that is twice as large as the current size, type “2em” in the Size field.

For web fonts see “Working with fonts” in the Xway User Guide.

Jeremy

On 11/12/19 12:00 PM, Jeremy Hughes wrote:

It’s best to avoid using graphic text, because it isn’t searchable and
it’s not very accessible. Freeway supports graphic text because it was
written a long time ago!

If you /really/ need to use graphic text, you can use Photoshop or
something else to create it.

If you want a non-harvestable list of phone numbers, graphic text does
it easily, put it would be a pain to do each one in another app.
Non-searchable and not easily accessible is what you want in that case.

David

Hi David,

If you want a non-harvestable list of phone numbers, graphic text does it easily

Non-harvestable by robots, but harvestable by humans. (Human labour is cheap in some countries.)

This also prevents users from copying and pasting, and screen readers from reading to visually impaired users.

Maybe it would be better to require password access for this kind of information?

Jeremy

On 11/12/19 3:12 PM, Jeremy Hughes wrote:

Hi David,

If you want a non-harvestable list of phone numbers, graphic text
does it easily

Non-harvestable by robots, but harvestable by humans. (Human labour is
cheap in some countries.)

This also prevents users from copying and pasting, and screen readers
from reading to visually impaired users.

Maybe it would be better to require password access for this kind
information?

Jeremy

The people who have those numbers are happy with the way it is (Freeway
graphic text). Reading and entering into a land-line phone would be the
major use. For the numbers I have already I have the Freeway generated
images that I can use, so as long as changes come along slowly it will
be manageable. Just an unfortunate omission. I think I’ve seen a library
for creating a graphic from text somewhere. I’ll look for that.

David

I seem to have started this thread!
I was looking to place two blocks of scaleable text (hopefully one with a link to the next page (as Freeway could to with ‘map area’). Useful to know about Google fonts, but I haven’t found a way of placing the box of text on top of the graphics in a way that is scales with the graphic.
I’ll get there eventually!

Geoff

On 12 Nov 2019, at 16:01, David Ledger email@hidden wrote:

On 11/12/19 3:12 PM, Jeremy Hughes wrote:

Hi David,
If you want a non-harvestable list of phone numbers, graphic text
does it easily
Non-harvestable by robots, but harvestable by humans. (Human labour is cheap in some countries.)
This also prevents users from copying and pasting, and screen readers from reading to visually impaired users.
Maybe it would be better to require password access for this kind information?
Jeremy

The people who have those numbers are happy with the way it is (Freeway graphic text). Reading and entering into a land-line phone would be the major use. For the numbers I have already I have the Freeway generated images that I can use, so as long as changes come along slowly it will be manageable. Just an unfortunate omission. I think I’ve seen a library for creating a graphic from text somewhere. I’ll look for that.

David

If you set an image as a background image, then you can make HTML text float over it, and position that text relative to the image using padding within the box that the background is attached to.

Insert an HTML box, use the inspector to add a background image to it. Give it a height, and optionally, a width (although that makes use within a flexible layout more difficult). Use the background-size property to make the image display the way you want it to. This will help you deal with different scaling options when the image is shown on different browser viewports.

Double-click into the HTML box, and add your text. Style it as you want it to appear, and use the paragraph settings to align the text (center, left, right). Use the top padding to move the text down within the box.

Walter

On Nov 12, 2019, at 11:06 AM, Geoff Mullett email@hidden wrote:

I seem to have started this thread!
I was looking to place two blocks of scaleable text (hopefully one with a link to the next page (as Freeway could to with ‘map area’). Useful to know about Google fonts, but I haven’t found a way of placing the box of text on top of the graphics in a way that is scales with the graphic.
I’ll get there eventually!

Geoff

On 12 Nov 2019, at 16:01, David Ledger email@hidden wrote:

On 11/12/19 3:12 PM, Jeremy Hughes wrote:

Hi David,
If you want a non-harvestable list of phone numbers, graphic text
does it easily
Non-harvestable by robots, but harvestable by humans. (Human labour is cheap in some countries.)
This also prevents users from copying and pasting, and screen readers from reading to visually impaired users.
Maybe it would be better to require password access for this kind information?
Jeremy

The people who have those numbers are happy with the way it is (Freeway graphic text). Reading and entering into a land-line phone would be the major use. For the numbers I have already I have the Freeway generated images that I can use, so as long as changes come along slowly it will be manageable. Just an unfortunate omission. I think I’ve seen a library for creating a graphic from text somewhere. I’ll look for that.

David

I was looking to place two blocks of scaleable text (hopefully one with a link to the next page (as Freeway could to with ‘map area’). Useful to know about Google fonts, but I haven’t found a way of placing the box of text on top of the graphics in a way that is scales with the graphic.

In addition to Walter’s suggestion (use a background image), you could have a container box that contains a graphic and a second container box that sits on top of it:

  1. Insert box (item1)
  2. Place a text cursor within item1
  3. Insert graphic
  4. Insert box (item2)
  5. Type some text in item2 and give it a link
  6. Centre-align the text
  7. Centre the graphic (select it, then right-arrow, then choose centre alignment)
  8. Select item2 and set its position to be Absolute
  9. Set the width of item2 to be 100%

Jeremy

Scalable text:

  1. There is a measurement (vw) that defines a size (e.g. text size) to be a percentage of the viewport width. The viewport is the content area of a browser (or Xway) window, or the content area of the screen (on a non-windowed device).
  2. It might be possible to scale text using the CSS calc function (you would need to use Extended Properties for this).

Jeremy

Note that if you use absolute-positioned items (layer items in Freeway) and you want them to move and resize with another item, it’s best to insert them within that item. Absolute-positioned items can be positioned and sized in relation to their parent item. They can’t be positioned and sized in relation to other (e.g. sibling) items.

That’s why item2 (in the previous steps) is inserted within item1 and not merely placed on top of it.

[This is also the case if you use layer items in Freeway. It’s how absolute positioning works.]

Jeremy

On Tue, Nov 12, 2019 at 08:01 AM, David Ledger wrote:

The people who have those numbers are happy with the way it is (Freeway graphic text). Reading and entering into a land-line phone would be the major use. For the numbers I have already I have the Freeway generated images that I can use, so as long as changes come along slowly it will be manageable. Just an unfortunate omission. I think I’ve seen a library for creating a graphic from text somewhere. I’ll look for that.

If you have PHP running on your server then there’s a chance you’ll have access to one of the image libraries that allow you to dynamically make or edit images on the server. These are great for allowing clients to upload any image they like (typically a huge photo from a smart phone) and resize it and compress it for use online.

Here’s a quick example of PHP using the GD library to generate a list of images from a ‘data file’ of phone numbers;
http://plumb-design-dev.com/xway/gd-phone-numbers/

The PHP pulls out each phone number in turn and creates a PNG of each phone number as a simple image. These are then stored on the server so they can be used the next time the page is loaded rather than have the server make the graphics all over again. The trick with anything like is to make sure that the number isn’t available in the page code anywhere.

On 11/12/19 6:37 PM, Tim Plumb wrote:

On Tue, Nov 12, 2019 at 08:01 AM, David Ledger wrote:

The people who have those numbers are happy with the way it is
(Freeway graphic text). Reading and entering into a land-line phone
would be the major use. For the numbers I have already I have the
Freeway generated images that I can use, so as long as changes come
along slowly it will be manageable. Just an unfortunate omission. I
think I've seen a library for creating a graphic from text
somewhere. I'll look for that.

If you have PHP running on your server then there’s a chance you’ll have
access to one of the image libraries that allow you to dynamically make
or edit images on the server. These are great for allowing clients to
upload any image they like (typically a huge photo from a smart phone)
and resize it and compress it for use online.

Here’s a quick example of PHP using the GD library to generate a list of
images from a ‘data file’ of phone numbers;
http://plumb-design-dev.com/xway/gd-phone-numbers/

The PHP pulls out each phone number in turn and creates a PNG of each
phone number as a simple image. These are then stored on the server so
they can be used the next time the page is loaded rather than have the
server make the graphics all over again. The trick with anything like is
to make sure that the number isn’t available in the page code anywhere.

Thanks Tim. That looks like it will do the job. I do have php, I just
don’t use it on that page - yet.

David

So far, so good. I have the text floating over the image, but it doesn’t resize with the image.

Geoff

On 12 Nov 2019, at 16:49, Jeremy Hughes <email@hidden> wrote:

Note that if you use absolute-positioned items (layer items in Freeway) and you want them to move and resize with another item, it’s best to insert them within that item. Absolute-positioned items can be positioned and sized in relation to their parent item. They can’t be positioned and sized in relation to other (e.g. sibling) items.

That’s why item2 (in the previous steps) is inserted within item1 and not merely placed on top of it.

Jeremy

So far, so good. I have the text floating over the image, but it doesn’t resize with the image.

See my other reply: Photo galleries + display text - #11 by Jeremy

But maybe there are other ways of doing this: suggestions, anyone?

Jeremy

On Tue, Nov 12, 2019 at 02:31 PM, Jeremy Hughes wrote:

See my other reply: Photo galleries + display text - #11 by Jeremy

But maybe there are other ways of doing this: suggestions, anyone?

I took a closer look at this last night and I’ve got to tell you that it wasn’t easy in Xway. Here’s my attempt at following your suggested construction Jeremy.

Setting the text overlay items to absolute positioning works but makes editing the image wrapper or image impossible in Xway. You have to keep toggling the position just to be able to get access to these items. In the end I added the position styles as extended properties as it did away with this issue. The downside is that the design view doesn’t reflect the final output.

Possibly the biggest issue I have is that, as mentioned before, I’d normally define these boxes as class styles so I can quickly and easily apply them to each new image and overlay in the site. Having to set two of these up manually was a drag and simply duplicates the ID styles for each box. Add another 10 or so boxes and those styles become a major pain to keep updated.

You’ll see I’ve added a fair few bits of extended code around the file to vertically centre the text overlay in the parent wrapper (display: flex) as well as to remove the p tag that wanted to wrap the image.

The overlay text scales (using vw values as you suggested Jeremy) but it is a little uncontrollable without breakpoints as it will just get stupidly big or small at the extreme ends of the scale.

At the end of the day I’d like to see elements like this become components (either through styles or master items) that users can define once and reuse again and again throughout their sites.

Hi Tim,

I took a closer look at this last night and I’ve got to tell you that it wasn’t easy in Xway.

How would you do it in Freeway?

Setting the text overlay items to absolute positioning works but makes editing the image wrapper or image impossible in Xway. You have to keep toggling the position just to be able to get access to these items. In the end I added the position styles as extended properties as it did away with this issue. The downside is that the design view doesn’t reflect the final output.

You can select items in the Site panel!

Jeremy

You can select items in the Site panel!

In addition to using the Site panel, there are other ways to switch between items in the layout that I suggested:

  1. Use arrow keys: if you have an absolute item that follows a relative-positioned item, left-arrowing twice will take you from the absolute item to the relative item. Arrow keys take you through content in the same way that they would in any other text editor. Child boxes are content, in exactly the same way that text is content.

  2. Use Select Next Sibling/Previous Sibling/Parent/First Child:

The structure in this case is:

    div: item1
      p:
        img: [imagename]
      div: item2
        p:
          [Some text]

You can see this by selecting Show Site from the View menu (which is where I copied it from). Here, if you’ve selected item2 (the absolute-positioned item), Select Previous Sibling will select the paragraph that contains the image and Select First Child will select the image that is inside that paragraph.

There are keyboard shortcuts (Command arrow key) for this.

[Show Site a temporary feature, because we’re planning to make this information available in the Site panel in future. This will also allow you to select paragraphs, links, etc. by clicking on them in the Site panel]

Jeremy

What I was really asking was whether there are other ways to scale text. The two options that I suggested were:

  1. Use viewpoint-relative measurements (vw). This is easy to do (Xway supports almost all types of CSS measurement).

  2. Use calc in an Extended Property (I haven’t tried doing this but I think it should be possible)

Does anyone know of other options?

You could of course convert the text into an image (as you might do in Freeway) and set this to a percentage width - but then you lose the advantages of having real text - and you’re setting the clock back by about twenty years in terms of web design.

(We once had a customer who created pages that consisted entirely of GIF text.)

Jeremy