Insert images using a loop.

image_share.css

@@ -1 +1,6 @@
 /* CSS declarations go here */
+.thumbnail {
+    min-height:500px;
+    max-height:500px;
+
+}

image_share.html

@@ -12,7 +12,7 @@
 <template name="images">
   <div class="row">
     {{#each images}}
-      <div class="col-xs-12 col-md-4">
+      <div class="col-xs-12 col-md-3">
         <div class="thumbnail">
 
           <img class="js-image" src="{{img_src}}" alt="{{img_alt}}" />

image_share.js

@@ -1,5 +1,5 @@
+// this is image_share.js
 Images = new Mongo.Collection("images");
-Meteor._debug(Images.find().count());
 
 if (Meteor.isClient) {
   let imgData = [

startup.js

@@ -1,18 +1,14 @@
 if (Meteor.isServer) {
   Meteor.startup(function () {
     if (Images.find().count() === 0) {
-      Images.insert({
-        "img_src": "laptops.jpg",
-        "img_alt": "some laptops on a table"
-      });
-      Images.insert({
-        "img_src": "bass.jpg",
-        "img_alt": "a bass player"
-      });
-      Images.insert({
-        "img_src": "beard.jpg",
-        "img_alt": "some musicians with beards"
-      });
-    }
+      for (let i = 1; i < 23; i++) {
+        Images.insert({
+          "img_src": "img_" + i + ".jpg",
+          "img_alt": "image number " + i
+        });
+      } // end of for loop
+      Meteor._debug(Images.find().count());
+    } // end of if have no images.
   });
+
 }