Pitures and text

Hi,

Is there a way to have a picture box (With a link to a web page) and below it text with link as well. The text needs to flow with the picture if the page is resized depending on the web browser. See Gallery

With freeway I could put graphics where I wanted I can’t see how to do that with xWay.

Hi Paul,

There are two ways to do this in Freeway: 1. Use table layout, 2. Use Absolute-positioned items (“layers”). Table layout (1) has been deprecated for over 20 years. Absolute-positioned items (2) are available in Xway: change the item’s position from Relative to Absolute in the Box Inspector. But don’t do this (in Freeway or Xway) if you want to create a layout that can be viewed easily on different devices.

The secret to creating flexible layouts is to use inflow (relative-positioned) items. If you want a title to be centred underneath a graphic, you can centre-align both the graphic and its title.

An easier way to create galleries (in Xway or Freeway) would be to use Exhibeo.

Here’s a way that you could create a gallery in Xway, without using Exhibeo:

  1. Insert a container box
  2. Insert a graphic within the container box
  3. Centre the graphic: select it, then right-arrow to get a text cursor, then choose centre-alignment for the paragraph that contains the graphic (Align in Text section of Paragraph Inspector)
  4. Press Return to create a new paragraph (which will also be centre aligned) and type a caption for the graphic
  5. Remove 50% Maximum Width from the graphic
  6. Set a fixed Width for the graphic (e.g. 300px).
  7. Give the graphic a left and right margin (e.g. 4px)
  8. The next step is to float the box that contains the graphic. This isn’t directly supported in Xway (yet) but you can do it by selecting the box and entering “float” (Name) “left” (Value) in the Extended Properties section (omit the quotes)
  9. Now duplicate the box a few times and preview in Xway’s Web view

You now have a simple gallery that contains just a few (currently identical) images and captions, but it’s easy to replace these images and captions with new images and captions. To replace an image:

  1. Select it
  2. Click on Replace in the Content section of the Box Inspector
  3. Choose Other… from the Resource popup
  4. Choose a new image

P.S. If you would like to use a larger size for the graphic, but have it shrink can smaller screens, you could set a Maximum Width of 96% on the graphic (slightly less than 100% to allow a bit of space for horizontal margins)

Hi Jeremy,

I am trialing Exhibeo and you are right is is much easier to create galleries. My challenge is that I want to have a gallery page showing 1 photo for each trip I do per year. i.e. Wales, Somerset, Zoo, etc. There could be up to 20 trips per year. I would have a gallery page for each year.

When I select a year which shows all the trips/ photos I want to click on the image which then goes to the gallery for that trip. The galleries for each trip are created in lightroom and uploaded to my site separately and outside of Freeway/ xWay.

I can’t see in Exhibeo how I can put a name below each image. I need a name for each image otherwise I could have a page with 20 images but no names. if I hover over an image I can see the name but this is not helpful. I want to use Showtime or Thumblie theme. The challenge with Thumblie is that I have to click on the image which opens a large image and then click again to get to the lightroom gallery. Can’t I click on the thumbnail and go straight to the lightroom gallery page (Ideally in a new window)

I’ll look at the advice using xWay and a container box later.

Another way to make the picture button is to use a background image on an HTML box. You put your text inside the box, set it to align to the bottom of the box, then set the picture as the background image on the HTML box. For extra responsive goodness, set the background-size property on the HTML box to either cover or contain, and be sure to set the background-repeat to none. I can’t recall (and I don’t have any computers near me that have Freeway installed) whether these are available in the interface, or if you have to use the Item / Extended / Div Style interface to add them manually, but it’s not impossible.

The beauty of Freeway is that once you set this whole thing up, you will be able to copy and paste to duplicate the object with all its settings, then just change the text and the background image to make your new button when you add another lightbox.

In HTML 5, it is legal to wrap a DIV (or other block-level element) in an A tag, just like you might do around an inline element or text. This is directly possible in Xway, but you can also do it in Freeway using one or more Actions. My HTML5 Block Link Action will let you wrap a link around an inline HTML box, so you should be able to do this in Freeway.

https://www.actionsforge.com/actions/html5-block-link

There are no Actions for Xway yet, but the interface lets you do most things that are legal in HTML5, so adding a link to an inline DIV using the Link inspector while that DIV is selected will Just Work™.

Please let me know if you have any questions about this approach or the Action (which I wrote).

Walter

Hi Paul,

I think you’re trying to create a gallery of galleries, so it probably is better to create the main gallery (linking to individual galleries) in Xway, using the method I suggested above. I don’t think you can do this in Exhibeo.

Exhibeo does have support for titles and captions, but (as you’ve found) they’re not shown for thumbnails, except when you hover over them with the mouse.

Hi Jeremy,

Your tips have worked. I have a very basic Gallery of Galleries with text underneath. It looks like I can finally start replacing Freeway with xWay.

What other options are available with “float” (Name) “left” (Value)

Is float and “center” or " centre" an option?

I may end up getting Exhibeo as well because the Lightroom gallery web option was an addon and i don’t know how much longer it will be around.

Hi Paul,

Boxes can be floated left or right (there isn’t a float:center option).

Centring images is easy: you can choose centre alignment for the paragraph that contains them. You can also centre single container boxes by giving them “auto” margins (choose Center from the Align popup in the Margins section of the Box Inspector).

If it’s important to centre multiple container boxes, you could look into using CSS flexbox: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks (this involves using extended properties in Xway).

The simplest way I’ve found (but not as straightforward as using Freeway), is to place the text below the image using Photoshop , or similar, saving as a png file and placing that on the Xway page with a link to a gallery page. See: www.louthjazzclub.org.uk/gallery.html
The page doesn’t always appear as expected (hence the gap in the second row), but for me, as it’s not a commercial site, it’s something I’ve learned to live with.
Geoff

Hi Geoff,

You could avoid photoshopping every image by using floated container boxes with images and text (as suggested above).

The reason your page doesn’t display as expected is interesting: there seems to be a nested paragraph that contains the first five images. It shouldn’t be possible for a paragraph to contain another paragraph, but if you send me a cut-down version of your document (with just this page) I can look into it and find a way for you to fix it. This might also help me to figure out how the problem happened.

To create a cut-down document: 1. Duplicate your document (File/Duplicate), 2. Delete other pages (apart from the master page), 3. Save the cut-down document under a new name, 4. Close and reopen the cut-down document, 5. Save the cut-down document a second time. (Steps 4 and 5 are to ensure that images that were used on deleted pages are removed from the document. Previously they were retained by the undo stack, in case the pages were undeleted.)

Can you send me the cut-down document via support at softpress dot com? You don’t need to add any resources, because they’re included in the document package.

Thanks!