Improve ghost html snippet for media

src/app/components/media/detail/media-detail.component.html

@@ -40,8 +40,11 @@
             <br>
             <div *ngIf="isImage">
               <span class="has-text-weight-bold">Ghost snippet: </span>
-              <pre class="hljs code-preview">
-                <code [innerHTML]="ghostSnippet"></code>
+              <span class="comment">(Ce code html est fait pour intégrer l'image en taille normal. Pour une taille
+                'wide' ajoutez la classe 'kg-width-wide' à la balise figure. Pour une taille 'full' ajoutez la classe
+                'kg-width-full' à la balise figure)</span>
+              <pre class="hljs code-preview" [innerHTML]="ghostSnippet">
+                <!-- <code ></code> -->
               </pre>
             </div>
           </div>

src/app/components/media/detail/media-detail.component.scss

@@ -29,3 +29,9 @@ figure img {
   padding: 0.5rem;
   margin-top: 0.5rem;
 }
+
+.comment {
+  font-size: 12px;
+  font-style: italic;
+  color: $grey-super-light-color;
+}

src/app/components/media/detail/media-detail.component.ts

@@ -35,13 +35,21 @@ export class MediaDetailComponent implements OnInit {
     return isImageUrl(this.media.url);
   }
 
+  // [WARNING] Keep that weird indentation for correct display on the web page
   get ghostSnippet() {
-    return highlight('html', `
-    <figure class="kg-card kg-image-card kg-card-hascaption">
-      <img src="${this.media.url}" alt="${this.media.alt}" class="kg-image">
-      <figcaption>
-        ${this.media.caption}
-      </figcaption>
-    </figure>`).value;
+    let html;
+    if (this.media.caption) {
+      html = `<figure class="kg-card kg-image-card kg-card-hascaption">
+  <img src="${this.media.url}" alt="${this.media.alt}" class="kg-image">
+  <figcaption>
+    ${this.media.caption}
+  </figcaption>
+</figure>`;
+    } else {
+      html = `<figure class="kg-card kg-image-card">
+  <img src="${this.media.url}" alt="${this.media.alt}" class="kg-image">
+</figure>`;
+    }
+    return highlight('html', html).value;
   }
 }

src/app/components/media/list/media.component.html

@@ -95,10 +95,51 @@
         </div>
         <div class="column is-3 has-text-centered actions">
           <button
-            title="Copier dans le presse-papier le snippet html à copier dans un article ghost pour embarquer l'image"
+            title="Copier dans le presse-papier le snippet html à copier dans un article/page ghost pour embarquer l'image en mode normal"
             class="button copy-button" *ngIf="isImage(item.url)" [ngClass]="{'copied': copiedIndex === i}"
-            (click)="copyGhostHTMLSnippet(item, i)">
-            {{ copiedIndex === i ? 'Copié !' : null }}
+            (click)="copyGhostHTMLSnippet(item, '', i)">
+            <span *ngIf="copiedIndex === i && copiedSize === ''; else imageNormal">Copié !</span>
+            <ng-template #imageNormal>
+              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <g fill="#242b3f" fill-rule="nonzero">
+                  <path d="M2 3a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2H2zm0 12a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2H2z" opacity=".6">
+                  </path>
+                  <path d="M2 5h12a1 1 0 0 1 1 1v4.001a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"></path>
+                </g>
+              </svg>
+            </ng-template>
+          </button>
+          <button
+            title="Copier dans le presse-papier le snippet html à copier dans un article/page ghost pour embarquer l'image en mode wide"
+            class="button copy-button" *ngIf="isImage(item.url)" [ngClass]="{'copied': copiedIndex === i}"
+            (click)="copyGhostHTMLSnippet(item, 'kg-width-wide', i)">
+            <span *ngIf="copiedIndex === i && copiedSize === 'kg-width-wide'; else imageWide">Copié !</span>
+            <ng-template #imageWide>
+              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <g fill="#242b3f" fill-rule="nonzero">
+                  <path d="M6 3a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2H6zm0 12a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2H6z" opacity=".6">
+                  </path>
+                  <path d="M2 5h12a1 1 0 0 1 1 1v4.001a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"></path>
+                </g>
+              </svg>
+            </ng-template>
+          </button>
+          <button
+            title="Copier dans le presse-papier le snippet html à copier dans un article/page ghost pour embarquer l'image en mode full"
+            class="button copy-button" *ngIf="isImage(item.url)" [ngClass]="{'copied': copiedIndex === i}"
+            (click)="copyGhostHTMLSnippet(item, 'kg-width-full', i)">
+            <span *ngIf="copiedIndex === i && copiedSize === 'kg-width-full'; else imageFull">Copié !</span>
+            <ng-template #imageFull>
+              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <g fill="#242b3f" fill-rule="nonzero">
+                  <path d="M0 2a1 1 0 0 1 2 0v12a1 1 0 0 1-2 0V2zm14 0a1 1 0 0 1 2 0v12a1 1 0 0 1-2 0V2z" opacity=".6">
+                  </path>
+                  <path
+                    d="M10.626 7L9.312 5.691a1 1 0 1 1 1.411-1.417l3.029 3.017c.39.389.392 1.02.005 1.412l-3.029 3.059a1 1 0 0 1-1.421-1.407L10.648 9H5.415l1.342 1.355a1 1 0 0 1-1.422 1.407L2.307 8.703a1 1 0 0 1 .005-1.412L5.34 4.274a1 1 0 0 1 1.412 1.417L5.438 7h5.188z">
+                  </path>
+                </g>
+              </svg>
+            </ng-template>
           </button>
           <app-crud-buttons [id]="item._id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
         </div>

src/app/components/media/list/media.component.scss

@@ -7,13 +7,19 @@ img {
 }
 
 .copy-button {
-  width: 50px;
-  background-position: center;
-  background-size: contain;
-  background-image: url('/assets/img/ghost-logo.png');
+  background-color: transparent;
+  border: none;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 
-  &.copied {
-    background-image: unset;
+  svg {
+    height: 15px;
+  }
+
+  svg:hover {
+    g {
+      fill: #3273dc;
+    }
   }
 }
 

src/app/components/media/list/media.component.ts

@@ -23,6 +23,7 @@ export class MediaComponent implements OnInit, OnDestroy {
     continue: 'Supprimer',
   };
   copiedIndex = null;
+  copiedSize = null;
   media: Media[] = [];
   searchChangeSub: Subscription;
 
@@ -93,18 +94,25 @@ export class MediaComponent implements OnInit, OnDestroy {
     return isImageUrl(url);
   }
 
-  copyGhostHTMLSnippet(media: Media, id) {
-    navigator['clipboard'].writeText(`
-    <figure class="kg-card kg-image-card kg-card-hascaption">
-      <img src="${media.url}" alt="${media.alt}" class="kg-image">
-      <figcaption>
-        ${media.caption}
-      </figcaption>
-    </figure>`);
+  copyGhostHTMLSnippet(media: Media, size: string, id) {
+    if (media.caption) {
+      navigator['clipboard'].writeText(`<figure class="kg-card kg-image-card kg-card-hascaption ${size}">
+  <img src="${media.url}" alt="${media.alt}" class="kg-image">
+  <figcaption>
+    ${media.caption}
+  </figcaption>
+</figure>`);
+    } else {
+      navigator['clipboard'].writeText(`<figure class="kg-card kg-image-card ${size}">
+  <img src="${media.url}" alt="${media.alt}" class="kg-image">
+</figure>`);
+    }
     this.copiedIndex = id;
+    this.copiedSize = size;
     setTimeout(
       () => {
         this.copiedIndex = null;
+        this.copiedSize = null;
       },
       3000,
     );