Added random image card placeholder illustrations

no refs.
- three random illustrations loop as image placeholder illustrations
- increased padding of clickable area for better happy-go-clicky

ghost/admin/app/styles/spirit/_koenig.css

@@ -649,7 +649,7 @@
   opacity: 1.0;
 }
 
-.kg-placeholder-image-summer {
+.kg-placeholder-image {
     width: 152px;
     height: 122px;
 }

ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js

@@ -131,6 +131,9 @@ export default Component.extend({
     didReceiveAttrs() {
         this._super(...arguments);
 
+        let placeholders = ['summer', 'mountains', 'ufo-attack'];
+        this.placeholder = placeholders[Math.floor(Math.random() * placeholders.length)];
+
         // `payload.files` can be set if we have an externaly set image that
         // should be uploaded. Typical example would be from a paste or drag/drop
         if (!isEmpty(this.payload.files)) {

ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs

@@ -50,8 +50,8 @@
                     {{else if uploader.isUploading}}
                         {{uploader.progressBar}}
                     {{else if (not previewSrc payload.src)}}
-                        <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa8 pt6 pb6 kg-image-button" onclick={{action "triggerFileDialog"}}>
-                            {{svg-jar "summer" class="kg-placeholder-image-summer"}}
+                        <button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" onclick={{action "triggerFileDialog"}}>
+                            {{svg-jar this.placeholder class="kg-placeholder-image"}}
                             <span class="mt2 midgrey">Click to select an image</span>
                         </button>
                     {{/if}}

ghost/admin/public/assets/icons/mountains.svg

@@ -0,0 +1 @@
+<svg width="134" height="135" viewBox="0 0 134 135" xmlns="http://www.w3.org/2000/svg"><title>Group 173</title><g stroke="#9BAEB8" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M35.434 9.16C44.87 3.994 55.694 1.055 67.2 1.055c36.583 0 66.284 29.702 66.284 66.285 0 36.582-29.7 66.283-66.284 66.283-36.583 0-66.284-29.7-66.284-66.283 0-12.22 3.314-23.672 9.092-33.506"/><path d="M24.01 4.886c9.846 0 17.84 7.995 17.84 17.84 0 9.847-7.994 17.84-17.84 17.84S6.17 32.574 6.17 22.727c0-9.845 7.994-17.84 17.84-17.84z" stroke-width="1.5"/><path d="M1.598 75.68l7.01-7.938 20.384-7.729 8.021 11.196M26.982 86.606l27.881-41.571 14.692-2.025 12.243-12.246 20.94 32.006M97.117 54.063l13.125-15.386 10.226 16.892 12.617 6.481"/><path d="M81.701 31.513l-4.567 16.414L63.2 50.168l-8.044-4.799M28.906 60.426l-10.052 9.4-16.46 9.75M110.264 39.466l-4.352 14.397-6.813 3.335M4.29 72.954h9.06M1.77 76.146H7.9M6.913 69.892H18.4M58.786 47.145h18.592M61.472 44.198h16.672M71.52 41.148h7.179M74.902 38.194h4.88M77.288 35.303h2.957M11.085 66.873h10.481M18.863 63.852h6.291M63.273 50.268l12.045 9.34 10.39 3.407 4.629 7.316M97.506 54.106h7.31M100.008 50.933h6.486M102.467 47.848h4.952M105.283 44.777h3.354M3.216 83.405s13.854-.669 27.219 4.988c13.364 5.657 23.471 12.137 23.471 12.137M47.563 95.954S64.39 84.025 90.549 82.267c26.158-1.76 41.03.652 41.03.652"/><g stroke-width="1.5"><path d="M106.484 88.541V58.202M106.348 58.407s-3.325 5.105-6.446 6.446M106.348 63.752s-3.325 5.104-6.446 6.445M106.316 68.586s-4.334 5.96-8.403 7.526M106.291 74.127s-5.09 5.96-9.869 7.526M106.558 58.407s3.325 5.105 6.446 6.446M106.558 63.752s3.325 5.104 6.446 6.445M106.59 68.586s4.334 5.96 8.403 7.526M106.614 74.127s5.09 5.96 9.87 7.526M84.635 106.582V77.526M84.504 77.723s-3.184 4.888-6.172 6.173M84.504 82.841s-3.184 4.888-6.172 6.173M84.474 87.47s-4.151 5.709-8.047 7.209M84.45 92.777S79.577 98.485 75 99.985M84.706 77.723s3.183 4.888 6.173 6.173M84.706 82.841s3.183 4.888 6.173 6.173M84.737 87.47s4.15 5.709 8.047 7.209M84.76 92.777s4.875 5.708 9.452 7.208M25.956 118.764V98.566M25.829 98.758s-3.11 4.774-6.028 6.028M25.829 103.756s-3.11 4.774-6.028 6.028M25.799 108.277s-2.5 3.438-5.416 5.623M25.776 113.459s-1.13 1.323-2.805 2.849M26.025 98.758s3.11 4.774 6.028 6.028M26.025 103.756s3.11 4.774 6.028 6.028M26.055 108.277s4.053 5.574 7.858 7.039M26.078 113.459s4.76 5.574 9.23 7.039M66.765 133.543v-30.074M104.85 121.098V109.88M104.722 110.072s-3.11 4.774-6.028 6.028M104.722 115.07s-3.11 4.774-6.028 6.028M104.692 119.591s-4.053 5.575-7.858 7.04M104.919 110.072s3.109 4.774 6.028 6.028M104.919 115.07s1.436 2.205 3.272 4.012M104.949 119.591s.39.538 1.044 1.324M66.583 103.744s-4.448 6.828-8.623 8.623M66.583 110.894s-4.448 6.828-8.623 8.622M66.54 117.36s-5.798 7.975-11.24 10.07M66.508 124.773s-4.13 4.837-8.978 7.966M66.865 103.744s4.447 6.828 8.622 8.623M66.865 110.894s4.447 6.828 8.622 8.622M66.907 117.36s5.798 7.975 11.241 10.07M66.94 124.773s3.968 4.647 8.69 7.778M60.7 88.912V77.016M60.617 76.178s-2.04 3.134-3.957 3.957M60.617 80.423s-2.04 3.133-3.957 3.957M60.598 84.355s-2.66 3.658-5.158 4.62M60.746 76.178s2.041 3.134 3.957 3.957M60.746 80.423s2.041 3.133 3.957 3.957M60.766 84.355s.89 1.98 2.86 3.408M39.394 98.072V75.388M39.292 75.542s-2.485 3.816-4.819 4.819M39.292 79.538s-2.485 3.816-4.819 4.819M39.268 83.152s-3.24 4.456-6.282 5.627M39.25 87.295s-3.806 4.456-7.379 5.627M39.45 75.542s2.485 3.816 4.819 4.819M39.45 79.538s2.485 3.816 4.819 4.819M39.474 83.152s3.24 4.456 6.282 5.627M39.491 87.295s3.807 4.456 7.38 5.627"/></g><g opacity=".6"><path d="M15.347 88.073h3.286M15.347 102.314h3.286M7.747 95.674h3.285M33.102 102.426h1.588M23.803 95.785h3.286M47.46 117.496h3.286M47.46 102.537h3.286M39.86 125.097h3.286M54.32 125.097h.964M54.32 109.673h.964M39.86 110.138h3.286M63.517 102.648h.964M55.916 96.008h3.286M79.574 117.72h3.285M71.973 96.12h1.643M95.63 88.63h3.286M95.63 117.83h3.286M95.63 102.871h3.286M88.03 125.431h3.285M88.03 110.472h3.285M111.686 88.741h3.286M111.686 102.983h3.286M104.086 96.342h3.286M104.086 110.583h3.286M127.743 88.853h2.102M120.142 96.453h3.287"/></g></g></svg>

ghost/admin/public/assets/icons/summer.svg

@@ -1 +1 @@
-<svg width="174" height="120" viewBox="0 0 174 120" xmlns="http://www.w3.org/2000/svg"><title>Group</title><g fill="none" fill-rule="evenodd"><path d="M.5.5h173v119H.5z"/><path d="M141.406 39.442c2.345 6.345 3.626 13.203 3.626 20.359 0 32.453-26.347 58.8-58.8 58.8-32.453 0-58.801-26.347-58.801-58.8 0-5.592.782-11.003 2.244-16.13m13.228-23.605C53.655 8.35 69.092 1 86.232 1c8.964 0 17.462 2.01 25.068 5.604" stroke="#9BAEB8"/><g opacity=".6" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"><path d="M28.25 67.39c1.17-.677 1.966-1.134 3.137-1.134 4.495 0 8.99 6.742 13.485 6.742.256 0 .512-.022.768-.063m3.392-1.466c3.108-1.989 6.217-5.213 9.325-5.213 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.486-6.742 4.495 0 8.99 6.742 13.485 6.742 4.495 0 8.99-6.742 13.485-6.742 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.485-6.742 1.747 0 3.216 1.018 4.963 2.263M29.134 73.677c.75-.314 1.502-.502 2.253-.502 4.495 0 8.99 6.742 13.485 6.742.643 0 1.287-.138 1.93-.375m3.328-1.9c2.742-1.957 5.485-4.467 8.227-4.467 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.486-6.742 4.495 0 8.99 6.742 13.485 6.742 4.495 0 8.99-6.742 13.485-6.742 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.485-6.742 1.292 0 2.584.557 3.876 1.35M31.387 80.934c4.495 0 8.99 6.743 13.485 6.743 1.088 0 2.176-.395 3.264-.994m3.236-2.196c2.329-1.744 4.657-3.553 6.985-3.553 4.495 0 8.99 6.743 13.485 6.743 4.496 0 8.99-6.743 13.486-6.743 4.495 0 8.99 6.743 13.485 6.743 4.495 0 8.99-6.743 13.485-6.743 4.495 0 8.99 6.743 13.485 6.743 4.496 0 8.99-6.743 13.485-6.743.599 0 1.197.12 1.796.327"/></g><path d="M37.5 91.958h97.95" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"/><g opacity=".6" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"><path d="M62.934 98.943h2.915M62.934 111.576h2.915M56.191 105.685h2.915M77.178 99.042h2.915M77.178 111.675h2.915M70.435 105.784h2.915M91.422 99.14h2.914M91.422 111.774h2.914M84.679 105.883h2.915M105.665 99.24h2.915M105.665 111.873h2.915M98.923 105.982h2.915M119.91 99.338h2.915M113.166 106.08h2.916"/></g><path d="M124.204 2.259c12.425 0 22.513 10.088 22.513 22.513 0 12.426-10.088 22.514-22.513 22.514-12.426 0-22.514-10.088-22.514-22.514 0-12.425 10.088-22.513 22.514-22.513zM40.658 45.534l9.62 52.937 3.57.033-9.607-53.532" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 54.092s4.315-6.154 9.489-7.083c5.173-.929 11.36 3.341 11.36 3.341s4.234-6.14 9.488-7.083c5.254-.942 11.36 3.341 11.36 3.341s4.276-6.147 9.488-7.082c5.213-.936 11.36 3.34 11.36 3.34s4.885-6.256 9.488-7.082c4.604-.826 11.36 3.341 11.36 3.341S65.225 15.665 38.02 20.548C10.813 25.431 1 54.092 1 54.092z" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.138 49.682s.187-10.218 3.941-17.137c3.754-6.918 8.836-8.89 12.421-11.407" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M63.025 42.198s-3.728-9.515-9.654-14.696c-5.926-5.182-14.612-6.364-15.871-6.364M38.507 21.138l4.027 24.802" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
+<svg width="174" height="120" viewBox="0 0 174 120" xmlns="http://www.w3.org/2000/svg"><title>Group</title><g fill="none" fill-rule="evenodd"><path d="M.5.5h173v119H.5z"/><path d="M141.406 39.442c2.345 6.345 3.626 13.203 3.626 20.359 0 32.453-26.347 58.8-58.8 58.8-32.453 0-58.801-26.347-58.801-58.8 0-5.592.782-11.003 2.244-16.13m13.228-23.605C53.655 8.35 69.092 1 86.232 1c8.964 0 17.462 2.01 25.068 5.604" stroke="#9BAEB8"/><g opacity=".6" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"><path d="M28.25 67.39c1.17-.677 1.966-1.134 3.137-1.134 4.495 0 8.99 6.742 13.485 6.742.256 0 .512-.022.768-.063m3.392-1.466c3.108-1.989 6.217-5.213 9.325-5.213 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.486-6.742 4.495 0 8.99 6.742 13.485 6.742 4.495 0 8.99-6.742 13.485-6.742 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.485-6.742 1.747 0 3.216 1.018 4.963 2.263M29.134 73.677c.75-.314 1.502-.502 2.253-.502 4.495 0 8.99 6.742 13.485 6.742.643 0 1.287-.138 1.93-.375m3.328-1.9c2.742-1.957 5.485-4.467 8.227-4.467 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.486-6.742 4.495 0 8.99 6.742 13.485 6.742 4.495 0 8.99-6.742 13.485-6.742 4.495 0 8.99 6.742 13.485 6.742 4.496 0 8.99-6.742 13.485-6.742 1.292 0 2.584.557 3.876 1.35M31.387 80.934c4.495 0 8.99 6.743 13.485 6.743 1.088 0 2.176-.395 3.264-.994m3.236-2.196c2.329-1.744 4.657-3.553 6.985-3.553 4.495 0 8.99 6.743 13.485 6.743 4.496 0 8.99-6.743 13.486-6.743 4.495 0 8.99 6.743 13.485 6.743 4.495 0 8.99-6.743 13.485-6.743 4.495 0 8.99 6.743 13.485 6.743 4.496 0 8.99-6.743 13.485-6.743.599 0 1.197.12 1.796.327"/></g><path d="M37.5 91.958H49m3.648 0h82.802" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"/><g opacity=".6" stroke="#9BAEB8" stroke-linecap="round" stroke-linejoin="round"><path d="M62.934 98.943h2.915M62.934 111.576h2.915M56.191 105.685h2.915M77.178 99.042h2.915M77.178 111.675h2.915M70.435 105.784h2.915M91.422 99.14h2.914M91.422 111.774h2.914M84.679 105.883h2.915M105.665 99.24h2.915M105.665 111.873h2.915M98.923 105.982h2.915M119.91 99.338h2.915M113.166 106.08h2.916"/></g><path d="M124.204 2.259c12.425 0 22.513 10.088 22.513 22.513 0 12.426-10.088 22.514-22.513 22.514-12.426 0-22.514-10.088-22.514-22.514 0-12.425 10.088-22.513 22.514-22.513zM40.658 45.534l9.62 52.937 3.57.033-9.607-53.532" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M1 54.092s4.315-6.154 9.489-7.083c5.173-.929 11.36 3.341 11.36 3.341s4.234-6.14 9.488-7.083c5.254-.942 11.36 3.341 11.36 3.341s4.276-6.147 9.488-7.082c5.213-.936 11.36 3.34 11.36 3.34s4.885-6.256 9.488-7.082c4.604-.826 11.36 3.341 11.36 3.341S65.225 15.665 38.02 20.548C10.813 25.431 1 54.092 1 54.092z" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.138 49.682s.187-10.218 3.941-17.137c3.754-6.918 8.836-8.89 12.421-11.407" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M63.025 42.198s-3.728-9.515-9.654-14.696c-5.926-5.182-14.612-6.364-15.871-6.364M38.507 21.138l4.027 24.802" stroke="#9BAEB8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g></svg>