I understand how to pass in a content block to a template.
<template name="myTemplate">
<div class="container">
{{> Template.contentBlock }}
</div>
</template>
{{#myTemplate}}
<h1> Hey </h1>
{{/myTemplate}}
<!-- results in -->
<div class="container>
<h1> Hey </h1>
</div>
What if there are multiple content blocks I want to be able to specify. Something like:
<template name="myTemplate">
<h1>
{{> Template.contentBlock_1 }}
</h1>
<div class="container">
{{> Template.contentBlock_2 }}
</div>
<div class="footer">
{{> Template.contentBlock_3 }}
</div>
</template>
And them I'm not sure how that would call that template such that you pass it multiple content blocks.
How does one achieve such behavior with Meteor Blaze?
Related
Say I have created an HTML file in _includes.
<div class="my-accordion">
<div class="title">
{{ include.title }}
</div>
<div class="content">
{{ include.content }}
</div>
</div>
I want to pass in DOM elements. Is this possible in Jekyll / Liquid?
For example, I want include.content to be the following.
<!-- include.content -->
<div>
<p>Hello world!</p>
<img src="path/to/img" />
</div>
The purpose is to create reusable components. An accordion is a mere example but I have more complex use cases.
I want to use bootstrap to make a carousel using D.R.Y. methods. my idea (and it may not even be feasible) is to have a list or dictionary and cycle through image locations. Here's what I've written so far.
<div class="carousel-inner">
{% with images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg'] %}
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
{% endwith %}```
Try passing the list from the backend like this -
Views.py The function from where you are rendering your template
def index(request): # Change the name of the function as per your requirements
context = {
"images": ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
}
return render(request, "index.html", context) # Change the path of the template as per your requirements
Now images is a variable with the value of a list containing path of different images which you can use in your template
Now your .html file will look like this -
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
</div>
Pass the images as context from your view
def your_view(request):
images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
return render(request, "your-file.html", {images: images})
Now in your HTML you will have access to your list, so you can do something like so:
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({% static image %})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
I'm trying to use components like paper-rating, font awesome icons but they don't display anything in the page. I see that the tag is recoginsed but nothing is visible on the page. Below is a sample use of star-rating. Nethier the rating nor the map icon work
<section>
<template is="dom-if" if={{tests}}>
<template is="dom-repeat" items={{tests}}>
<a my-data="test" href="assessment/{{item.testId}}">
<paper-card class ="header" heading="{{item.assessmentTopic}}" image=""elevation="1" animated-shadow="false">
<iron-icon icon="maps:directions-bus"></iron-icon>
<div class="card-content" id="{{item.testId}}">
<img style="width : 75px; margin : 2px;" src="https://image.shutterstock.com/z/stock-vector-blackboard-inscribed-with-scientific-formulas-and-calculations-in-physics-and-mathematics-538136431.jpg" />
<div style="display: inline-block; margin-left: 10;">
<div class="small">
{{item.createdBy}}
</div>
<div class="small">
{{item.testId}}
</div>
<div>
<star-rating rating="4"></star-rating>
</div>
</div>
</div>
</paper-card>
</a>
</template>
</template>
</section>
So, I was able to solve this by updating iron-meta to version 2.0.0 in the bower.json and running bower update.
I have this loop:
{% for div in myHandleHere %}
<div> {{ block.text }} </div>
{% endfor %}
That actually outputs something like:
<div> one </div>
<div> two </div>
<div> three </div>
<div> ... </div>
What I want is, every 2 div, put them in a new container, like:
<div class="container">
<div> one </div>
<div> two </div>
</div>
<div class="container">
<div> three </div>
<div> ... </div>
</div>
Please help
The best solution in this case is to use the great batch filter which allows to process elements in groups:
{% for pair in myHandleHere|batch(2) %}
<div class="container">
{% for element in pair %}
<div>{{ element }}</div>
{% endfor %}
</div>
{% endfor %}
What you want to do is either keep a count of which row you're on, or have a nested loop. Conveniently Twig has a couple of built-in loop variables we can use.
Something like this:
{% for div in myHandleHere %}
{% if loop.index is odd %}
<div class="container">
{% endif %}
<div> {{ block.text }} </div>
{% if loop.index is even or loop.last %}
</div>
{% endif %}
{% endfor %}
Loop over all your blocks. On each iteration, if the loop counter is odd, i.e. blocks 1, 3, 5 etc, start a new <div class="container">.
And if the loop counter is even, i.e. blocks 2, 4, 6 etc, close that </div>.
Also if you're on the last block, make sure and close the parent div too, e.g. in case you only have an odd number of blocks, you want to output HTML like:
<div class="container">
<div> one </div>
<div> two </div>
</div>
<div class="container">
<div> three </div>
<div> four </div>
</div>
<div class="container">
<div> five</div>
</div>
This is a code snippet located in default.html, where it is located in the master folder of the repository.
<body>
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<img src="{{ site.avatar }}" />
<div class="site-info">
<h1 class="site-name">{{ site.name }}</h1>
<p class="site-description">{{ site.description }}</p>
</div>
<nav>
<!-- Test -->
Blog
About
</nav>
</header>
</div>
</div>
<div id="main" role="main" class="container">
{{ content }}
</div>
<div class="wrapper-footer">
<div class="container">
<footer class="footer">
{% include svg-icons.html %}
</footer>
</div>
</div>
{% include analytics.html %}
</body>
As you can see, there's a Liquid tag called {{ content }} in the center <div> tag.
<div id="main" role="main" class="container">
{{ content }}
</div>
I am confused on where that Liquid tag is pointing to. I'm looking around in the tutorial here, but it didn't say anything about {{ content }}, what it does, and how it is used.
Could anyone tell me about this, and if possible, where can I find more info on {{ content }} and how it should be used? Thanks in advance.
This is the content of a page or post or of another layout.
eg :
index.html content is directly injected in _layouts/default.html
about.md is injected in _layouts/page.html with itself is injected in _layouts/default.html
Just read the page/post front matter variable layout to know which layout is used.