ugly boy

public/css/w0bmcustom.css

@@ -4279,3 +4279,13 @@ pre {
     color: white;
     text-shadow: 1px 1px 1px black;
   }
+
+  .holocene {
+    height: 190px;
+    background-size: cover;
+  }
+
+  .metacene {
+    height: 190px;
+    background-size: cover;
+  }

public/js/w0bmscript.js

@@ -526,13 +526,15 @@ var alertrm = function ($) {
 };
 alertrm(jQuery);
 
-$('#categories').imagesLoaded(function () {
+// this added a nice looking effect to how the tems would load up and display on the page, sadly the items are positioned elements with this script
-    $('#categories').isotope({
+// which makes it not so nice to work it. sry belst :D
-        itemSelector: '.category',
+// $('#categories').imagesLoaded(function () {
-        percentPosition: true,
+//     $('#categories').isotope({
-        layoutMode: 'masonry'
+//         itemSelector: '.category',
-    });
+//         percentPosition: true,
-});
+//         layoutMode: 'masonry'
+//     });
+// });
 
 $(function() {
     $('[data-toggle="popover"]').popover({

resources/views/layout1/categories.blade.php

@@ -3,11 +3,21 @@
     <div class="page-header">
         <h3>Categories</h3>
     </div>
-    <div class="" id="categories">
+    <div class="extraction_point" id="categories">
         @foreach($categories as $category)
-            <div id="category_box_{{$category->shortname}}" class="col-sm-6 col-md-4 category">
+            <div id="new_category_box_{{$category->shortname}}" class="col-sm-6 col-md-4 category">
                 <div class="thumbnail">
-                    <img src="{{ asset('/images/cat/' . $category->shortname . '.webp') }}" alt="{{$category->name}}">
+                    <?php
+                        $noise = '/images/cat/' . $category->shortname . '.jpg';
+                        $blah = asset($noise);
+                        $fourofour = 'images/cat/' . '404' . '.jpg' ;
+                        $blub = asset($fourofour);
+                        if (file_exists(getcwd() . '/' . $noise)) {
+                            echo "<div class='holocene' style='background-image: url($blah)'></div>";
+                        } else {
+                            echo "<div class='metacene' style='background-image: url($blub)'></div>";
+                        }
+                    ?>
                     <div class="caption">
                         <h3>{{$category->name}} <small>{{$category->videos()->count()}}</small></h3>
                         <p>{{$category->description}}</p>