i have section about.liquid and
<section class="about" id="bg-image">
inside. Also i have shema:
{% schema %}
{
"name": "About background",
"settings": [],
"blocks":[
{
"type": "image",
"name": "About background",
"settings": [
{
"type": "image_picker",
"id": "bg-image",
"label": "Custom Background Image"
}
]
}
],
"presets": [
{
"category": "image",
"name": "main images"
}
]
}
{% endschema %}
and style tag:
<style>
#bg-image {
background-image:url('{{ section.blocks.settings.bg-image.src | img_url: 'master' }}');
background-size: cover;
}
</style>
Why doesn't it work? In output i have image with caption "No image"
Related
So I have setup a slick carousel in my shopify page, I ran into an issue though. So I have 5 slides set up. When the slick carousel loads, it puts blank slides between my actual slides.
How do I get rid of them?
Here is how it looks:
Here's my code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="slider-container">
<div class="image-container Pre_slide">
{% for block in section.blocks %}
<div class="image-title">
{{ block.settings.slide_title }}
</div>
<div class="slider-image">
<img src="{{ block.settings.slide_image | img_url: 'master' }}">
</div>
{% endfor %}
</div>
</div>
<script>
$('.image-container').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
</script>
{% schema %}
{
"name": "Carousel Slider",
"tag": "section",
"class": "slideshow",
"max_blocks": 5,
"settings": [
{
"type": "text",
"id": "title",
"label": "Slideshow"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "slide_image",
"label": "Image"
},
{
"type": "text",
"id":"slide_title",
"label":"Title"
}
]
}
],
"presets": [
{
"name": "Carousel Slider"
}
]
}
{% endschema %}
<style>
.slider-container {
margin-bottom: 50vh;
}
.image-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.slider-image {
padding: 0 1vw 0 1vw;
}
.slider-image img {
border-radius: 10px;
}
</style>
So because of the word/code ratio I have to put some extra details so here I go. Ive been trying to make a slideshow kinda thing where it automatically slides from one item to another... well it was all going well until this bug/glitch/issue popped up... so here I am asking for your help.
Thank you in advance!
You have to wrap one slide into one single DIV:
<div class="new-single-slide-div">
<div class="image-title">
{{ block.settings.slide_title }}
</div>
<div class="slider-image">
<img src="{{ block.settings.slide_image | img_url: 'master' }}">
</div>
</div>
Slick Carousel makes a slide for each div inside the given selector on the .slick() call.
Your calling $('.image-container').slick();
inside your HTML shopify markup {% for block in section.blocks %}. This generates two divs, first the text and second the image. This will generate 2 slides, instead your expected single slide.
So to explain my situation: I am trying to build a page on shopify wherein images will appear like so:
Right. So I have tried to build a shopify section where trough the shopify website customizer you are supposed to be able to put in images and it should appear like the image.
The issue is: With the current code that I have, the first 3 images work really nicely and appear next to eachother, but when I go to make another block and add 3 new pictures, they appear like so:
I only want 3 images on the page, not more. I want it to appear under the first 3, and then the next 3 to also appear under the last 3 etc etc etc.
Here is my code:
<div class="gallery">
<div class="col">
{% for block in section.blocks %}
<div class="image">
<img src="{{ block.settings.editorial_image | img_url: 'master' }}">
</div>
</div>
<div class="col">
<div class="image">
<img src="{{ block.settings.editorial_image2 | img_url: 'master' }}">
</div>
</div>
<div class="col">
<div class="image">
<img src="{{ block.settings.editorial_image3 | img_url: 'master' }}">
</div>
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "EditorialTest2",
"tag": "section",
"class": "gallery",
"max_blocks": 9,
"settings": [
{
"type": "text",
"id": "title",
"label": "Editorial"
}
],
"blocks": [
{
"name": "PictureBlock",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "editorial_image",
"label": "Image"
},
{
"type": "image_picker",
"id": "editorial_image2",
"label": "Image"
},
{
"type": "image_picker",
"id": "editorial_image3",
"label": "Image"
}
]
}
],
"presets": [
{
"name": "Editorial Section Test 2"
}
]
}
{% endschema %}
<style>
.gallery {
display: flex;
}
#media only screen and (max-width: 560px) {
.gallery {
flex-direction: column;
}
}
.image img {
width: 100%;
}
</style>
.row {
width: 100%;
display: flex;
height: 100%;
}
.columns {
width: 33%;
display: flex;
flex-direction: column;
height: 100%;
}
.red {
background: red;
}
.blue {
background: blue;
}
<div class="row">
<div class="columns red">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
</div>
<div class="columns blue"> <img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
</div>
<div class="columns red"> <img src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
<img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg">
<img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg">
</div>
</div>
here is a simple demostration using flex, hope it can help
guys here's what I'm trying to do.
I want to create a vertical menu with submenus on it.
using this JSON code:
"response": {
"data": [
{
"id": 1,
"name": "AC Articles",
"subname": {
"data": [
{
"id": 14,
"sub_category": "Window PC"
},
{
"id": 15,
"sub_category": "Mac PC"
}
]
}
},
{
"id": 2,
"name": "MyPage Articles",
"subname": {
"data": []
}
},
{
"id": 3,
"name": "PC/Internet Optimization",
"subname": {
"data": []
}
},
{
"id": 4,
"name": "Troubleshooting Guide",
"subname": {
"data": []
}
},
{
"id": 5,
"name": "Others",
"subname": {
"data": []
}
},
{
"id": 6,
"name": "Previous Announcements",
"subname": {
"data": []
}
},
{
"id": 7,
"name": "Operational Update",
"subname": {
"data": []
}
},
{
"id": 8,
"name": "LS Updates",
"subname": {
"data": []
}
},
{
"id": 9,
"name": "Fees Articles",
"subname": {
"data": []
}
},
{
"id": 10,
"name": "Teacher's Promotion Guide",
"subname": {
"data": []
}
},
{
"id": 11,
"name": "Modified Mypage Unlocking Process",
"subname": {
"data": []
}
},
{
"id": 12,
"name": "Training Specialization",
"subname": {
"data": []
}
},
{
"id": 13,
"name": "PHBee TESOL Common Concerns/Inquiries",
"subname": {
"data": []
}
}
]
}
so far here's what i have done
<ul class="nav flex-column">
<li
v-for="list in categories"
:key="list.id"
class="nav-item dropdown"
>
<a
v-if="list.subname"
class="nav-link dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>{{ list.name }}</a>
<a
v-else
class="nav-link"
role="button"
>{{ list.name }}</a>
<div v-for="sub in list.subname" :key="sub.id" class="dropdown-menu">
<a class="dropdown-item">{{ list.subname }}</a>
</div>
</li>
</ul>
I also want to check if there's a submenu on each menu, if there's a submenu it will create a dropdown else no dropdown for that menu
hope you guys help me.
Thank you
you can try this in v-if condition
v-if="list.subname.data.length > 0"
Hey Guys I have the following code which loops the <section> everytime I use it within the JSON. This works fine.
However, I am having problems with the nested loop {% for list in lists %} which handles the li elements. It comes out blank and seems to only loop twice when I inspect the element?
{# Question 1 #}
{% for question in questions %}
<section>
<div class="container question" id="question-one">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>1</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for list in lists %}
<li class="list-inline-item"><img src="{{ list.img }}"><span>{{ list.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="../resources/images-assets/images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="question-one-submit" onclick="buttonClick()">DONATE £1</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
In my JSON file I have laid everything out as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"lists": [
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" },
{ "img": "..\/resources\/images-assets\/images\/sad.svg", "label": "Dejected" }
]
}
],
I want the li to appear 5 times with the relevant image and label as I have added in the JSON file.
Can anyone point me in the right direction?
I managed to get this working correctly. Here is the markup:
{% for question in questions %}
<section>
<div class="container question" id="question-{{ loop.index }}">
<div class="row row-eq-height">
<div class="gradient"></div>
<div class="col-md-1 green-box">
<div class="number"><span>
{{ loop.index }}
</span></div>
</div>
<div class="col-md-10 dark-grey-box text-center">
<div class="content-wrapper">
{{ question.text|markdown }}
{# SLIDER #}
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="slider-container">
<ul class="list-inline justify-content-center range-labels">
{% for option in question.options %}
<li class="list-inline-item"><img src="{{ option.img }}"><span>{{ option.label }}</span></li>
{% endfor %}
</ul>
<div class="range-wrapper">
<img src="images/place-holder-slider.png">
</div>
</div>
</div>
</div>
<div class="cta-wrapper">
<button id="button-{{ loop.index }}" onclick="buttonClick()">{{ question.button }}</button>
</div>
</div>
</div>
<div class="col-sm-1 dark-grey-box"></div>
</div>
</div>
</section>
{% endfor %}
The JSON file I am using to accompany this is as follows:
"questions": [
{
"text": "##How confident are you in achieving your marketing goals this year?",
"options": [
{ "img": "images/sad.svg", "label": "Dejected" },
{ "img": "images/thinking-2.svg", "label": "Doubtful" },
{ "img": "images/like.svg", "label": "Hopeful" },
{ "img": "images/check.svg", "label": "Upbeat" },
{ "img": "images/goal.svg", "label": "Surefire" }
],
"button": "DONATE £1"
},
{
"text": "##What are the greatest challenges you face?",
"options": [
{ "img": "images/money-bag.svg", "label": "Budget" },
{ "img": "images/team.svg", "label": "Resources" },
{ "img": "images/bar-chart.svg", "label": "ROI" },
{ "img": "images/timer.svg", "label": "Short-termis" },
{ "img": "images/martech.svg", "label": "Martech" }
],
"button": "DONATE £1"
},
{
"text": "##Where could external agencies add the most value?",
"options": [
{ "img": "images/networking.svg", "label": "ABM" },
{ "img": "images/increasing-stocks-graphic-of-bars.svg", "label": "Demand" },
{ "img": "images/options.svg", "label": "Strategy" },
{ "img": "images/full-items-inside-a-shopping-bag.svg", "label": "Sales Enablement" },
{ "img": "images/content.svg", "label": "Content" }
],
"button": "DONATE £1"
},
{
"text": "##Would you be interested in a further conversation?",
"options": [
{ "img": "images/thumb-down.svg", "label": "Don't contact me again" },
{ "img": "images/maybe.svg", "label": "Unlikely this year" },
{ "img": "images/info.svg", "label": "Need to know more" },
{ "img": "images/calendar.svg", "label": "Get a date in the diary" },
{ "img": "images/boy-broad-smile.svg", "label": "Call me now" }
],
"button": "DONATE £1"
}
],
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<style type="text/css">
body {background-color: #D3D3D3;}
table {
width: 30%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.groove {border-style: groove;
height: 400px;
width: 400px;
}
</style>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.categoryL = '';
$scope.categoryList = function(value) {
$scope.categoryL = value;
}
$scope.selectedCategory = {};
$scope.menus = [{
"Forms": [{
"title": "Book a Meeting Room",
"category": "Forms",
"url": "https://www.google.co.uk/",
},
{
"title": "Book a Pool Car",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Order Stationery",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Gift & Hospitality",
"category": "Forms",
"url": "https://www.google.co.uk/"
}]
}, {
"News": [{
"title": "Discovery Communications embraces Office 365",
"category": "News",
"url": "https://blogs.office.com/2016/07/18/discovery-communications-embraces-office-365-to-foster-creative-culture-of-innovation/"
},
{
"title": "Guardian Industries",
"category": "News",
"url": "https://blogs.office.com/2016/07/15/guardian-industries-connect-collaborate-and-innovate-from-anywhere/"
},
{
"title": "Data Loss Prevention Policy Tips in OneDrive",
"category": "News",
"url": "https://blogs.office.com/2016/07/14/data-loss-prevention-policy-tips-in-onedrive-mobile-apps/"
}]
},
{
"Useful Information": [{
"title": "Get started with SharePoint",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Get-started-with-SharePoint-909ec2f0-05c8-4e92-8ad3-3f8b0b6cf261"
},
{
"title": "What is SharePoint?",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/What-is-SharePoint-97b915e6-651b-43b2-827d-fb25777f446f"
},
{
"title": "Accessibility features in SharePoint Online",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Accessibility-features-in-SharePoint-Online-f291404a-dc7e-44de-a31f-d81b3099c2b9?ui=en-US&rs=en-US&ad=US"
},
{
"title": "Videos for SharePoint Online and SharePoint 2013",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Videos-for-SharePoint-Online-and-SharePoint-2013-ed074945-4ddc-4479-9efe-6b3945cf8266?ui=en-US&rs=en-US&ad=US"
}]
}]
$scope.labels = [];
(function getMenuLabels() {
angular.forEach($scope.menus, function(menu) {
$scope.labels.push({
label: Object.keys(menu)[0],
moreInformation: menu[Object.keys(menu)[0]]
});
})
$scope.selectedCategory = $scope.labels[0];
})();
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="center">
<center>
<p class="groove">
<select width="300" style="width:400px" ng-model="selectedCategory" ng-options="label.label for label in labels"></select>
<section class="categoryL">
<b ng-repeat="info in selectedCategory.moreInformation">
<br>
<table align="center" class="ex2" style="border:1px solid yellowgreen;">
<tr>
<td BGCOLOR="#ff00ff"><a ng-href="{{info.url}}">{{info.title}}</a></td>
</tr/>
</table>
</section>
</center>
</div>
</p>
</body>
</html>
Hi, if you load my code into a file you will see that i have added some CSS, however i am finding it difficult to add the links inside the border that i have created, i have managed to get the drop down inside the border but for some reason i can not add the links.
I don't know if I understand your question, but you can display title with another ng-repeat (I edited your first section) https://plnkr.co/edit/8ItCgNT4xPbpLnKbYawf?p=preview:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<div ng-repeat="(key,val) in menu">
{{key}}
<div ng-repeat="titles in val">{{titles.title}}</div>
</div>
</li>
</ul>
</div>