Wifi Page

This is how the wifi page is laid out.  The minibase is created but does not live on the wifi page. 

There are two embed code apps:

1. Minibase 
   
   <div class="masonry"></div>
   *Replace the APP ID with the id for your app (see below)
   
   
2. Masonry 
   

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
   <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

   <style>
   .masonry
   { /* Masonry container */
   column-count: 4;
   column-gap: 1em;
   width:98%;
   }

   .item
   { /* Masonry bricks or child elements */
   display: inline-block;
   margin: 0 0 1em;
   padding:20px;
   border-radius: 5px;
   background-color: #EEEEEE;
   width: 92%;
   }

   @media only screen and (max-width: 812px)
   {
   .masonry
   {
   column-count: 2;
   }
   }

   @media only screen and (max-width: 480px)
   {
   .masonry
   {
   column-count: 1;
   }
   }

   @media only screen and (max-width: 320px)
   {
   .masonry
   {
   column-count: 1;
   }
   }

   
   .outline
   {
   width: 300px;
   border: 2px solid #844e95;
   padding: 50px;
   margin: 20px;
   }

    

   </style>

    

Create the minibase with the following fields: 

Use the custom view on the minibase.  Edit the source code with the following code.

<style><!--
.sw-flex-item-group {padding-bottom:0px;}
--></style>
<!-- $SW REPEATER$-->
<div class="item">
<h2>$FIELD0</h2>
<hr /><a class="inline" style="color: #005bbb; font-size: 18px;" href="/cms/lib/TX02215173/Centricity/domain/149/wifimaps/$FIELD1.png" data-fancybox="">Parking Map</a><br /><span style="font-size: medium;"><strong> <a class="inline" style="color: #005bbb;" href="$FIELD2" target="_blank" rel="noopener noreferrer">Driving Directions</a></strong></span></div>
<!-- $/SW REPEATER$-->

/cms/lib/TX02215173/Centricity/domain/149/wifimaps/$FIELD1.png is the link to the picture of the school.

 Once the minibase is created, get the App ID: