Pictures 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!

This method works great, but… footer does not migrate to after the boxes.
It stays just under the header. Not a deal killer, but irritating. Any notion what’s happening &/or howto correct?

thanks
russell

Hi Russell,

You can add a clear property to your footer box:

  1. Select the footer box
  2. Enter clear (Name) and both (Value) in the Extended Properties section of the Box Inspector

Great & much thanks.

russell

I have a couple dozen thumbnails with text in container boxes.
Looks good,except that 1st box on 2nd line is centered rather than right justified.
https://russelle.net/gallery.html

Any notion what gives & how to fix so that 2nd line is like all the others?

much thanks
russell

Hi Russell,

I’m not sure what’s happening there, but if you send me your Xway document I can take a look at it. You don’t need to send any images separately (they’re contained in the document), just compress the document (Finder > File > Compress) and email it to support at softpress dot com. If it’s more than a few megabytes in size, put it on a file sharing system (e.g. Dropbox) and send me the link.

Jeremy,

Link sent.

russell

Thanks for sending your document. I think that one of the lessons here is that float layouts are tricky. Personally, I would try to avoid floating anything except for images that you want to float next to text. An alternative in this case would be to use a flexbox layout, with wrapping turned on for the flex container. That will be much easier in the next version of Xway, because we are planning to support flexbox layouts directly (no need to use extended properties).

Having said that, here’s how you can fix this issue, while continuing to use floats. The box that is causing the problem is the Africa 2010 box. If you delete that box, the problem goes away. That’s also a general debugging tip: if you have a problem, see if it goes away after you delete things (don’t do this in your actual document - make a copy (File/Duplicate) and use that to experiment).

So what’s different about this box compared to the other boxes? If you look in Xway’s HTML view, you can see that this box is defined as:

         <figure id="africa2010">
            <p class="style10"><img id="kirkmans_310810-1027" src="resources/6_kirkmans_310810-1027-edit-edit-2.jpg" alt="" title="Africa 2010"> <span class="style12"><span class="style13">Africa 2010</span></span></p>
         </figure>

Within the box there is a single paragraph that contains the image and text. The other boxes contain two paragraphs: one containing the image, and another containing the text. E.g.

         <figure id="bristlecones2010">
            <p class="style10"><img id="bristleconepines-8623" src="resources/02bristleconepines-8623-edit.jpg" alt=""></p>
            <p class="style11">Bristlecone Pines 2010</p>
         </figure>

So what you want to do is to add a paragraph before “Africa 2010”: select the lion image, and use the right arrow to put a text cursor after it, then press Return (you could also delete the space that currently occurs before the text). Then, change the top margin of this paragraph to zero (as in the other boxes), and tidy things up a bit by deleting the spans (selecting the parent africa2010 box, and choosing Flatten from the Format menu will do this). Finally, put a cursor back in “Africa 2010” and set the text size to Small in the Paragraph Inspector (again, matching the other boxes).

Now, if you preview your page, you should find that it displays correctly.

I don’t exactly know why this fixes the problem, but (as I said) float layouts are tricky - and that’s one of the reasons Xway doesn’t yet support them directly.

Some other general comments on your page:

  1. There are some nested links in the menu. Xway normally tries to prevent this from happening, but it’s possible for it to happen if you copy/paste text containing links (this should be fixed in the next version of Xway). To fix this, go to your master page, and click on each of the menu items in turn. Then set the Link Type to None in the Link Inspector. If it says None after you’ve done this, choose Undo (there wasn’t a nested link), but if it changes to a different link, leave it like that: you’ve removed the outer link, which is incorrect and isn’t needed.

  2. There’s also an empty menu item before the other menu items. I’m not sure if this is intentional, but if it isn’t, you can delete it.

  3. It’s a good idea to have a main section on your master page. This should contain content that is distinctive to each page (it can be empty on the master page). The problem with adding content directly within the pagediv on each instance page (as you have done) is that when you do this, you are turning off Use Master Content for the pagediv. If you ever decide that you’d like to add another box within the pagediv on the master page (alongside the header and footer boxes) it won’t automatically appear on the instance pages. On the other hand, if you add your page-specific content to a main box that comes from the master page, this will turn off Use Master Content for that box (which is what you want), but it won’t turn it off for the pagediv. You can still add another header/footer/whatever box on the master page (as a child of the pagediv) and it will automatically appear on instance pages.

  4. To add a main box to the master page, select header and insert a box after it. Then choose Main from the Type popup in the Box Inspector. To get your existing content out of the pagediv and into main on an instance page: select one of the boxes inside the pagediv on the instance page, then choose Select All from the Edit menu, then deselect header and footer (by command-clicking on them), and choose Copy or Cut from the Edit menu. Next, turn on Use Master Content for the pagediv (page-wrapper). If you chose Copy rather than Cut earlier, you should see the content disappear (because it doesn’t exist on the master page), but the main box will appear in its place. Put a text cursor inside this box and paste the content back into it.

Fantastic & many thanks!

russell