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.
Related
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 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?
I have a small problem of CSS and I do not understand where it can come ... I would like to display 3 images per lines under which I can come out of my info base. But nothing goes as planned. Could someone unblock me? I do not know where I made my mistake.
My code :
{% extends 'index.html.twig' %}
{% block body %}
<div id="startchange">
<div class="portfolio-item">
<section id="objets">
<div class ="title">
<p class="titre">List client</p>
</div>
<div class="row">
{% for client in clients%}
<div class="col-xs-4 col-sm-3 col-md-3">
<img class="img-responsive img-circle" src="img/logos/mario.png">
<div class="description">
<p class="nom"> Surname : </p>
<p class="type"> {{client.surname}}</p>
<p class="nom"> First name : </p>
<p class="type"> {{client.firstname}}</p>
</div>
</div>
{%endfor%}
</div>
</section>
</div>
</div>
{% endblock %}
The view with 4 objects :
List of 4 objects
The view with 0 object : 0 object
It seems that all the objects go in the same square of the line and not in 4 different boxes I do not understand why ... An idea?
Let me preface by saying I do not know front-end development whatsoever. I've been trying to center this form for what feels like forever, but nothing is working. I'm using Flask Bootstrap and WTForms. Here's the code I have below:
HTML
{% block content %}
<body>
<div class="container center_div" align=middle>
<h2>Indie/Alternative Artist Recommendation</h2>
<p>Enter 5 artists below and we will provide similar artists you may like</p>
<br/>
<form method="Post" action="/results">
<div class="col-xs-4" align=middle>
{{ form.artist1.label(class="col-md-6 col-sm-12") }}
{{ form.artist1(class="form-control") }}
{{ form.artist2.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist2(class="form-control") }}
{{ form.artist3.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist3(class="form-control") }}
{{ form.artist4.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist4(class="form-control") }}
{{ form.artist5.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist5(class="form-control") }}
<p><input type=submit value=Go type="button" class="btn btn-default"></p>
</div>
</form>
</div>
{% block scripts %}
<script src="{{url_for('.static', filename='js/getArtists.js')}}"></script>
{{super()}}
{% endblock %}
And the bit of CSS I have (in my bootstrap.css file):
.center_div{
margin: 0 auto;
width:90%;
text-align: middle;
}
Replace
...
<div class="col-xs-4" align=middle>
...
with
...
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-xs-12">
...
And, please, reset your bootstrap.css back to original and do not touch it again. If you want to make mods to CSS you just create your own CSS file and load it on top of (after) bootstrap.css (or bootstrap.min.css). Use specific selectors when you want your mods on specific elements and use the same selectors as Bootstrap when you want your mods to be general.
You can't learn CSS in a day, so... if you need professional level CSS in your project, Bootstrap will not provide it for you. You should get a frontend dev to look at your app before you launch.
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.