rebly-sections 1.0.1 → 1.2.0

package/assets/data/component-library/home-blog-posts-2.liquid

@@ -0,0 +1,393 @@
+{% assign full = section.settings.full %}
+{% assign margin = section.settings.margin | split: ',' %}
+{% assign top = margin[0] %}
+{% assign bottom = margin[1] %}
+
+
+{% assign blogStyle = 'data-blog-slider2' %}
+{% assign column_width = 'grid__item wide--one-third post-large--one-third large--one-half' %}
+
+
+<div class="blog-post home-blog-posts-2" style="margin-top:{{top}}px; margin-bottom:{{bottom}}px;">
+  <div class="{% if section.settings.full %} container-bg {% else %}container{% endif %}">
+    <div class="grid">
+      {% if section.settings.title != blank  %}
+      <div class="section-header section-header--small full-position-{{section.settings.heading_position}}">
+        <div class="border-title wow bounce">
+          {% if section.settings.title != blank %} <h2 style="color:{{ section.settings.title_clr }};">{{ section.settings.title }}</h2>{% endif %}  
+          {% if section.settings.text != blank   %}
+          <p style="color:{{ section.settings.text_clr }};">{{ section.settings.text }}</p>
+          {% endif %}
+        </div>
+      </div>  
+      <div class="dt-sc-hr-invisible-small"></div>
+      {% endif %} 
+    </div>
+    <div class="grid-uniform">  
+      <div class="blog-post-inner style2"> 
+             
+        <div class="home-blog blog-section" {{blogStyle}}>        
+          {% for article in blogs[section.settings.pick_featured_blog].articles   %}   
+          <div class="article-item {{column_width}}">
+            <div class="article content-{{section.settings.content_position}}">
+
+              {% if section.settings.content_position == 'top' %}
+              {% include  'blogDescription' %}
+              {% endif %}
+
+              <div class="article-image">
+                {% if article.image %}
+                <a href="{{ article.url }}">
+                  <img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.title }}" />
+                </a>
+                {% endif %}
+              </div>
+
+              {% if section.settings.content_position == 'right' or section.settings.content_position == 'bottom' or section.settings.content_position == 'overimage' %}
+              {% include  'blogDescription' %}
+              {% endif %}
+
+            </div>  
+          </div>
+          {% else %}
+          {% for i in (1..3) %}
+          <div class="article-item {{column_width}}">
+            <div class="article">
+              <div class="article-image grid__item">               
+                <a href="#">
+                  <img src="//via.placeholder.com/1920x800">
+                </a>             
+              </div>
+              <div class="article-description grid__item">                
+                <div class="article-content">				
+                  <h4><a href="#">Sample post {{ i }}</a></h4>            
+                  <p>Pellentesque posuere orci lobortis scelerisque blandit. Donec id tellus lacinia an...</p>            
+
+                </div>
+                <div class="article-btn">
+                  <a class="btn" href="#">Read more</a>
+                  <p class="comments-count"><i class="far fa-comment"></i>{{i}} Comments</p>                            
+                </div>
+              </div>
+            </div>  
+          </div>       
+          {% endfor %}
+          {% endfor %}          
+        </div>
+
+      
+      </div> 
+    </div>
+  </div>
+</div>
+
+<style>
+
+  .home-blog-type .article-content h4 a { color:{{ section.settings.blog_titlecolor }}  }
+  .home-blog-type .article-content h4 a:hover { color:{{ section.settings.blog_titlehover }}  }
+  .home-blog-type .article-content .comments-count { color:{{ section.settings.blog_commentcolor }}; }
+  .home-blog-type .comments-count:before { background:{{ section.settings.blog_commentcolor }}; }
+  .home-blog-type .article i { color:{{ section.settings.blog_datecolor }}; } 
+  .home-blog-type .article-description .article-btn a { color:{{ section.settings.link_color }}; }
+  .home-blog-type .article-description .article-btn a:hover { color:{{ section.settings.link_hover_color }}; }
+  .home-blog-type .blog-tag .blog-tags { background:{{ section.settings.blog_tag_bgcolor }}; color:{{ section.settings.blog_tagcolor }}; }
+
+  .home-blog-type .link_text { color:{{ section.settings.link_color }}; }
+  .home-blog-type .link_text:hover { color:{{ section.settings.link_hover_color }}; }
+
+  .home-blog-type .btn { background:{{ section.settings.btn_bg_color }}; color:{{ section.settings.btn_color }}; }
+  .home-blog-type .btn:hover { background:{{ section.settings.btn_hover_bg_color }}; color:{{ section.settings.btn_hover_color }}; }
+
+</style>
+
+<script type="text/javascript">
+  window.blog_autoplay = {{ section.settings.autoplay }};
+  window.blog_navigation = {{ section.settings.navigation }};
+  window.blog_pagination = {{section.settings.pagination }};
+  window.blog_slidestoshow = {{section.settings.slidestoshow }};
+
+</script>
+
+{% schema %}
+{
+"name": "Blog Post",
+"class": "index-section home-blog-type",
+"settings": [
+{
+"type": "checkbox",
+"id": "full",
+"label": "Show Full width"
+},
+{
+"type": "text",
+"id": "margin",
+"label": "Style value (Margin)",
+"default":"0,0",
+"info":"Top(px),Bottom(px)"
+},
+
+{
+"type": "text",
+"id": "title",
+"label": "Heading",
+"default": "Heading"
+},
+{
+"type": "color",
+"id": "title_clr",
+"label": "Heading",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "text",
+"label": "Sub Heading",
+"default": "Sub Heading"
+},
+{
+"type": "color",
+"id": "text_clr",
+"label": "Text color",
+"default":"#000"
+},
+{
+"type": "checkbox",
+"id": "heading_image_need",
+"label": "Show Heading Image ?"
+
+},	
+{
+"type": "image_picker",
+"id": "heading_image",
+"label": "Image",
+"info": "Size: 133x56"
+},	
+{
+"type": "select",
+"id": "heading_position",
+"label": "Heading Position",
+"options": [
+{
+"value": "default",
+"label": "Full center"
+},
+{
+"value": "full-left",
+"label": "Full left"
+},
+{
+"value": "full-right",
+"label": "Full right"
+}
+]
+},
+{
+"type": "blog",
+"id": "pick_featured_blog",
+"label": "Select blog"
+},
+
+{
+"type": "checkbox",
+"id": "blog_author_enable",
+"label": "Display Blog author name"
+},
+{
+"type": "checkbox",
+"id": "show_blog_btn",
+"label": "Display Blog button"
+},
+{
+"type": "checkbox",
+"id": "show_featured_date",
+"label": "Display Blog date"
+},
+{
+"type": "checkbox",
+"id": "show_blog_tag",
+"label": "Display Blog tag"
+},
+{
+"type": "color",
+"id": "blog_titlecolor",
+"label": "Blog title color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_titlehover",
+"label": "Blog title hover color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_datecolor",
+"label": "Blog date color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_authorcolor",
+"label": "Blog author color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_commentcolor",
+"label": "Blog comment color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_tag_bgcolor",
+"label": "Blog tag Bg color",
+"default": "#000"
+},
+{
+"type": "color",
+"id": "blog_tagcolor",
+"label": "Blog tag color",
+"default": "#000"
+},
+
+{
+"type": "checkbox",
+"id": "blog_comment",
+"label": "Show Comment"
+},
+{
+"type": "color",
+"id": "blog_comment_text",
+"label": "Comment Color",
+"default": "#000"
+},
+{
+"type": "checkbox",
+"id": "blog_description",
+"label": "Show description"
+},
+{
+"type": "color",
+"id": "blog_desc_clr",
+"label": "Description Color",
+"default": "#000"
+},
+{
+"type": "text",
+"id": "btn",
+
+"label": "Link",
+"default": "Read more"
+},
+{
+"type": "color",
+"id": "link_color",
+"label": "Link Color",
+"default": "#777777"
+},
+{
+"type": "color",
+"id": "link_hover_color",
+"label": "Link Hover Color",
+"default": "#000"
+},
+{
+"type": "checkbox",
+"id": "navigation",
+"label": "Enable Navigaiton",
+"default": true
+},
+{
+"type": "select",
+"id": "navigation_position",
+"label": "Navigation position",
+"options": [      
+{
+"value": "nav-top-left",
+"label": "Top Left"
+},
+{
+"value": "nav-top-right",
+"label": "Top Right"
+},
+{
+"value": "nav-middle",
+"label": "Middle"
+},
+{
+"value": "nav-bottom",
+"label": "Bottom"
+},
+{
+"value": "nav-bottom-left",
+"label": "Bottom Left"
+},
+{
+"value": "nav-bottom-right",
+"label": "Bottom Right"
+}
+],
+"default": "nav-middle"
+},
+{
+"type": "checkbox",
+"id": "autoplay",
+"label": "Carousel Auto Play",
+"default": true
+},
+{
+"type": "checkbox",
+"id": "pagination",
+"label": "Enable Pagination",
+"default": true
+},
+{
+"type": "select",
+"id": "slidestoshow",
+"label": "Slides to show",     
+"options": [ 
+{
+"value": "2",
+"label": "2"
+},
+{
+"value": "3",
+"label": "3"
+}        
+],
+"default": "2"
+},
+{
+"type": "select",
+"id": "content_position",
+"label": "Content Position",
+"options": [      
+{
+"value": "bottom",
+"label": "Bottom"
+},
+{
+"value": "top",
+"label": "Top"
+},
+{
+"value": "right",
+"label": "Right"
+},
+{
+"value": "overimage",
+"label": "Overlay"
+}
+],
+"default": "bottom"
+}
+
+],
+"presets": [
+{
+"name": "Blog Post 2",
+"category": "blog"
+}
+]
+}
+{% endschema %}