Photo galleries + display text


Jeremy Hughes
 
Edited


You don't need to keep changing the position property,...
Well you do if you can't get to the text unless you know about the procedure above.

 

It's not a difficult procedure:

1. Command-Return does the same as Return in Freeway. (We wanted to keep Return for adding returns - new paragraphs - after a box.) So: same as Freeway but add Command.

2. Tab switches out of the Site panel. Tab is normal for switching between views (e.g. text fields).

(In your document you can also click directly on the text box, because it's actually in front of the image.)

What we decided with Xway is that it should be possible to use arrow keys within the Site panel. You can't do this in Freeway because the Site panel is always inactive (it never responds to key presses). Because Xway allows you to do this, we provided Tab as a keyboard shortcut for switching out of the Site panel. You can also click back in the Layout view, although this will change your selection if you click on a different item (we're considering whether it should do this or whether a first click should simply switch back to the Layout view).

Jeremy


Jeremy Hughes
 

On Wed, Nov 13, 2019 at 01:52 PM, Tim Plumb wrote:
On Wed, Nov 13, 2019 at 05:35 AM, Jeremy Hughes wrote:
What I was really asking was whether there are other ways to scale text.
Use a script.
That seems like a pretty heavy-weight solution. Are there any easier solutions that don't require JavaScript?

Jeremy


Tim Plumb
 

On Wed, Nov 13, 2019 at 05:57 AM, Jeremy Hughes wrote:
1. Select the item in the Site panel
2. Press Tab to switch out of the Site panel
3. Press Command-Return to edit text within the box
Well that's one for the post it note stuck to the screen.

You don't need to keep changing the position property,...
Well you do if you can't get to the text unless you know about the procedure above.


Jeremy Hughes
 


You don't need to keep changing the position property, but the reason that Xway adds top and left offsets is because this allows you to drag the box after you've converted it.
Freeway doesn't allow you to remove offsets from absolute positioned items. The fact that you can remove them in Xway is another feature that Freeway doesn't have. Boxes that don't have offsets are positioned according to where they are in the content (text) flow. This is sometimes useful.

Also: Freeway doesn't allow you to convert absolute-positioned boxes (layers) into relative-positioned boxes (inflow items) or vice versa.

Jeremy


Jeremy Hughes
 

 
In Freeway you could select the item in the site panel and hit return or enter to drop into that box. from there you could select the text. We don't have that in Xway
1. Select the item in the Site panel
2. Press Tab to switch out of the Site panel
3. Press Command-Return to edit text within the box

Rather than adding the positioning style as an extended item I tried changing the position property using the inspector. Unfortunately every time I changed the item from relative to absolute it would add a top:0 and left:0 style which prevented the vertical alignment code from working. If I stripped these values out they would come back each time I switched the positioning back again.
You don't need to keep changing the position property, but the reason that Xway adds top and left offsets is because this allows you to drag the box after you've converted it.

Jeremy


Tim Plumb
 
Edited

On Wed, Nov 13, 2019 at 05:35 AM, Jeremy Hughes wrote:
What I was really asking was whether there are other ways to scale text.
Use a script.


Tim Plumb
 

Thanks Jeremy.

How would you do it in Freeway?
I suspect it could be almost as hard to do in Freeway. The lack of user defined styles and my inability to select that text overlay item when I wanted to just made it a bit of a pain. If I were to do this in Freeway I think I'd set ups class style for each of the elements and apply those to the elements as I needed to style them.

You can select items in the Site panel!
You can but selecting the text in a div that you can't click on in the design view is almost impossible. In Freeway you could select the item in the site panel and hit return or enter to drop into that box. from there you could select the text. We don't have that in Xway at the moment as hitting return or enter simply tries to edit the item name in the site panel.

Rather than adding the positioning style as an extended item I tried changing the position property using the inspector. Unfortunately every time I changed the item from relative to absolute it would add a top:0 and left:0 style which prevented the vertical alignment code from working. If I stripped these values out they would come back each time I switched the positioning back again.


Jeremy Hughes
 

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


Jeremy Hughes
 

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


Jeremy Hughes
 

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


Tim Plumb
 

On Tue, Nov 12, 2019 at 02:31 PM, Jeremy Hughes wrote:
See my other reply: https://softpress.groups.io/g/xway-talk/message/194

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.


Jeremy Hughes
 

So far, so good. I have the text floating over the image, but it doesn’t resize with the image.
See my other reply: https://softpress.groups.io/g/xway-talk/message/194

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

Jeremy


Geoff Mullett
 

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 <jeremy@...> 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


David Ledger
 

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


Tim Plumb
 

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. 


Jeremy Hughes
 
Edited

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


Jeremy Hughes
 

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


Jeremy Hughes
 

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


Walter Lee Davis
 

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 <geoff10a@gmail.com> 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 <david.ledger@ivdcs.co.uk> 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







Geoff Mullett
 

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 <david.ledger@ivdcs.co.uk> 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