Why

We replaced all our check-in kiosks from iPads to using Windows thin clients because we found that they are easier to maintain and access remotely to troubleshoot issues across campuses. After doing so, we found that going from a 6" x 8" display to a 24" x 10", there was all this un-utilized real estate that we could put announcements and other information relevant to our congregation on without disrupting the actual function of check-in. So we decided to find a way to use that extra space. We are currently using Rock v15.2, but I am sure this would work on older versions as well.

How

This is a pretty simple process. Here is a step-by-step breakdown:

1. Add an HTML Content block to the "Welcome" page.
   • This can be found under Admin Tools > CMS Configuration > Pages
   • In the Site Map Block on the left, it can be found nested under "Check-in"
   • Add this block to the Main Zone, above the existing Welcome (Welcome) Block








2. Edit the HTML Content Block
• Add this to the HTML Content:

<div class="ad-banner">
  <div class="ad-slides">
    <img src="~~/Assets/Images/YOUR_FIRST_IMAGE.jpg" width="100%" height="auto" class="ad-border">
  </div>

  <div class="ad-slides">
    <img src="~~/Assets/Images/YOUR_SECOND_IMAGE.jpg" width="100%" height="auto" class="ad-border">
  </div>

  <div class="ad-slides">
    <img src="~~/Assets/Images/YOUR_THIRD_IMAGE.jpg" width="100%" height="auto" class="ad-border">
  </div>
</div>
                

• Theoretically, you can have any number of "ad-slides". I am currently running three. To add more, copy and paste the <div class="ad-slides"> as well as the contained <img> tag.
• I have the images stored under the theme.



3. Edit the Pre-HTML
• Add this to the Pre-HTML Area:

<style>
body {
      overflow: hidden;
      margin: 0;
  }

  .ad-banner {
      float: left;
      height: 100vh;
      width: auto;
  }

  .ad-slides img {
      width: 61%;
      height: auto;
      margin-left: -30px;
  }

  .ad-slides {
      display: none;
  }

  .ad-border {
      border-style: solid;
      border-color: #000;
      border-width: 2px;
  }

  /* This is to remove the counts from the check-in kiosks */
  .kioskmanager-counts {
      display: none;
  }
</style>
                

• This is just some basic styling. You can work with the ".ad-slides img" width and margin-left to meet your specific needs.



4. Edit the Post-HTML
• Add this to the Post-HTML Area:

 
<script>
  window.onload = function() {
    setTimeout(function() { // Delay the function to prevent blocking the Start button

        let slideIndex = 0;
        showSlides();

        function showSlides() {
          let i;
          let slides = document.getElementsByClassName("ad-slides");
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          slideIndex++;
          if (slideIndex > slides.length) {
            slideIndex = 1;
          }

          slides[slideIndex - 1].style.display = "block";
          setTimeout(showSlides, 10000); // Change image every 10 seconds
        }

    }, 100);
  };
</script>                   
                

• This is the script that scrolls through the images. You can change the display time of each by modifying the setTimeout(showSlides, **) by the comment: 1000 = 1 second
• The entire script is wrapped in a 1/10th of a second delay so it doesn't interfere with the "Start" button.



5. Create some images.
Use your favorite image editing and creating software to get some images made.
I know this is random, but our images are all sized at 3910px x 4345px and the CSS in the <style> of the Pre-HTML is set for that. So once again, you will have to tweak those numbers to find what works for you, but try to keep the images all the same dimensions for uniformity.



6. Add your images to the YOUR_THEME > Assets > Images folder.
• This can be found under Admin Tools > CMS Configuration > Admin File Manager
• Under "Themes", find the Check-in theme you are currently using and upload your images to the Assets > Images by clicking the "Upload File" icon and selecting the image from your device storage.
• Make a note of where you store your image as well as the file extension (.jpg, .png. etc.) and update the src="" of the <img> tags of the main content.