Shopify添加Polaroid图片分区
1.进入Shopify后台，编辑代码，添加分区polaroid-images.liquid
代码如下:
<link rel="stylesheet" href="{{ 'polaroid.css' | asset_url }}">
<div class="collection__title title-wrapper page-width wrapper page-width {{section.settings.polaroid-visibility}}">
{% if section.settings.title != blank %}
<h2 class="title inline-richtext h2">{{ section.settings.title | escape }}</h2>
{% endif %}
{% for block in section.blocks %}
{% if block.settings.button_link != blank %}
<a class="polaroid_link" href="{{ block.settings.button_link }}" title="{{ block.settings.title | escape }}">
{% endif %}
<div class="polaroid-item item">
<div class="polaroid">
{% if block.settings.image != blank %}
<img
src="{{block.settings.image | img_url: ''}}"
alt="{{block.settings.image.alt | escape}}">
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
<div class="caption">{{block.settings.title}}</div>
</div>
</div>
{% if block.settings.button_link != blank %}
</a>
{% endif %}
{% endfor %}
</div>
{% schema %}
{
"name": "Polaroid images",
"class": "section",
"settings": [
{
"type": "radio",
"id": "polaroid-visibility",
"options": [
{ "value": "medium-up--hide",
"label": "Mobile only"
},
{ "value": "small--hide",
"label": "Desktop only"
},
{ "value": "showboth",
"label": "Both"
}
],
"label": "Visibility",
"default": "showboth"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text"
}
],
"blocks": [
{
"type": "text_block",
"name": "Column",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Add a title or tagline"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
}
],
"presets": [
{
"name": "Polaroid images",
"category": "Image"
}
]
}
{% endschema %}2.添加css样式，polaroid.css
初始图片是灰色的
a.polaroid_link {
cursor: pointer;
}
.wrapper {
width:100%;
padding:0 2rem;
text-align:center
}
.wrapper h2 {
text-align:left;
}
.polaroid{
background:#fff;
padding:1rem;
box-shadow:0 .2rem 1.2rem rgba(0,0,0,.2)
}
.polaroid>img{
max-width:100%;
height:auto
}
.caption{
font-size:1.8rem;
text-align:center;
line-height:2em
}
.item{
width:30%;
display:inline-block;
margin-top:2rem;
filter:grayscale(100%)
}
@media only screen and (max-width: 749px) {
.item{
display:block;
width:100%;
}
.small--hide {
display: none !important; }
}
@media only screen and (min-width: 750px) {
.medium-up--hide {
display: none !important; }
}
.item .polaroid:before{
content:'';
position:absolute;
z-index:-1;
transition:all .35s
}
.item:nth-of-type(4n+1){
transform:scale(.8,.8) rotate(5deg);
transition:all .35s
}
.item:nth-of-type(4n+1) .polaroid:before{
transform:rotate(6deg);
height:20%;
width:47%;
bottom:30px;
right:12px;
box-shadow:0 2.1rem 2rem rgba(0,0,0,.4)
}
.item:nth-of-type(4n+2){
transform:scale(.8,.8) rotate(-5deg);
transition:all .35s
}
.item:nth-of-type(4n+2) .polaroid:before{
transform:rotate(-6deg);
height:20%;
width:47%;
bottom:30px;
left:12px;
box-shadow:0 2.1rem 2rem rgba(0,0,0,.4)
}
.item:nth-of-type(4n+4){
transform:scale(.8,.8) rotate(3deg);
transition:all .35s
}
.item:nth-of-type(4n+4) .polaroid:before{
transform:rotate(4deg);
height:20%;
width:47%;
bottom:30px;
right:12px;
box-shadow:0 2.1rem 2rem rgba(0,0,0,.3)
}
.item:nth-of-type(4n+3){
transform:scale(.8,.8) rotate(-3deg);
transition:all .35s
}
.item:nth-of-type(4n+3) .polaroid:before{
transform:rotate(-4deg);
height:20%;
width:47%;
bottom:30px;
left:12px;
box-shadow:0 2.1rem 2rem rgba(0,0,0,.3)
}
.item:hover{
filter:none;
transform:scale(1,1) rotate(0)!important;
transition:all .35s
}
.item:hover .polaroid:before{
content:'';
position:absolute;
z-index:-1;
transform:rotate(0);
height:90%;
width:90%;
bottom:0;
right:5%;
box-shadow:0 1rem 3rem rgba(0,0,0,.2);
transition:all .35s}
初始图片是图片原色
a.polaroid_link {
cursor: pointer;
}
.wrapper {
width: 100%;
padding: 0 2rem;
text-align: center;
}
.wrapper h2 {
text-align: left;
}
.polaroid {
background: #fff;
padding: 1rem;
box-shadow: 0 .2rem 1.2rem rgba(0, 0, 0, .2);
}
.polaroid > img {
max-width: 100%;
height: auto;
}
.caption {
font-size: 1.8rem;
text-align: center;
line-height: 2em;
}
.item {
width: 30%;
display: inline-block;
margin-top: 2rem;
}
@media only screen and (max-width: 749px) {
.item {
display: block;
width: 100%;
}
.small--hide {
display: none !important;
}
}
@media only screen and (min-width: 750px) {
.medium-up--hide {
display: none !important;
}
}
.item .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transition: all .35s;
}
.item:nth-of-type(4n+1) {
transform: scale(.8, .8) rotate(5deg);
transition: all .35s;
}
.item:nth-of-type(4n+1) .polaroid:before {
transform: rotate(6deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, .4);
}
.item:nth-of-type(4n+2) {
transform: scale(.8, .8) rotate(-5deg);
transition: all .35s;
}
.item:nth-of-type(4n+2) .polaroid:before {
transform: rotate(-6deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, .4);
}
.item:nth-of-type(4n+4) {
transform: scale(.8, .8) rotate(3deg);
transition: all .35s;
}
.item:nth-of-type(4n+4) .polaroid:before {
transform: rotate(4deg);
height: 20%;
width: 47%;
bottom: 30px;
right: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, .3);
}
.item:nth-of-type(4n+3) {
transform: scale(.8, .8) rotate(-3deg);
transition: all .35s;
}
.item:nth-of-type(4n+3) .polaroid:before {
transform: rotate(-4deg);
height: 20%;
width: 47%;
bottom: 30px;
left: 12px;
box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, .3);
}
.item:hover {
transform: scale(1, 1) rotate(0)!important;
transition: all .35s;
}
.item:hover .polaroid:before {
content: '';
position: absolute;
z-index: -1;
transform: rotate(0);
height: 90%;
width: 90%;
bottom: 0;
right: 5%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
transition: all .35s;
filter: grayscale(100%);
}
3.自定义主题，添加polaroid images分区
在你想要添加polaroid images的页面添加这个分区
添加图片，图片标题，链接。
最终效果（进入网站查看，密码123）
https://quickstart-b815fcbc.myshopify.com/pages/polaroid-images
