Welcome to TalkGraphics.com
Results 1 to 5 of 5

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,912

    Lightbulb Re: First Play With Blocks

    Quote Originally Posted by Chris M View Post
    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:
      Code:
      <div class='one'></div>
      Code:
      <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:
      Code:
      <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:

      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

    5. [For testing - export locally to a folder. In this folder, add latest and its changing contents]


    Click image for larger version. 

Name:	Screenshot 2023-08-19 181128.png 
Views:	79 
Size:	45.5 KB 
ID:	133992

    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:
      Code:
      <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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,791

    Default Re: First Play With Blocks

    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.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •