New options for the portfolio

blueprints/portfolio.yaml

@@ -7,28 +7,46 @@ form:
       fields:
         portfolio:
           type: tab
-          title: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_TAB
+          title: FUTURE.ADMIN.PORTFOLIO.TAB
           fields:
             content_title:
               type: spacer
-              title: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_TITLE
+              title: FUTURE.ADMIN.PORTFOLIO.TITLE
             header.layout:
               type: select
-              label: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_LAYOUT
+              label: FUTURE.ADMIN.PORTFOLIO.LAYOUT.LABEL
               default: standard
               size: medium
               options:
-                medium: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_LAYOUT_TWOCOLS
-                standard: FUTURE.ADMIN.PORTFOLIO.PORTOFOLIO_LAYOUT_THREECOLS   
+                medium: FUTURE.ADMIN.PORTFOLIO.LAYOUT.TWOCOLS
+                standard: FUTURE.ADMIN.PORTFOLIO.LAYOUT.THREECOLS
+            header.thumb_width:
+              type: number
+              label: FUTURE.ADMIN.PORTFOLIO.THUMB_WIDTH
+              help: FUTURE.ADMIN.PORTFOLIO.THUMB_WIDTH_HELP
+              size: small
+              default: 600
+              validate:
+                min: 50
+                max: 1000
+            header.thumb_height:
+              type: number
+              label: FUTURE.ADMIN.PORTFOLIO.THUMB_HEIGHT
+              help: FUTURE.ADMIN.PORTFOLIO.THUMB_HEIGHT_HELP
+              size: small
+              default: 450
+              validate:
+                min: 50
+                max: 1000   
             header.images:
               type: list
               style: vertical
-              label: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_IMAGES
+              label: FUTURE.ADMIN.PORTFOLIO.IMAGES.LABEL
               collapsed: true
               fields:
                 .image:
                   type: pagemediaselect
-                  label: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_IMAGE
+                  label: FUTURE.ADMIN.PORTFOLIO.IMAGES.IMAGE
                   preview_images: true
                   accept:
                   - .png
@@ -37,17 +55,208 @@ form:
                   - .svg
                 .title:
                   type: text
-                  label: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_IMAGE_TITLE
+                  label: FUTURE.ADMIN.PORTFOLIO.IMAGES.IMAGE_TITLE
                 .description:
                   type: text
-                  label: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_IMAGE_DESCRIPTION
-                .thumb:
-                  type: filepicker
-                  folder: 'self@'
-                  label: FUTURE.ADMIN.PORTFOLIO.PORTFOLIO_IMAGE_THUMB
-                  preview_images: true
-                  accept:
-                  - .png
-                  - .jpg
-                  - .gif
-                  - .svg
+                  label: FUTURE.ADMIN.PORTFOLIO.IMAGES.IMAGE_DESCRIPTION
+                .descPosition:
+                  type: select
+                  label: FUTURE.ADMIN.PORTFOLIO.IMAGES.DESCPOSITION.LABEL
+                  help: FUTURE.ADMIN.PORTFOLIO.IMAGES.DESCPOSITION.HELP
+                  default: bottom
+                  size: medium
+                  options:
+                    bottom: FUTURE.ADMIN.PORTFOLIO.IMAGES.DESCPOSITION.BOTTOM
+                    top: FUTURE.ADMIN.PORTFOLIO.IMAGES.DESCPOSITION.TOP
+                    left: FUTURE.ADMIN.PORTFOLIO.IMAGES.DESCPOSITION.LEFT
+                    right: FUTURE.ADMIN.PORTFOLIO.IMAGES.DESCPOSITION.RIGHT
+            
+        portfolio_options:
+          type: tab
+          title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.TAB
+          fields:
+            Effects_title:
+              type: spacer
+              title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.EFFECTS_TITLE
+            header.open_effect:
+              type: select
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OPEN_EFFECT.LABEL
+              default: zoom
+              size: medium
+              options:
+                zoom: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OPEN_EFFECT.ZOOM
+                fade: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OPEN_EFFECT.FADE
+                none: FUTURE.ADMIN.PORTFOLIO.OPTIONS.OPEN_EFFECT.NONE
+            header.close_effect:
+              type: select
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_EFFECT.LABEL
+              default: zoom
+              size: medium
+              options:
+                zoom: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_EFFECT.ZOOM
+                fade: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_EFFECT.FADE
+                none: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_EFFECT.NONE
+            header.slide_effect:
+              type: select
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.SLIDE_EFFECT.LABEL
+              default: slide
+              size: medium
+              options:
+                slide: FUTURE.ADMIN.PORTFOLIO.OPTIONS.SLIDE_EFFECT.SLIDE
+                zoom: FUTURE.ADMIN.PORTFOLIO.OPTIONS.SLIDE_EFFECT.ZOOM
+                fade: FUTURE.ADMIN.PORTFOLIO.OPTIONS.SLIDE_EFFECT.FADE
+                none: FUTURE.ADMIN.PORTFOLIO.OPTIONS.SLIDE_EFFECT.NONE
+            header.more_text:
+              type: text
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.MORE_TEXT
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.MORE_TEXT_HELP
+              default: 'Ver más'
+              size: medium
+            header.more_length:
+              type: number
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.MORE_LENGTH
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.MORE_LENGTH_HELP
+              size: small
+              default: 60
+              validate:
+                min: 0
+                max: 500
+            Actions_title:
+              type: spacer
+              title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.ACTIONS_TITLE
+            header.close_button:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_BUTTON
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_BUTTON_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.touch_navigation:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.TOUCH_NAVIGATION
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.TOUCH_NAVIGATION_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.touch_axis:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.TOUCH_AXIS
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.TOUCH_AXIS_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.keyboard_navigation:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.KEYBOARD
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.KEYBOARD_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.closeOutside:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_OUTSIDE
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.CLOSE_OUTSIDE_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.startAt:
+              type: number
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.MORE_STARTAT
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.MORE_STARTAT_HELP
+              size: small
+              default: 0
+              validate:
+                required: true
+                min: 0
+                max: 1000
+            Styling_title:
+              type: spacer
+              title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.STYLING_TITLE
+            header.width:
+              type: text
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.WIDTH
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.WIDTH_HELP
+              placeholder: 'auto'
+              size: small
+            header.height:
+              type: text
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.HEIGHT
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.HEIGHT_HELP
+              placeholder: 'auto'
+              size: small
+            Behavior_title:
+              type: spacer
+              title: FUTURE.ADMIN.PORTFOLIO.OPTIONS.BEHAVIOR_TITLE
+            header.loop:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.LOOP
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.LOOP_HELP
+              default: 0
+              highlight: 0
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.zoomable:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.ZOOMABLE
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.ZOOMABLE_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.draggable:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAGGABLE
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAGGABLE_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.draggableX:
+              type: number
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAGGABLE_X
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAGGABLE_X_HELP
+              size: small
+              default: 40
+              validate:
+                min: 1
+                max: 500
+            header.draggableY:
+              type: number
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAGGABLE_Y
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAGGABLE_Y_HELP
+              size: small
+              default: 65
+              validate:
+                min: 1
+                max: 500
+            header.dragAuto:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAG_AUTO_SNAP
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.DRAG_AUTO_SNAP_HELP
+              default: 0
+              highlight: 0
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED
+            header.preload:
+              type: toggle
+              label: FUTURE.ADMIN.PORTFOLIO.OPTIONS.PRELOAD
+              help: FUTURE.ADMIN.PORTFOLIO.OPTIONS.PRELOAD_HELP
+              default: 1
+              highlight: 1
+              options:
+                1: PLUGIN_ADMIN.ENABLED
+                0: PLUGIN_ADMIN.DISABLED 

templates/portfolio.html.twig

@@ -5,54 +5,105 @@
 {% set subtitle = page.header.subtitle|raw %}
 {% set columns = page.header.layout == 'standard' ? 'col-4 col-6-medium col-12-small' : 'col-6 col-12-small'  %}
 
+{% block stylesheets %}
+	{{ parent() }}
+	{% do assets.addCss('theme://assets/css/glightbox.min.css') %}
+	{% set styling %}
+	button.gclose.gbtn, button.gnext.gbtn, button.gprev.gbtn {
+			box-shadow: none !important;
+		}
+	{% endset %}
+{% do assets.addInlineCss(styling) %}
+{% endblock %}
+{% set gallery = page.header.images %}
+{% set thumb_w = page.header.thumb_width|default(600) %}
+{% set thumb_h = page.header.thumb_height|default(450) %}
+
 {% block menu %}
-  {% include 'partials/sidebar_right.html.twig' %}
+	{% include 'partials/sidebar_right.html.twig' %}
 {% endblock %}
 
 {% block content %}
 
-  <article class="post">
-    <header>
-      <div class="title">
-        <h2>{{ title }}</h2>
-        {% if subtitle %}
-          <p>{{ subtitle }}</p>
-        {% endif %}
-      </div>
-    </header>
-    {% if image %}
-    <span class="image featured">
-      {{ image.cropZoom(1038,437).loading('lazy').html(title, title)|raw }}
-    </span>
-    {% endif %}
+	<article class="post">
+		<header>
+			<div class="title">
+				<h2>
+					{{ title }}
+				</h2>
+				{% if subtitle %}
+					<p>
+						{{ subtitle }}
+					</p>
+				{% endif %}
+			</div>
+		</header>
+		{% if image %}
+			<span class="image featured">
+				{{ image.cropZoom(1038,437).loading('lazy').html(title, title)|raw }}
+			</span>
+		{% endif %}
 
-    {{ page.content|raw}}
+		{{ page.content|raw}}
 
-    <!-- Portfolio -->
-    {% block portfolio %}
-      <section>
-        <div class="row aln-center">
-          {% for item in page.header.images %}
-            <div class="{{columns}} portfolio_item">
-              <a href="{{page.media[item.image].url}}" class="glightbox" data-width="100vw" data-zoomable="true" data-glightbox='title: {{item.title}}; description: {{item.description|raw}}'>
-                <span class="image fit"><img src="{{page.media[item.thumb].url}}" alt="image"/></span>
-              </a>
-            </div>
-          {% endfor %}
-        </div>
-      </section>
-    {% endblock %}
-  </article>
+		<!-- Portfolio -->
+		{% block portfolio %}
+			<section>
+				<div class="row aln-center">
+					{% for item in gallery %}
+          {% set item_image = page.media[item.image] %}
+					{% set item_title = item.title %}
+					{% set item_desc = item.description %}
+					{% set thumbnail = item_image.cropZoom(thumb_w, thumb_h).attribute('itemprop','http://schema.org/image').html(item_title,item_title) %}
+          <div class="{{columns}} portfolio_item">
+            <a href="{{item_image.url}}" class="glightbox"data-height="{{page.header.height}}" data-width="{{page.header.width}}" data-title="{{item_title}}" data-description="{{item_desc|raw}}" data-desc-position="{{item.descPosition}}" data-zoomable="{{page.header.zoomable}}" data-draggable="{{page.header.draggable}}" data-type="image">
+              <span class="image fit">
+                {{ thumbnail }}
+              </span>
+            </a>
+          </div>
+					{% endfor %}
+				</div>
+			</section>
+		{% endblock %}
+	</article>
 
-  {% if show_sidebar == false %}
-    <section id="footer" class="align-center">
-      {% include 'partials/footer.html.twig' %}
-    </section>
-  {% endif %}
+	{% if show_sidebar == false %}
+		<section id="footer" class="align-center">
+			{% include 'partials/footer.html.twig' %}
+		</section>
+	{% endif %}
 {% endblock %}
 
 {% block sidebar %}
-  {% if show_sidebar == true %}
-    {% include 'partials/sidebar_left.html.twig' %}
-  {% endif %}
+	{% if show_sidebar == true %}
+		{% include 'partials/sidebar_left.html.twig' %}
+	{% endif %}
+{% endblock %}
+
+{% block javascripts %}
+	{{ parent() }}
+	{% set script %}
+	const lightbox = GLightbox({
+	    closeButton: {{ page.header.close_button }},
+	    touchFollowAxis: {{ page.header.touch_axis }},
+	    touchNavigation: {{ page.header.touch_navigation }},
+	    keyboardNavigation:	{{ page.header.keyboard_navigation }},
+	    loop: {{ page.header.loop }},
+	    openEffect: '{{ page.header.open_effect }}',
+	    closeEffect: '{{ page.header.close_effect }}',
+	    slideEffect: '{{ page.header.slide_effect }}',
+	    closeOnOutsideClick: {{ page.header.closeOutside }},
+	    dragToleranceX: {{ page.header.draggableX }},
+	    dragToleranceY: {{ page.header.draggableY }},
+	    preload: {{ page.header.preload }},
+	    dragAutoSnap: {{ page.header.dragAuto }},
+	    moreText: '{{ page.header.more_text }}',
+		startAt: {{ page.header.startAt }},
+	    moreLength: {{page.header.more_length}}
+	});
+	{% endset %}
+
+	{% do assets.addJs('theme://assets/js/glightbox.min.js', {group:'bottom'}) %}
+	{% do assets.addInlineJs(script,{'group':'bottom'}) %}
 {% endblock %}