improved gallery template

Classes/Components/LineList.php

@@ -54,18 +54,20 @@ public function render(){
         $pager = new Pagerfanta(
                 new ContentSearchAdapter($query, $this->controller->getRepository()->getSearchService())
         );
+
+        $limit = isset($this->parameters['limit'])?$this->parameters['limit']:$this->controller->getContainer()->getParameter('project.line_list.limit');
 
-        $pager->setMaxPerPage($this->controller->getContainer()->getParameter('project.line_list.limit'));
+        $pager->setMaxPerPage($limit);
         $pager->setCurrentPage($request->get('page', 1));
 
         // $list = $searchService->findContent($query);
         $content = $this->controller->getRepository()
                 ->getContentService()
                 ->loadContentByContentInfo($location->getContentInfo());
 
-
+        $template = isset($this->parameters['template'])?$this->parameters['template']:'TuteiBaseBundle:parts:line_list.html.twig';
         return $this->controller->render(
-                        'TuteiBaseBundle:parts:line_list.html.twig', array(
+                        $template, array(
                     'location' => $location,
                     'content' => $content,
                     'pager' => $pager

Resources/config/twig.yml

@@ -4,6 +4,8 @@ globals:
     siteaccess:
         site:
             language: eng-GB
+        siteadmin:
+            language: eng-GB
         por:
             language: por-BR
 

Resources/public/css/lightbox.css

@@ -0,0 +1,202 @@
+/* line 7, ../sass/lightbox.sass */
+body:after {
+  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
+  display: none;
+}
+
+/* line 11, ../sass/lightbox.sass */
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  opacity: 0.8;
+  display: none;
+}
+
+/* line 20, ../sass/lightbox.sass */
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+}
+/* line 28, ../sass/lightbox.sass */
+.lightbox .lb-image {
+  display: block;
+  height: auto;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+}
+/* line 32, ../sass/lightbox.sass */
+.lightbox a img {
+  border: none;
+}
+
+/* line 35, ../sass/lightbox.sass */
+.lb-outerContainer {
+  position: relative;
+  background-color: white;
+  *zoom: 1;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+}
+/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+.lb-outerContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* line 44, ../sass/lightbox.sass */
+.lb-container {
+  padding: 4px;
+}
+
+/* line 47, ../sass/lightbox.sass */
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0%;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+/* line 56, ../sass/lightbox.sass */
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url(../images/loading.gif) no-repeat;
+}
+
+/* line 63, ../sass/lightbox.sass */
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+/* line 71, ../sass/lightbox.sass */
+.lb-container > .nav {
+  left: 0;
+}
+
+/* line 74, ../sass/lightbox.sass */
+.lb-nav a {
+  outline: none;
+}
+
+/* line 77, ../sass/lightbox.sass */
+.lb-prev, .lb-next {
+  width: 49%;
+  height: 100%;
+  cursor: pointer;
+  /* Trick IE into showing hover */
+  display: block;
+}
+
+/* line 84, ../sass/lightbox.sass */
+.lb-prev {
+  left: 0;
+  float: left;
+}
+/* line 87, ../sass/lightbox.sass */
+.lb-prev:hover {
+  background: url(../images/prev.png) left 48% no-repeat;
+}
+
+/* line 90, ../sass/lightbox.sass */
+.lb-next {
+  right: 0;
+  float: right;
+}
+/* line 93, ../sass/lightbox.sass */
+.lb-next:hover {
+  background: url(../images/next.png) right 48% no-repeat;
+}
+
+/* line 96, ../sass/lightbox.sass */
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  *zoom: 1;
+  width: 100%;
+  -moz-border-radius-bottomleft: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
+.lb-dataContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+/* line 103, ../sass/lightbox.sass */
+.lb-data {
+  padding: 0 4px;
+  color: #bbbbbb;
+}
+/* line 106, ../sass/lightbox.sass */
+.lb-data .lb-details {
+  width: 85%;
+  float: left;
+  text-align: left;
+  line-height: 1.1em;
+}
+/* line 111, ../sass/lightbox.sass */
+.lb-data .lb-caption {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1em;
+}
+/* line 115, ../sass/lightbox.sass */
+.lb-data .lb-number {
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+  font-size: 12px;
+  color: #999999;
+}
+/* line 121, ../sass/lightbox.sass */
+.lb-data .lb-close {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url(../images/close.png) top right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+}
+/* line 130, ../sass/lightbox.sass */
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}

Resources/views/content/gallery/full.html.twig

@@ -14,6 +14,8 @@
         {{ render( controller( "tutei:showComponent", 
                                    { 'name': 'LineList',
                                      'parameters': { 'location': location,
+                                                     'limit':9,
+                                                     'template': 'TuteiBaseBundle:parts:gallery_list.html.twig',
                                                      'request': app.request } } ) ) }}             
         </div>
     </div>

Resources/views/content/image/line.html.twig

@@ -8,14 +8,19 @@
                 <a href="{{ path( location ) }}" title="{{ location.contentInfo.name }}">{{ ez_render_field( content, 'name', { lang: language } ) }}</a>
             </h2>
         </div>
+
 
         {% if content.fields.image is defined %}
+        {% set image_alias = ez_image_alias( content.getField('image'), content.versionInfo,  'original' ) %}
+
+        <a href="{{ asset( image_alias.uri ) }}" data-lightbox="gallery">
         {{ ez_render_field(content, 'image', {
                                         parameters:{ alias:'small' },
                                         attr:{ class:'block_item', custom_attribute:'value' }
                                      }
                   )
-        }}
+        }}</a>
+
         {% endif %} 
     </div>
 </div>

Resources/views/pagelayout.html.twig

@@ -33,6 +33,7 @@
             Not using bootstrap-theme.min.css -->
         {% stylesheets 
             "bundles/tuteibase/css/bootstrap.min.css"
+            "bundles/tuteibase/css/lightbox.css"
             "bundles/tuteibase/css/project.css"
             filter='cssrewrite' %}
         <link rel="stylesheet" href="{{ asset_url }}" />
@@ -159,6 +160,7 @@
 
         {% javascripts
             "bundles/tuteibase/js/bootstrap.min.js"
+            "bundles/tuteibase/js/lightbox-2.6.min.js"
             "bundles/tuteibase/js/project.js"
         %}
         <script type="text/javascript" src="{{ asset_url }}"></script>

Resources/views/parts/gallery_list.html.twig

@@ -0,0 +1,26 @@
+{% set columns = 3 %}
+{% set column_width = 12 // columns %}
+
+{% if pager|length() > 0 %}
+    <section class="content-view-children">
+        <div class="row">  
+        {% for item in pager %}             
+
+            {% if loop.index0 > 0 and loop.index0 % columns == 0 %}
+            </div>
+            <div class="row">
+            {% endif %}
+            <div class="col-md-{{ column_width }}">
+                {{ render_esi( controller( 'ez_content:viewLocation', {'locationId': item.contentInfo.mainLocationId, 'viewType': 'line'} ) ) }}
+            </div>   
+        {% endfor %}
+        </div>
+    </section>
+
+    {% if pager.haveToPaginate() %}
+        <div class="pagination-centered">
+            {{ pagerfanta( pager, 'twitter_bootstrap_translated', {'routeName': location} ) }}
+        </div>
+    {% endif %}
+
+{% endif %}