replaced coollightbox src by watermarked img

web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls

@@ -148,9 +148,15 @@ type Image {
   url: String!
   alt: String
   style_minicard: ImageStyle
+  style_minicard_url: String
   style_cardmedium: ImageStyle
+  style_cardmedium_url: String
   style_cardfull: ImageStyle
+  style_cardfull_url: String
   style_articlecardmedium: ImageStyle
+  style_articlecardmedium_url: String
+  style_hd: ImageStyle
+  style_hd_url: String
 }
 
 type ImageStyle {

web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php

@@ -457,24 +457,80 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase {
         ->map('style', $builder->fromValue('card_medium_half'))
       );
 
+    $registry->addFieldResolver('Image', 'style_minicard_url',
+      $builder->compose(
+        $builder->produce('image_derivative')
+          ->map('entity', $builder->fromParent())
+          ->map('style', $builder->fromValue('card_medium_half')),
+        $builder->callback(function($parent, $args){
+            return $parent['url'];
+          })
+      ));
+
     $registry->addFieldResolver('Image', 'style_cardmedium',
       $builder->produce('image_derivative')
         ->map('entity', $builder->fromParent())
         ->map('style', $builder->fromValue('card_medium'))
       );
 
+    $registry->addFieldResolver('Image', 'style_cardmedium_url',
+      $builder->compose(
+        $builder->produce('image_derivative')
+          ->map('entity', $builder->fromParent())
+          ->map('style', $builder->fromValue('card_medium')),
+        $builder->callback(function($parent, $args){
+            return $parent['url'];
+          })
+      ));
+
     $registry->addFieldResolver('Image', 'style_cardfull',
       $builder->produce('image_derivative')
         ->map('entity', $builder->fromParent())
         ->map('style', $builder->fromValue('card_full'))
       );
 
+    $registry->addFieldResolver('Image', 'style_cardfull_url',
+      $builder->compose(
+        $builder->produce('image_derivative')
+          ->map('entity', $builder->fromParent())
+          ->map('style', $builder->fromValue('card_full')),
+        $builder->callback(function($parent, $args){
+            return $parent['url'];
+          })
+      ));
+
     $registry->addFieldResolver('Image', 'style_articlecardmedium',
       $builder->produce('image_derivative')
         ->map('entity', $builder->fromParent())
         ->map('style', $builder->fromValue('article_card_medium'))
       );
 
+    $registry->addFieldResolver('Image', 'style_articlecardmedium_url',
+      $builder->compose(
+        $builder->produce('image_derivative')
+          ->map('entity', $builder->fromParent())
+          ->map('style', $builder->fromValue('article_card_medium')),
+        $builder->callback(function($parent, $args){
+            return $parent['url'];
+          })
+      ));
+
+    $registry->addFieldResolver('Image', 'style_hd',
+      $builder->produce('image_derivative')
+        ->map('entity', $builder->fromParent())
+        ->map('style', $builder->fromValue('hd'))
+      );
+
+    $registry->addFieldResolver('Image', 'style_hd_url',
+      $builder->compose(
+        $builder->produce('image_derivative')
+          ->map('entity', $builder->fromParent())
+          ->map('style', $builder->fromValue('hd')),
+        $builder->callback(function($parent, $args){
+            return $parent['url'];
+          })
+      ));
+
   }
 
   // __   ___    _         _    _      _

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1835,7 +1835,7 @@ article.card {
     display: inline-block;
     vertical-align: top;
     width: 205px;
-    margin: 0 13px 0 0; }
+    margin: 0 13px 13px 0; }
 
 #main-content > article.article aside.linked-materials h3.field__label {
   font-size: 1em;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -998,7 +998,7 @@ article.card{
         display: inline-block;
         vertical-align: top;
         width:$column_width;
-        margin:0 $column_goutiere 0 0;
+        margin:0 $column_goutiere $column_goutiere 0;
       }
     }
     h3.field__label{

web/themes/custom/materiotheme/vuejs/api/gql/article.fragment.gql

@@ -14,67 +14,31 @@ fragment ArticleFields on Article {
   body
   showroom {
     id
-    uuid
     name
   }
   tags {
     id
-    uuid
     name
   }
   thesaurus {
     id
-    uuid
     name
   }
   linked_materials {
     id
     title
-    memo
-    body
+    short_description
     images {
-      id
       url
-      alt
-      style_minicard{
-        width
-        height
-        url
-      }
-      style_cardmedium{
-        width
-        height
-        url
-      }
-      style_cardfull{
-        width
-        height
-        url
-      }
+      style_cardmedium_url
+      style_hd_url
     }
   }
   images {
     id
     url
     alt
-    style_minicard{
-      width
-      height
-      url
-    }
-    style_cardmedium{
-      width
-      height
-      url
-    }
-    style_cardfull{
-      width
-      height
-      url
-    }
     style_articlecardmedium{
-      width
-      height
       url
     }
   }

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -3,11 +3,11 @@
     <header
       @click="openModalCard"
     >
-      <h1>{{ item.title }}</h1>
+      <h1 v-if="isloggedin">{{ item.title }}</h1>
       <h4>{{ item.short_description }}</h4>
-      <span class="ref">{{ item.reference }}</span>
+      <span v-if="isloggedin" class="ref">{{ item.reference }}</span>
     </header>
-    <nav class="tools">
+    <nav class="tools" v-if="isloggedin">
       <section class="tool flags">
         <span class="btn mdi mdi-folder-outline"/>
         <div class="tool-content">
@@ -21,7 +21,7 @@
                 :collid="coll.id"
                 @click.prevent="onFlagActionCard"
               >
-                {{ coll.name }}
+              {{ coll.name }}
               </span>
             </li>
           </ul>
@@ -36,7 +36,7 @@
         <img
           class="lazy"
           v-lazy="index"
-          :data-src="img.style_cardmedium.url"
+          :data-src="img.style_cardmedium_url"
           :title="img.title"
         />
         <img
@@ -47,9 +47,10 @@
       </figure>
     </section>
     <CoolLightBox
+      v-if="isloggedin"
       :items="item.images"
       :index="lightbox_index"
-      srcName="url"
+      srcName="style_hd_url"
       :loop="true"
       @close="lightbox_index = null">
     </CoolLightBox>
@@ -77,7 +78,8 @@ export default {
   },
   computed: {
     ...mapState({
-      flagcolls: state => state.User.flagcolls
+      flagcolls: state => state.User.flagcolls,
+      isloggedin: state => state.User.isloggedin
     })
   },
   methods: {
@@ -116,15 +118,17 @@ export default {
       }
     },
     openModalCard (e) {
-      this.$modal.show(
-        ModalCard,
-        { item: this.item },
-        {
-          draggable: true,
-          width: '850px',
-          height: '610px'
-        }
-      )
+      if(this.isLoggedin){
+        this.$modal.show(
+          ModalCard,
+          { item: this.item },
+          {
+            draggable: true,
+            width: '850px',
+            height: '610px'
+          }
+        )
+      }
     }
   }
 }

web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue

@@ -287,7 +287,7 @@ export default {
         });
       }
 
-      console.log('this.content.lightbox_items', this.lightbox_items);
+      // console.log('this.content.lightbox_items', this.lightbox_items);
 
       // update main page title
       this.$store.commit('Common/setPagetitle', article.title)
@@ -296,32 +296,12 @@ export default {
     },
     onPrevNext(a){
       // console.log('clicked on next', this.prevnext.next);
-      // let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
       let alias = a.replace(/^.?\/blabla\//g, '')
       this.$router.push({
         name:`article`,
         params: { alias:alias }
-        // query: { uuid: this.prevnext.next.uuid }
       })
     },
-    // onNext(){
-    //   // console.log('clicked on next', this.prevnext.next);
-    //   let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')
-    //   this.$router.push({
-    //     name:`article`,
-    //     params: { alias:alias }
-    //     // query: { uuid: this.prevnext.next.uuid }
-    //   })
-    // },
-    // onPrev(){
-    //   // console.log('clicked on prev', this.prevnext.next);
-    //   let alias = this.prevnext.prev.view_node.replace(/^.?\/blabla\//g, '')
-    //   this.$router.push({
-    //     name:`article`,
-    //     params: { alias:alias }
-    //     // query: { uuid: this.prevnext.prev.uuid }
-    //   })
-    // },
     setLightboxIndex(index) {
       this.lightbox_index = index
     }

web/themes/custom/materiotheme/vuejs/store/modules/blabla.js

@@ -35,16 +35,6 @@ export default {
   // actions
   actions: {
     getItems ({ dispatch, commit, state }) {
-      // if(!state.contenttype){
-      //   REST.get('/entity/node_type/article?_format=json', {})
-      //   .then(({ data }) => {
-      //     console.log('blabla REST contenttype : data', data);
-      //   })
-      //   .catch(( error ) => {
-      //       console.warn('Issue with blabla contenttype', error)
-      //       Promise.reject(error)
-      //   })
-      // }
       return REST.get(`/blabla_rest?_format=json&page=${state.page}`, {})
         .then(({ data }) => {
           console.log('blabla REST: data', data)
@@ -70,8 +60,8 @@ export default {
     getItemIndex ({ dispatch, commit, state }, nid) {
       console.log('getItemIndex nid', nid)
       return state.items.findIndex((e) => {
-        // console.log('findIndex', e, nid);
-        return e.nid === nid
+        console.log('findIndex', e.nid, nid);
+        return e.nid == nid
       })
     },
     getPrevNextItems ({ dispatch, commit, state }, index) {