First Play With Blocks

[Chris M]

I have a simple 3-page site to make. The objective is that one page will be updated every week or so by adding/removing pictures, with a single line of text underneath that contains a link. The text remains the same, the link changes. Simple and as near Noddy proof as it can be, as the person(s) who will be doing the edits have 0.01% interest in this mundane part of the job.

I skip off into the OCC: Modular Websites > Web Blocks > Text and import 21. Text (2c) This will be the section edited weekly.
I edit the text to a single line under both picture holders, drop the pre-sized pictures in, and all is looking good. The ongoing procedure would be 'copy block, change pics, change link, publish'.
Problem: The text box comes with 2 lines of headings and 5 lines of body text as examples. Removing all but the top line leaves a tall, blank text box that I can see no way of reducing. This leaves an overly large gap in the mobile variant.

This next problem is something I can work around/bodge, as the page will be static and not edited, but I'd still like to know how to do it properly.
OCC > Modular Websites > Web Blocks > Get In Touch (Contact) > 16. Contact (1c) How do I change the logos on the buttons?
Also, again, how do I reduce the height of the text box (above the buttons). If I remove all the text, the box remains, and I'm left with ugly spaces above and below the round profile picture.

>>> Blocks.xar <<<

[Acorn]

Chris, I have mangled your design around (on purpose) to get the best outcome and sadly it is not pretty.

What Xara has done is decided you are not capable enough to alter its WB.
So it has invented a Layout Group that you cannot edit.

What I do is green bar select the WB and Ungroup.
Next, in P&L gallery select the Layout group and Ungroup.
Make changes.
Select all the required components and Arrange > Create WB.

Do the same for the Variant.

Move the WB up or down and check the Main/Variant follows.


BETTER
Design your own WB layout and ignore the Xara ones.

Acorn

[Chris M]

Thank you for confirming. This is only the second site out of 23 that the owner requires partial control themselves. I'll just use Coffeecup's software instead.

[Acorn]

Thank you for confirming. This is only the second site out of 23 that the owner requires partial control themselves. I'll just use Coffeecup's software instead.

For this site, I have a Xara approach that even a noobie can handle if they can use Notepad and move and rename images.

I'll have to rework a CMS I was building to make it fit but here goes: Blocks.xar
<style>
.one {
background: url('latest/ImageOne.png') no-repeat center center fixed;
}
.two {
background: url('latest/ImageTwo.png') no-repeat center center fixed;
}
.one, .two {
background-size: cover;
width: 100%;
height:100%;
}
</style>

1. Each changing image is now a Placeholder with simple HTML code:
   

   <div class='one'></div>

   <div class='two'></div>

2. Main & Variant(s) share this identical HTML - automatically in a Web Block
3. The Website head has CSS that replaces the background of these Placeholder images:
   

   <style>
   .one {
     background: url('latest/ImageOne.png') no-repeat center center fixed; 
   }
   .two {
     background: url('latest/ImageTwo.png') no-repeat center center fixed; 
   }
   .one, .two {
     background-size: cover;
     width: 100%;
     height:100%;
   }
   </style>

   I will deal with the changing Link after this detail
4. You create a separate folder (latest) on the server at the same level as the published HTML files. Give the customer edit on this for changing:
5. 
   
   1. changelink.txt with contents - const latestlink = 'https://duckduckgo.com'; - advise the customer to only replace and save the web address (in bold)
   2. ImageOne.png - I used PNG to allow easy use of transparency - advise the customer to only replace the image but keep the exact same image filename; used images can be kept if renamed
   3. ImageTwo.png - I used PNG to allow easy use of transparency - advise the customer to only replace the image but keep the exact same image filename; used images can be kept if renamed
   
   
6. [For testing - export locally to a folder. In this folder, add latest and its changing contents]

LINK

1. <script src="latest/changelink.txt"></script>, also in Website Head, accesses changelink.txt and add a JavaScript variable, latestlink, into your rendered page.
2. In Website Body:
   

   <script>
   document.querySelectorAll('a[href*="latest/changelink.txt"]').forEach( (link) => {
     link.href = latestlink;
   });
   </script>

3. Last thing, make sure the Link is set to open in a new window/tab.

The customer is only shown details regarding Paragraph 5.

Acorn

[Chris M]

Thank you for all the trouble you went to, but I just used different software. The job's all done.

Using Coffecup made more sense in this case anyway, it's not SAAS and image/link changing is simple.