basic functionalty of 'box' works now

app/modules/cachedimage.php

         } else {
             $out = $this->original;
         }
-        return $out;
+        return "/".$out;
     }
 
     function is_image($path) {

app/modules/filesinfolders.php

         return $string;
     }
     function content_element_dispatcher($string) {
-        
+        $f3 = \Base::instance();
         $md = new \Parsedown();
         $f0 = 0;
         // find occorances of {| keyword |}
                 break;
 
             case 'box':
-                $type =  $this->$request[1];
+                array_shift($request); //get rid of identifier
+                $type = array_shift($request);
                 $pics = explode(":",array_shift($body));
                 $pic = $pics[0];
                 $pic_hover = count($pics) > 1 ? $pics[1] : $pic; 
                 $cap2 = array_shift($body);
                 $cap1_hover = array_shift($body);
                 $cap2_hover = array_shift($body);
-                $body = implode("\n",$body);
-                if (count($request) >= 4) {
-                    $body=str_replace([$request[2],$request[3]],["{|","|}"],$body);
-                    $body=$this->content_element_dispatcher($body);
+                $pic = new CachedImage($this->folder.$pic);
+                $pic_hover = new CachedImage($this->folder.$pic_hover);
+                switch($type) {
+                case 'download':
+                    $file = "/".$this->folder.implode(":",$request);
+                    $link='href="'.$file.'" download ';
+                    break;
+                case 'lightbox':
+                    $body = implode("\n",$body);
+                    if (count($request) >= 2) {
+                        $body=str_replace([$request[0],$request[1]],["{|","|}"],$body);
+                        $body=$this->content_element_dispatcher($body);
+                    }
+                    $hash=md5($body);
+                    $add=sprintf('<div id="%s" class="content_elment_box_body">%s</div>',
+                                 $hash,
+                                 $md->text($body));
+                    $link='href="#" data-featherlight="#'.$hash.'" ';
+                    break;
+                case 'internal':
+                    $dest=implode(":",$request);
+                    $link=sprintf('href="%s" ',$f3->get('SITE_URL')."/".$dest);
+                    break;
+                case 'external':
+                    $dest=implode(":",$request);
+                    $link=sprintf('href="%s" target="_blank"',$dest);
+                    break;
+                default:
+                    $link='href="#"';
+                    break;
                 }
-                $new=sprintf("pic: %s (%s)<br>cap1: %s (%s)<br>cap2: %s (%s)<br>body:<br>%s",
-                             $pic,$pic_hover,$cap1,$cap1_hover,$cap2,$cap2_hover,$body
+                $new=sprintf("<div><a class=\"content_element_box\" %s><div class=\"content_element_box\">
+<div class=\"image\">
+<img class=\"standard\" src=\"%s\" /><img class=\"hover\" src=\"%s\" />
+</div>
+<div class=\"caption standard\">
+  <span class=\"first\">%s</span><br>
+  <span class=\"second\">%s</span>
+</div>
+<div class=\"caption hover\">
+  <span class=\"first\">%s</span><br>
+  <span class=\"second\">%s</span>
+</div></div></a>%s</div>",
+                             $link,
+                             $pic->get_src(400),
+                             $pic_hover->get_src(400),
+                             $cap1,$cap2,
+                             $cap1_hover,$cap2_hover,
+                             $add
                 );
-                
                 break;
 
             case 'calendar':
                 $conf = array('path', $this->folder);
                 $v = $this->read_config();
                 $cal = new \Modules\CCalendar($v,$conf);
-                //$cal->dispatch();
-                
-                
-                //$conf = array('path', $this->folder);
-                //$v = $this->read_config();
                 
                 $new=sprintf("<div class=\"calendar\">%s</div>",
                              $cal);
                     }
                     
                     $new=sprintf("<div class='image-container %s'>"
-                                 ."<div class=\"media %s\"><a href=\"/%s\" data-featherlight=\"image\"><img src=\"/%s\" alt=\"user supplied image\" /></a></div>"
-                                 ."<img src=\"/%s\" style=\"display:none;\" alt=\"user supplied image\" />"
+                                 ."<div class=\"media %s\"><a href=\"%s\" data-featherlight=\"image\"><img src=\"%s\" alt=\"user supplied image\" /></a></div>"
+                                 ."<img src=\"%s\" style=\"display:none;\" alt=\"user supplied image\" />"
                                  ."<div class=\"caption\">%s</div>"
                                  ."</div>",
                                  $class,
                 break;
 
             case 'page':
-                $folder = $this->folder.$request[1]."/";
+                array_shift($request);
+                $target = array_shift($request);
+                $class = array_shift($request);
+                $folder = $this->folder.$target."/";
                 $f = new \Modules\FilesInFolders($folder);
                 $f->prepare_files();
                 $f->fill_content();
-                $new = implode("\n",$f->content['default']);
+                $new = sprintf('<div class="content_element_page %s">%s</div>',
+                        $class,
+                        implode("\n",$f->content['default']));
                 break;
                 
             case 'youtube':

rsc/sass/_freaCMSfeatures.scss

+
+// content elements:
+// box
+a.content_element_box{
+    .hover {
+            display: none;
+    }
+    &:hover {
+        .hover {
+            display: inline;
+        }
+        .standard {
+            display: none;
+        }
+    }
+    div.content_element_box {
+        display: inline-block;
+        position: relative;
+        height: 200px;
+        margin:1em;
+        
+        .image { height:100%; }
+        img {
+            height: 100%;
+            width: auto;
+        }
+        .caption {
+            position: absolute;
+            width: 100%;
+            bottom:0;
+            right:0;
+            background: rgba(255,255,255,0.8);
+        }
+    }
+}
+.content_elment_box_body {
+    display: none;
+}
+ 
+// lightbox -----------------------
+
+.featherlight .featherlight-content {
+    background: none;
+    overflow: visible;
+    .featherlight-close-icon {
+        color:$white;
+        background: none;
+        top: -10px;
+        right: -10px;
+        font-size: 1.5em;
+    }
+    @media #{$view_mobile} {
+        iframe { width:100%; height:100%;}
+    }
+}
+
+//--------------------------lightbox
+ 
+ 
+// mobile navigation--------------
+#main-nav {
+    @media #{$view-mobile} {
+        display: none;
+    }
+}
+
+#mobile-nav {
+    display: none;
+    @media #{$view-mobile} {
+        display: block;
+        a.menu-toggle {
+            display: block;
+        }
+    }
+    .the_list {
+        display: none;
+    }
+    &.open .the_list {
+        display: block;
+        position: fixed;
+        top:0;
+        left:0;
+        z-index:99;
+        background: rgba(255,255,255,0.9);
+        height:100%;
+        width: 100%;
+        overflow: scroll;
+    }
+    a.menu-toggle {
+        position: fixed;
+        top:0;
+        right:0;
+        width:50px;
+        height:50px;
+        z-index:100;
+        cursor: pointer;
+        background: rgba(255,255,255,0.9);
+        background-image: url('menu-icon.png');
+        background-position: top;
+        background-size: 100%;
+    }
+    &.open a.menu-toggle {
+        background-position: bottom;
+    }
+}
+// --------------mobile navigation

rsc/sass/_structure.scss

 //    padding:0;
 }
 
-#main-nav {
-    //dev:
-//    display: none;
-    @media #{$view-mobile} {
-        display: none;
-    }
-}
 
-.featherlight .featherlight-content {
-    background: none;
-    overflow: visible;
-    .featherlight-close-icon {
-        background: none;
-        top: -10px;
-        right: -10px;
-        font-size: 1.5em;
-    }
-    @media #{$view_mobile} {
-        iframe { width:100%; height:100%;}
-    }
-}
 
-/////////////////////////////////////////////////////////////////////
-#mobile-nav {
-    display: none;
-    @media #{$view-mobile} {
-        display: block;
-        a.menu-toggle {
-            display: block;
-        }
-    }
-    .the_list {
-        display: none;
-    }
-    &.open .the_list {
-        display: block;
-        position: fixed;
-        top:0;
-        left:0;
-        z-index:99;
-        background: rgba(255,255,255,0.9);
-        height:100%;
-        width: 100%;
-        overflow: scroll;
-    }
-    a.menu-toggle {
-        position: fixed;
-        top:0;
-        right:0;
-        width:50px;
-        height:50px;
-        z-index:100;
-        cursor: pointer;
-        background: rgba(255,255,255,0.9);
-        background-image: url('menu-icon.png');
-        background-position: top;
-        background-size: 100%;
-    }
-    &.open a.menu-toggle {
-        background-position: bottom;
-    }
-}
 

rsc/sass/main.scss

 
 
 @import "colours";
+@import "freaCMSfeatures";
 //@import "fonts";
 @import "structure";
 @import "design";

rsc/style.css

 a {
   color: #777; }
 
-@media only screen and (max-width: 750px) {
-  #main-nav {
-    display: none; } }
+a.content_element_box .hover {
+  display: none; }
+a.content_element_box:hover .hover {
+  display: inline; }
+a.content_element_box:hover .standard {
+  display: none; }
+a.content_element_box div.content_element_box {
+  display: inline-block;
+  position: relative;
+  height: 200px;
+  margin: 1em; }
+  a.content_element_box div.content_element_box .image {
+    height: 100%; }
+  a.content_element_box div.content_element_box img {
+    height: 100%;
+    width: auto; }
+  a.content_element_box div.content_element_box .caption {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.8); }
+
+.content_elment_box_body {
+  display: none; }
 
 .featherlight .featherlight-content {
   background: none;
   overflow: visible; }
   .featherlight .featherlight-content .featherlight-close-icon {
+    color: #fff;
     background: none;
     top: -10px;
     right: -10px;
       width: 100%;
       height: 100%; } }
 
+@media only screen and (max-width: 750px) {
+  #main-nav {
+    display: none; } }
+
 #mobile-nav {
   display: none; }
   @media only screen and (max-width: 750px) {

rsc/style.css.map

 {
 "version": 3,
-"mappings": "AAUA,CAAE;EACE,UAAU,EAAC,UAAU;;ACJzB,IAAK;EACD,KAAK,EALH,IAAI;EAMN,UAAU,EARP,IAAI;;AAWX,CAAE;EACE,KAAK,EAVH,IAAI;;ACMN,yCAAuB;EAH3B,SAAU;IAIF,OAAO,EAAE,IAAI;;AAIrB,mCAAoC;EAChC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,OAAO;EACjB,4DAAyB;IACrB,UAAU,EAAE,IAAI;IAChB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,KAAK;EAEpB,yCAAuB;IACnB,0CAAO;MAAE,KAAK,EAAC,IAAI;MAAE,MAAM,EAAC,IAAI;;AAKxC,WAAY;EACR,OAAO,EAAE,IAAI;EACb,yCAAuB;IAF3B,WAAY;MAGJ,OAAO,EAAE,KAAK;MACd,yBAAc;QACV,OAAO,EAAE,KAAK;EAGtB,qBAAU;IACN,OAAO,EAAE,IAAI;EAEjB,0BAAiB;IACb,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,GAAG,EAAC,CAAC;IACL,IAAI,EAAC,CAAC;IACN,OAAO,EAAC,EAAE;IACV,UAAU,EAAE,wBAAqB;IACjC,MAAM,EAAC,IAAI;IACX,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,MAAM;EAEpB,yBAAc;IACV,QAAQ,EAAE,KAAK;IACf,GAAG,EAAC,CAAC;IACL,KAAK,EAAC,CAAC;IACP,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,GAAG;IACX,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,wBAAqB;IACjC,gBAAgB,EAAE,oBAAoB;IACtC,mBAAmB,EAAE,GAAG;IACxB,eAAe,EAAE,IAAI;EAEzB,8BAAqB;IACjB,mBAAmB,EAAE,MAAM;;ACjEnC,CAAE;EACE,eAAe,EAAE,IAAI;EACrB,OAAQ;IACJ,eAAe,EAAE,SAAS",
-"sources": ["sass/main.scss","sass/_colours.scss","sass/_structure.scss","sass/_design.scss"],
+"mappings": "AAUA,CAAE;EACE,UAAU,EAAC,UAAU;;ACJzB,IAAK;EACD,KAAK,EALH,IAAI;EAMN,UAAU,EARP,IAAI;;AAWX,CAAE;EACE,KAAK,EAVH,IAAI;;ACCN,4BAAO;EACC,OAAO,EAAE,IAAI;AAGjB,kCAAO;EACH,OAAO,EAAE,MAAM;AAEnB,qCAAU;EACN,OAAO,EAAE,IAAI;AAGrB,6CAAwB;EACpB,OAAO,EAAE,YAAY;EACrB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,MAAM,EAAC,GAAG;EAEV,oDAAO;IAAE,MAAM,EAAC,IAAI;EACpB,iDAAI;IACA,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;EAEf,sDAAS;IACL,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,IAAI;IACX,MAAM,EAAC,CAAC;IACR,KAAK,EAAC,CAAC;IACP,UAAU,EAAE,wBAAqB;;AAI7C,wBAAyB;EACrB,OAAO,EAAE,IAAI;;AAKjB,mCAAoC;EAChC,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,OAAO;EACjB,4DAAyB;IACrB,KAAK,ED5CN,IAAI;IC6CH,UAAU,EAAE,IAAI;IAChB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,KAAK;EAEpB,yCAAuB;IACnB,0CAAO;MAAE,KAAK,EAAC,IAAI;MAAE,MAAM,EAAC,IAAI;;AASpC,yCAAuB;EAD3B,SAAU;IAEF,OAAO,EAAE,IAAI;;AAIrB,WAAY;EACR,OAAO,EAAE,IAAI;EACb,yCAAuB;IAF3B,WAAY;MAGJ,OAAO,EAAE,KAAK;MACd,yBAAc;QACV,OAAO,EAAE,KAAK;EAGtB,qBAAU;IACN,OAAO,EAAE,IAAI;EAEjB,0BAAiB;IACb,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;IACf,GAAG,EAAC,CAAC;IACL,IAAI,EAAC,CAAC;IACN,OAAO,EAAC,EAAE;IACV,UAAU,EAAE,wBAAqB;IACjC,MAAM,EAAC,IAAI;IACX,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,MAAM;EAEpB,yBAAc;IACV,QAAQ,EAAE,KAAK;IACf,GAAG,EAAC,CAAC;IACL,KAAK,EAAC,CAAC;IACP,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,IAAI;IACX,OAAO,EAAC,GAAG;IACX,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,wBAAqB;IACjC,gBAAgB,EAAE,oBAAoB;IACtC,mBAAmB,EAAE,GAAG;IACxB,eAAe,EAAE,IAAI;EAEzB,8BAAqB;IACjB,mBAAmB,EAAE,MAAM;;ACtGnC,CAAE;EACE,eAAe,EAAE,IAAI;EACrB,OAAQ;IACJ,eAAe,EAAE,SAAS",
+"sources": ["sass/main.scss","sass/_colours.scss","sass/_freaCMSfeatures.scss","sass/_design.scss"],
 "names": [],
 "file": "style.css"
 }