Last active
September 13, 2017 11:27
-
-
Save hemant-tivlabs/13ddc78f0c2c557d18858b778658b8d9 to your computer and use it in GitHub Desktop.
Simple yet flexible Shopify section to add a grid of buckets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% assign bucket_width_class = 'one-half' %} | |
{% if section.settings.columns == '3' %} | |
{% assign bucket_width_class = 'one-third' %} | |
{% elsif section.settings.columns == '4' %} | |
{% assign bucket_width_class = 'one-quarter' %} | |
{% endif %} | |
<section class="wrapper main-content{% if section.settings.width == 'width-full' %} full-width{% endif %}" style="{% | |
if section.settings.width == 'width-1200' or section.settings.width == 'width-custom' | |
%}max-width: {% if section_settings.width == 'width-custom' %}{{ section.settings.custom_width }}{% else %}1200{% endif %}px;{% | |
else %}{% endif %}"> | |
<div id="buckets-{{ section.id }}" class="section-buckets"> | |
<div class="buckets grid columns-{{ section.settings.columns }}" style="{% if section.settings.item_spacing != blank %}margin-left: -{{ section.settings.item_spacing }}px;{% endif %}"> | |
{% if section.blocks.size > 0 %} | |
{% for block in section.blocks %} | |
{% assign image_size = 'grande' %} | |
{% if block.settings.layout == 'full-width' %} | |
{% assign image_size = 'master' %} | |
{% endif %} | |
{% assign perc_height_multiplier = 1 %} | |
{% if section.settings.item_height contains '%' and block.settings.layout != 'full-width' %} | |
{% assign perc_height_multiplier = section.settings.columns %} | |
{% endif %} | |
<div class="bucket grid__item large--{% if block.settings.layout == 'full-width' %}one-whole{% else %}{{ bucket_width_class }}{% endif %}" | |
style="{% | |
if section.settings.item_spacing != blank | |
%}margin-top: {{ section.settings.item_spacing }}px; padding-left: {{ section.settings.item_spacing }}px;{% | |
endif %}"> | |
<{% if block.settings.url != blank %}a href="{{ block.settings.url }}"{% else %}div{% endif %} | |
class="bucket-inner" | |
style="background-image: url({{ block.settings.image | img_url: image_size }});{% | |
if section.settings.item_height contains '%' | |
%}height: auto; padding-top: {{ section.settings.item_height | replace: '%', '' | times: perc_height_multiplier }}%;{% | |
else | |
%}height: {{ section.settings.item_height }};{% | |
endif %}"> | |
{% if block.settings.title != blank %}<span>{{ block.settings.title | newline_to_br }}</span>{% endif %} | |
</{% if block.settings.url != blank %}a{% else %}div{% endif %}> | |
</div> | |
{% endfor %} | |
{% endif %} | |
</div><!-- .buckets.grid --> | |
</div><!-- .buckets-section --> | |
</section> | |
{% schema %} | |
{ | |
"name": "Buckets", | |
"settings": [ | |
{ | |
"type": "select", | |
"id": "width", | |
"label": "Section Width", | |
"options": [ | |
{ | |
"label": "1200px", | |
"value": "width-1200" | |
}, | |
{ | |
"label": "Full Width", | |
"value": "width-full" | |
}, | |
{ | |
"label": "Custom Width", | |
"value": "width-custom" | |
} | |
], | |
"default": "width-1200" | |
}, | |
{ | |
"type": "number", | |
"id": "custom_width", | |
"label": "Section Custom Width", | |
"default": 800, | |
"info": "Applies only if you select ‘Custom Width’ for the section width." | |
}, | |
{ | |
"type": "select", | |
"id": "columns", | |
"label": "Columns", | |
"options": [ | |
{ | |
"label": "2", | |
"value": "2" | |
}, | |
{ | |
"label": "3", | |
"value": "3" | |
}, | |
{ | |
"label": "4", | |
"value": "4" | |
} | |
], | |
"default": "2" | |
}, | |
{ | |
"type": "text", | |
"id": "item_height", | |
"label": "Items Height", | |
"default": "32%", | |
"info": "Specify height of items in percentage (of height) or pixels. For example: 32% or 280px" | |
}, | |
{ | |
"type": "number", | |
"id": "item_spacing", | |
"label": "Items Spacing (in pixels)", | |
"default": 20 | |
} | |
], | |
"blocks": [ | |
{ | |
"type": "image", | |
"name": "Image Bucket", | |
"settings": [ | |
{ | |
"type": "image_picker", | |
"id": "image", | |
"label": "Image" | |
}, | |
{ | |
"type": "select", | |
"id": "layout", | |
"label": "Layout", | |
"options": [ | |
{ | |
"label": "Boxed", | |
"value": "boxed" | |
}, | |
{ | |
"label": "Full Width", | |
"value": "full-width" | |
} | |
], | |
"default": "boxed" | |
}, | |
{ | |
"type": "textarea", | |
"id": "title", | |
"label": "Title" | |
}, | |
{ | |
"type": "url", | |
"id": "url", | |
"label": "Link" | |
} | |
] | |
} | |
] | |
} | |
{% endschema %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.section-buckets { | |
position: relative; | |
.buckets { | |
.bucket { | |
.bucket-inner { | |
background: #EEE none center center no-repeat; | |
background-size: cover; | |
display: block; | |
-moz-transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
span { | |
color: #FFF; | |
display: block; | |
font-size: 30px; | |
font-weight: 700; | |
line-height: 1.1em; | |
position: absolute; | |
text-align: center; | |
text-transform: uppercase; | |
top: 50%; | |
width: 100%; | |
z-index: 1; | |
-moz-transform: translateY(-50%); | |
-webkit-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
} | |
a.bucket-inner::before { | |
background-color: rgba(0,0,0,0); | |
content: ''; | |
display: block; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
-moz-transition: background-color 0.3s ease 0s; | |
-webkit-transition: background-color 0.3s ease 0s; | |
transition: background-color 0.3s ease 0s; | |
} | |
a.bucket-inner:hover::before { | |
background-color: rgba(0,0,0,0.2); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment