All Pictures Page | Judge.me

All Pictures Page

Only works for the default theme and the align theme. If you are using the leex theme it will not work yet. We are working on it.

Before this you will need to activate the All Reviews Page. So in the app admin go to Settings -> SEO -> All Reviews Page.

If we hide all the text inside the all reviews page we will only display images. Thus one can use it as summary of pictures inside reviews. Please go here to see an example here. Also please note that this page can be used simultaneously with the All Reviews Page.

Here is what you need to do.

Go to Shopify Admin -> Online Store -> Themes -> Edit Code -> Templates -> Add a new template. Select page and write any name you want. (in the picture bellow we call it pict_gallery).

Inside the new template add this code:

<div class='jdgm-all-pictures-page'>
  <div class="page clearfix jdgm-all-reviews-page">
    <div class="jdgm-all-reviews-page__wrapper">
      <h1 class="jdgm-all-reviews-page__title">{{ page.title }}</h1>
      <div class='jdgm-all-reviews-page__description'>{{ page.content }}</div>

      {% include 'judgeme_all_reviews' %}
    </div>
  </div>
</div>

<script>
  setInterval(function(){ if(window.jdgm){jdgm.$(window).scroll();} }, 100);
</script>

Now all you need to do is to add the css to hide all the unneeded text. So find any file used to store css in the assets folder of the theme, (usually a file ending with either .css.liquid or .scss.liquid ). In the example bellow we place the css inside a file called theme.scss.liquid.



.jdgm-all-pictures-page * {
    font-size: 0 !important;
  }
.jdgm-all-pictures-page .jdgm-rev__header {
   display: none !important;
 }
.jdgm-all-pictures-page .jdgm-rev__title {
   display: none !important;
 }
.jdgm-all-pictures-page  .jdgm-rev__body {
   display: none !important;
 }
  
.jdgm-all-pictures-page  .jdgm-rev__actions {
   display: none !important;
 }
  
  
.jdgm-all-pictures-page .jdgm-rev__reply {
   display: none !important;
 }
  
.jdgm-all-pictures-page  .jdgm-quest {
    border-top: none !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
    display: inline;
    
  }
  
.jdgm-all-pictures-page   .jdgm-rev {
    border-top: none !important;
    padding-top: 0px !important;
    margin-top: 0px !important;
    display: inline;
    
  }
  
.jdgm-all-pictures-page  .jdgm-rev__pic-img {
    height: 100% !important;
  }
  
.jdgm-all-pictures-page  .jdgm-all-reviews__header {
    clear:both;
  } 
.jdgm-all-pictures-page  .jdgm-rev__custom-form  {
    display:inline;
  }
  
.jdgm-all-pictures-page  .jdgm-rev__pics {
    display:inline;
    white-space: normal !important;  
  } 

.jdgm-all-pictures-page  .jdgm-all-reviews-widget:before {
    display: block;
    content: '';
    clear: both;
  }
  
  
.jdgm-all-pictures-page   .jdgm-all-reviews-widget:after {
    display: block;
    content: '';
    clear: both;
  }
  
  
.jdgm-all-pictures-page  .jdgm-all-reviews__body:before {
    display: block;
    content: '';
    clear: both;
  }
  
.jdgm-all-pictures-page  .jdgm-all-reviews__body:after {
    display: block;
    content: '';
    clear: both;
  }
  
.jdgm-all-pictures-page  .jdgm-rev__content {
    display: inline;
}

  
  
.jdgm-all-pictures-page  .jdgm-rev  .jdgm-rev__content {
    margin-left: 0 !important;
}
  
.jdgm-all-pictures-page   .jdgm-rev__content {
    margin-left: 0 !important;
}
  
.jdgm-all-pictures-page  .jdgm-rev  .jdgm-rev__actions {
    width: 0 !important;
    margin-left: 0 !important;
}
  
.jdgm-all-pictures-page .jdgm-rev  .jdgm-rev__reply {
    width: 0 !important;
    margin-left: 0 !important;
}
  
  
  
  
.jdgm-all-pictures-page  .jdgm-all-reviews__body .jdgm-rev {
    margin: 0 !important;
    padding-bottom: 0 !important;
}
  
  
.jdgm-all-pictures-page  .jdgm-revs-tab__reviews .jdgm-rev {
    margin: 0 !important;
    padding-bottom: 0 !important;
}
  




Now all that is left is to create a new page and make it use the new template. In Shopify Admin still in Online Store click on Pages -> Add Page. Complete the title and then in the bottom right corner choose the new template you created. Now save it.