add lazyload

user/themes/figureslibres/js/site.js

@@ -24,10 +24,11 @@ function click_link() {
         success: function(data) {
           $(data).find('#item_list').addClass(cat).insertAfter($this);
           $this.addClass('open');
+
         },
         complete: function(data) {
           console.log('cat', cat);
-            // animate();
+            lazyload();
             click_img(e, $this, $href, url, page, cat, project_name);
         }
       });
@@ -65,10 +66,12 @@ function click_list() {
           $('#item_list.'+cat+' .card-image.open #item').remove();
           $('#item_list.'+cat+' .card-image').removeClass('open');
           $(data).find('#item').addClass(cat).insertAfter($link_card);
+
           $link_card.parent().addClass('open');
 
         },
         complete: function(data) {
+          lazyload();
           // animate();
           marg_item(project_name);
         },
@@ -81,6 +84,7 @@ function click_list() {
         type : 'GET', // Le type de la requête HTTP
         dataType:'html',
         success: function(data) {
+
           $(data).find('#item_list').addClass(cat).insertAfter($link_txt);
           $link_txt.addClass('open');
 
@@ -94,6 +98,7 @@ function click_list() {
         },
         complete: function(data) {
           console.log('cat', cat);
+          lazyload();
 
               var $link_card = $('.card > #'+project_name + ' a');
 
@@ -114,6 +119,7 @@ function click_list() {
                     },
                     complete: function(data) {
                       // animate();
+                      lazyload();
                       marg_item(project_name);
                     },
                   });
@@ -147,12 +153,14 @@ function click_img(e, $this, $href, url, page, cat, project_name) {
           success: function(data) {
             $('#item_list.'+cat+' .card-image.open #item').remove();
             $('#item_list.'+cat+' .card-image').removeClass('open');
-
             $(data).find('#item').addClass(cat).insertAfter($this);
             $this.parent().addClass('open');
             marg_item(project_name);
             anchor($href);
           },
+          complete:function() {
+            lazyload();
+          }
         });
 
       }
@@ -183,10 +191,10 @@ function marg_item(project_name) {
 
   var margin_right =  $item_list.width() - (pos_card + $card.width());
 
-console.log('$card.width()',$card.width());
-console.log('pos_card',pos_card);
+  console.log('$card.width()',$card.width());
+  console.log('pos_card',pos_card);
 
-console.log('$item_list',$item_list.width());
+  console.log('$item_list',$item_list.width());
 
   $item.css('margin-left', '-'+$item_offset +'px');
   // $item.parents('.card').css('margin-right', margin_right);
@@ -228,6 +236,20 @@ function mouseHover() {
 
 };
 
+function lazyload() {
+  $('.lazy').Lazy({
+        // your configuration goes here
+        // scrollDirection: 'vertical',
+        effect: "fadeIn",
+        effectTime: 900,
+        threshold: 0
+        // visibleOnly: true,
+        // onError: function(element) {
+        //     console.log('error loading ' + element.data('src'));
+        // }
+    });
+}
+
 $(document).ready(function($){
   click_link();
   click_list();

user/themes/figureslibres/scss/configurations/_variable.scss

@@ -21,9 +21,9 @@ $txt-figli-m: 1.5rem;
 
 // line-height
 $Flhome-m: 2rem;
-$Wi-m:100%;
-$Wi80-m: calc(( 80% ));
-$Wi33-m: calc(( 100% / 3 ) - (#{$margI} / 2));
+$Wi-m: calc( 100% - 0.5rem);
+$Wi80-m: 80%;
+$Wi33-m: calc(( 100% / 3 ) - 0.5rem);
 
 
 // tablette

user/themes/figureslibres/scss/theme/_blog.scss

@@ -8,9 +8,10 @@
       margin-right: $margI;
     }
     .card-header{
+      z-index: 999;
       display: inline-flex;
       width: 100%;
-      margin-bottom: $marg;
+      // margin-bottom: $marg;
       & > * {
         margin-right: $marg;
       }

user/themes/figureslibres/scss/theme/_mobile.scss

@@ -1,87 +1,4 @@
-@media screen and (max-width: 414px) {
-  body{
-    #start{
-      width: $Wi-m;
-      #text_figli{
-        #item_list{
-          .card{
-            width: $Wi-m;
-            #item{
-              width: calc(100% + (.5rem * 3));
-            }
-          }
-        }
-      }
-    }
-  }
-
-
-  // typographie
-  header{
-    a{
-      font-size: $txt-figli-m;
-      line-height: $Flhome-m;
-    }
-  }
-  .home{
-    p{
-      font-size: $txt-figli-m!important;
-      line-height: $Flhome-m!important;
-    }
-  }
-  .other_projets{
-    h3{
-      font-size: $txt-figli-m;
-    }
-  }
-
-  // mep
-  header{
-    width: calc( #{$Wi-m} - (#{$marg} * 2) );
-  }
-
-  body{
-    #start{
-        width: calc( #{$Wi-m} - (#{$marg} * 2) );
-    }
-    &:not(.home){
-      #start{
-        margin-top: $Flhome;
-      }
-    }
-    .sidebar-right{
-      display: none;
-    }
-  }
-
-  #item_list{
-    .card{
-      width: calc( #{$Wi-m}  )!important;
-      &:nth-child(odd){
-        margin-right: 0;
-      }
-      .card-header{
-        margin-bottom: $marg;
-        & > * {
-          margin-right: $marg;
-        }
-      }
-    }
-  }
-
-  .other_projets{
-    margin-top: $margI;
-    .card{
-      width: $Wi-m;
-      &:nth-child(-1n+3){
-        margin-right: 0;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px)  and (orientation: portrait) {
-
+@media screen and (max-width: 1024px){
   body{
     #start{
       width: $Wi80-m;
@@ -90,184 +7,304 @@
           .card{
             width: $Wi33-m;
             #item{
-              width: calc(300% + (.5rem * 3));
+              width: calc(300% + (.5rem * 2));
             }
           }
         }
       }
     }
   }
-
-  // typographie
-  header{
-    a{
-      font-size: 2.5rem;
-      line-height: 3rem;
-    }
-  }
-  // .home{
-  //   p{
-  //     font-size: $txt-figli-t!important;
-  //     line-height: $Flhome-t!important;
-  //   }
-  // }
-  .other_projets{
-    h3{
-      font-size: $txt-figli-t;
-    }
-  }
-
-  body{
-    &:not(.home){
-      #start{
-        margin-top: 5rem;
-      }
-    }
-  }
-
-  #item_list{
-    .card{
-      width: calc( #{$Wi-m}  );
-      &:nth-child(odd){
-        margin-right: 0;
-      }
-      .card-header{
-        margin-bottom: $marg;
-        & > * {
-          margin-right: $marg;
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 812px) and (orientation: landscape) {
-  // typographie
-  header{
-    a{
-      font-size: $txt-figli-m;
-      line-height: $Flhome-m;
-    }
-  }
-  .home{
-    p{
-      font-size: $txt-figli-m!important;
-      line-height: $Flhome-m!important;
-    }
-  }
-  .other_projets{
-    h3{
-      font-size: $txt-figli-m;
-    }
-  }
-
-  // mep
-  header{
-    width: calc( #{$Wi-m} - (#{$marg} * 2) );
-  }
-
-  body{
-    #start{
-        width: calc( #{$Wi-m} - (#{$marg} * 2) );
-    }
-    &:not(.home){
-      #start{
-        margin-top: $Flhome;
-      }
-    }
-    .sidebar-right{
-      display: none;
-    }
-  }
-
-  #item_list{
-    .card{
-      width: $Wi50;
-      &:nth-child(odd){
-        margin-right: $margI;
-      }
-    }
-  }
-
-  .other_projets{
-    .card{
-      width: $Wi33;
-      &:nth-child(-1n+3){
-        margin-right: $marg;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 910px) and (orientation: portrait) {
-  header{
-    a{
-      font-size: 2.5rem;
-      line-height: 3rem;
-    }
-  }
-  .home{
-    p{
-      font-size: $txt-figli-t!important;
-      line-height: $Flhome-t!important;
-    }
-  }
-  .other_projets{
-    h3{
-      font-size: $txt-figli-t;
-    }
-  }
-  body{
-    &:not(.home){
-      #start{
-        margin-top: 5rem;
-      }
-    }
-  }
 }
 
-@media screen and (max-width: 660px) {
-  header{
-    a{
-      font-size: $txt-figli-m;
-      line-height: $Flhome-m;
-    }
-  }
-  .home{
-    p{
-      font-size: $txt-figli-m!important;
-      line-height: $Flhome-m!important;
-    }
-  }
-  .other_projets{
-    h3{
-      font-size: $txt-figli-m;
-    }
-  }
-
+@media screen and (max-width: 414px) {
   body{
-    &:not(.home){
-      #start{
-        margin-top: $Flhome;
-      }
-    }
-  }
-}
 
-@media screen and (max-width: 1024px) and (orientation: landscape) {
-  body{
     #start{
-      width: $Wi80-m;
+      width: $Wi-m;
       #text_figli{
+        p{
+          font-size: 1.7rem;
+          line-height: 2.3rem;
+        }
         #item_list{
+          width: $Wi-m;
           .card{
-            width: $Wi33-m;
+            width: calc(100%);
+            margin: 0 0 0.5rem 0;
             #item{
-              width: calc(300% + (.5rem * 3));
+              width: 100%;
+              padding: 1rem;
+              .content-title{
+                h2{
+                  font-size: 2rem !important;
+                  line-height: 2.5rem !important;
+                }
+                & > div{
+                  line-height: 1rem;
+                }
+
+              }
             }
           }
         }
       }
     }
+    .sidebar-right{
+      display: none;
+    }
   }
 }
+//   body{
+//     #start{
+//       width: $Wi-m;
+//       #text_figli{
+//         #item_list{
+//           .card{
+//             width: $Wi-m;
+//             #item{
+//               width: calc(100% + (.5rem * 3));
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+//
+//
+//   // typographie
+//   header{
+//     a{
+//       font-size: $txt-figli-m;
+//       line-height: $Flhome-m;
+//     }
+//   }
+//   .home{
+//     p{
+//       font-size: $txt-figli-m!important;
+//       line-height: $Flhome-m!important;
+//     }
+//   }
+//   .other_projets{
+//     h3{
+//       font-size: $txt-figli-m;
+//     }
+//   }
+//
+//   // mep
+//   header{
+//     width: calc( #{$Wi-m} - (#{$marg} * 2) );
+//   }
+//
+//   body{
+//     #start{
+//         width: calc( #{$Wi-m} - (#{$marg} * 2) );
+//     }
+//     &:not(.home){
+//       #start{
+//         margin-top: $Flhome;
+//       }
+//     }
+//     .sidebar-right{
+//       display: none;
+//     }
+//   }
+//
+//   #item_list{
+//     .card{
+//       width: calc( #{$Wi-m}  )!important;
+//       &:nth-child(odd){
+//         margin-right: 0;
+//       }
+//       .card-header{
+//         margin-bottom: $marg;
+//         & > * {
+//           margin-right: $marg;
+//         }
+//       }
+//     }
+//   }
+//
+//   .other_projets{
+//     margin-top: $margI;
+//     .card{
+//       width: $Wi-m;
+//       &:nth-child(-1n+3){
+//         margin-right: 0;
+//       }
+//     }
+//   }
+// }
+//
+// @media screen and (max-width: 768px) {
+//   body{
+//     #start{
+//       width: $Wi80-m;
+//       #text_figli{
+//         #item_list{
+//           .card{
+//             width: $Wi33-m;
+//             #item{
+//               width: calc(300% + (.5rem * 3));
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+//
+//   // typographie
+//   header{
+//     a{
+//       font-size: 2.5rem;
+//       line-height: 3rem;
+//     }
+//   }
+//   // .home{
+//   //   p{
+//   //     font-size: $txt-figli-t!important;
+//   //     line-height: $Flhome-t!important;
+//   //   }
+//   // }
+//   .other_projets{
+//     h3{
+//       font-size: $txt-figli-t;
+//     }
+//   }
+//
+//   body{
+//     &:not(.home){
+//       #start{
+//         margin-top: 5rem;
+//       }
+//     }
+//   }
+//
+//   #item_list{
+//     .card{
+//       width: calc( #{$Wi-m}  );
+//       &:nth-child(odd){
+//         margin-right: 0;
+//       }
+//       .card-header{
+//         margin-bottom: $marg;
+//         & > * {
+//           margin-right: $marg;
+//         }
+//       }
+//     }
+//   }
+// }
+//
+// @media screen and (max-width: 812px) and (orientation: landscape) {
+//   // typographie
+//   header{
+//     a{
+//       font-size: $txt-figli-m;
+//       line-height: $Flhome-m;
+//     }
+//   }
+//   .home{
+//     p{
+//       font-size: $txt-figli-m!important;
+//       line-height: $Flhome-m!important;
+//     }
+//   }
+//   .other_projets{
+//     h3{
+//       font-size: $txt-figli-m;
+//     }
+//   }
+//
+//   // mep
+//   header{
+//     width: calc( #{$Wi-m} - (#{$marg} * 2) );
+//   }
+//
+//   body{
+//     #start{
+//         width: calc( #{$Wi-m} - (#{$marg} * 2) );
+//     }
+//     &:not(.home){
+//       #start{
+//         margin-top: $Flhome;
+//       }
+//     }
+//     .sidebar-right{
+//       display: none;
+//     }
+//   }
+//
+//   #item_list{
+//     .card{
+//       width: $Wi50;
+//       &:nth-child(odd){
+//         margin-right: $margI;
+//       }
+//     }
+//   }
+//
+//   .other_projets{
+//     .card{
+//       width: $Wi33;
+//       &:nth-child(-1n+3){
+//         margin-right: $marg;
+//       }
+//     }
+//   }
+// }
+//
+// @media screen and (max-width: 910px) and (orientation: portrait) {
+//   header{
+//     a{
+//       font-size: 2.5rem;
+//       line-height: 3rem;
+//     }
+//   }
+//   .home{
+//     p{
+//       font-size: $txt-figli-t!important;
+//       line-height: $Flhome-t!important;
+//     }
+//   }
+//   .other_projets{
+//     h3{
+//       font-size: $txt-figli-t;
+//     }
+//   }
+//   body{
+//     &:not(.home){
+//       #start{
+//         margin-top: 5rem;
+//       }
+//     }
+//   }
+// }
+//
+// @media screen and (max-width: 660px) {
+//   header{
+//     a{
+//       font-size: $txt-figli-m;
+//       line-height: $Flhome-m;
+//     }
+//   }
+//   .home{
+//     p{
+//       font-size: $txt-figli-m!important;
+//       line-height: $Flhome-m!important;
+//     }
+//   }
+//   .other_projets{
+//     h3{
+//       font-size: $txt-figli-m;
+//     }
+//   }
+//
+//   body{
+//     &:not(.home){
+//       #start{
+//         margin-top: $Flhome;
+//       }
+//     }
+//   }
+// }
+//

user/themes/figureslibres/scss/theme/_start.scss

@@ -41,7 +41,7 @@ body{
           }
           a{
             display: block;
-            border-radius: 15px;
+            border-radius: 5px;
             overflow: auto;
             img{
               filter: grayscale(1);
@@ -53,6 +53,8 @@ body{
             padding: $marg;
             flex-wrap: wrap;
             display: none;
+            border-bottom-left-radius: 5px;
+            border-bottom-right-radius: 5px;
             & > *{
               font-size: 0.8rem;
               line-height: 1rem;
@@ -70,17 +72,18 @@ body{
             .card-header{
               display: inline-flex;
               position: absolute;
-              transform: translateY(-100%);
+              // transform: translateY(-100%);
+              bottom: 0;
             }
           }
           &:last-of-type{
             vertical-align: baseline!important;
           }
           #item{
-            width: calc( 500% + ( #{$marg} * 5) );
+            width: calc( 500% + ( #{$marg} * 4) );
             padding: 2rem;
             margin-top: $marg;
-            border-radius: 15px;
+            border-radius: 5px;
             .content-title{
               margin: 0 auto 0 auto;
               display: flex;

user/themes/figureslibres/templates/partials/base.html.twig

@@ -22,6 +22,7 @@
 
     {% block javascripts %}
         {% do assets.addJs('jquery', 101) %}
+        {% do assets.addJs('theme://js/jquery.lazy.min.js', {group:'bottom'}) %}
         {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
     {% endblock %}
 

user/themes/figureslibres/templates/partials/blog-item.html.twig

@@ -13,6 +13,6 @@
 
 <div class="card-image">
 {% for image in page.media.images %}
-  {{ image.html }}
+    <img class="lazy" data-src="{{image.url}}" alt="images">
 {% endfor %}
 </div>

user/themes/figureslibres/templates/partials/blog-list-item.html.twig

@@ -6,19 +6,24 @@
     {% set image = page.media.images|first %}
     {% if image %}
         <div id="{{ page.folder }}" class="card-image">
-          <a href="{{ page.url }}">{{ image.html("", "Projet") }}</a>
+          <a href="{{ page.url }}">
+            
+            <div class="card-header">
+              {% if page.header.title %}
+              {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
+              {% endif %}
+              {% if page.header.taxonomy.tag %}
+              {% include 'partials/blog/taxonomy.html.twig' %}
+              {% endif %}
+
+              {% if page.header.date %}
+              {% include 'partials/blog/date.html.twig' %}
+              {% endif %}
+            </div>
+
+            <img class="lazy" data-src="{{image.url}}" alt="Projet">
+
+          </a>
       </div>
     {% endif %}
-    <div class="card-header">
-      {% if page.header.title %}
-        {% include 'partials/blog/title.html.twig' with {title_level: 'h2'} %}
-      {% endif %}
-        {% if page.header.taxonomy.tag %}
-          {% include 'partials/blog/taxonomy.html.twig' %}
-        {% endif %}
-
-        {% if page.header.date %}
-          {% include 'partials/blog/date.html.twig' %}
-        {% endif %}
-    </div>
 </div>