Repeating page sections using the loop elements

A need often arises in web design to repeat blocks of code or content in a web page. It can often be desirable if the contents of those blocks can be edited too. Loops are a powerful tool in WebYep, to make the creation of repeating code or content all the more easier for website authors to work with. In this tutorial you'll learn how to create a WebYep Loop, comprising of an image and title, within a paragraph.

Please use a website with WebYep installed for this tutorial (see installation for details). A general understanding of HTML code and working with a code editor is assumed.

Creating the page, inserting the WebYep Elements

  1. Create a new document 'wy_loop.php'. Please don't work on unnamed/unsaved documents! Create the file and immediately save it under the name "wy_loop.php" before continuing.
  2. Add some basic 'boilerplate' HTML code in the page, to define the DOCTYPE, head and body regions.
  3. Add the WebYep Init Code to the top of the page.
  4. Add a WebYep Logon element in the page body.
  5. Remaining in the page body, insert a pair of empty paragraph tags (<p> and </p>). For our test, we'll turn this new paragraph block into a repeating section.
  6. Position the cursor between these new paragraph tags and insert both an Image Element and a Short Text element, together in this same paragraph.
  7. Position the cursor above the paragraph, and add an opening loop element:
    <?php foreach ((new WYLoopElement())->aLoopIDs("Fieldname") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); // WebYepV2 ?>
  8. And after the closing paragraph tag, add a closing loop element:
    <?php $webyep_oCurrentLoop->loopEnd(); } unset($_SESSION["loopid"]); // WebYepV2 ?>

Configuring the WebYep elements

  1. Within the opening WebYep loop element change its fieldname to "Special Offers" like this:
    <?php foreach ((new WYLoopElement())->aLoopIDs("Special Offers") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); // WebYepV2 ?>
  2. Update the Image element. Enter "Product Image" as the fieldname:
    <?php webyep_image("Product Image", false, '', '', '_self', 100, 100, false, 900, 600, 600, 270); // WebYepV2 ?>
  3. Update the Short Text element. Enter "Product Title" as the fieldname:
    <?php webyep_shortText("Product Title", false, 550, 240); // WebYepV2 ?>

Testing the page

Please make sure you have transferred the webyep-system folder to your web server and have prepared WebYep (see installation for details).

  1. Transfer the page (wy_loop.php) to your web server (upload via FTP or copy it into your local sever directory).
  2. Open the page in your web browser by entering the appropriate address (URL), like this:
    https://example.com/wy_loop.php
  3. Click the lock icon in the page (the WebYep Logon Button).
  4. When the logon window pops up, enter the username and password you configured when installing WebYep (default is username 'admin' and no password).
  5. Click the edit buttons to upload an image file ("Product Image") and enter some text ("Product Title").
  6. Then click the '+' icon to add more loop blocks.
    Click the trash icon to remove whole loop blocks, click the 'up' and 'down' icons to rearrange the blocks.

In this example the loop block contains only WebYep Elements, but it can contain any content, including static HTML code (like text or images) and WebYep elements.

Loop not working?

Occasionally the loop may not work in some configurations. In earlier versions of WebYep, it was suggested that this code gets placed after the opening <body> tag in the page: 

<?php unset($_SESSION["loopid"]); ?>

This may still work to help resolve problems of the loop not working, within certain situations.