i am using grav, and with twig i have an html file like this:
<div class="singlePostContainer">
<span class="postNumber">
01
</span>
<div class="postTextContainer">
<div class="postTitle">
title
</div>
<div class="postDate">
date
</div>
<div class="postAuthor">
author
</div>
</div>
</div>
then I have this API: https://5efc440acf235d0016ad72be.mockapi.io/api/floating-point/floating-point
I want to take the data from that api (date, author etc) and print it inside the corresponding html div
Fetch the data and transform the JSON to an array, then pass it to your view, e.g.
$api_data = json_decode(file_get_contents('https://5efc440acf235d0016ad72be.mockapi.io/api/floating-point/floating-point'), true);
<div class="postTextContainer">
<div class="postTitle">title</div>
<div class="postDate">date</div>
<div class="postAuthor">author</div>
</div>
{% for row in api_data %}
<div class="postTextContainer">
<div class="postTitle">{{ row.title }}</div>
<div class="postDate">{{ row.date }}</div>
<div class="postAuthor">{{ row.author }}</div>
</div>
{% endfor %}
Related
I have made a django e-comm website , when I press the add to cart button on my home page I have written a function which should change the status of a product from false to true once it is added in the cart but it does not work
I have given my cart.py and index.html code
Thank you
cart.py
from django import template
register = template.Library()
#register.filter(name='is_in_cart')
def is_in_cart(product,cart):
keys = cart.keys()
for id in keys:
print(id , product.id)
if int(id) == product.id:
return True
return False
index.html
{% extends 'main/base.html'%}
{% block title %}
index
{% endblock %}
{% block content %}
{% load cart %}
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
<div class="list-group mt-3">
{% for items in category %}
{{items.Category_name}} <!--i first used a small c for category but it did not pick the words from my category.py fle-->
{% endfor %}
</div>
</div>
<div class="col-lg-9">
<div class="row">
{% for items in product %}
<div class="card mx-auto mb-3 mt-3" style="width: 18rem;">
<img class="card-img-top" src="{{items.product_image.url}}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{items.product_name}}</h5>
<p class="card-text"><b>{{items.product_price}}</b></p>
<p class="card-text"><b>{{items.product_detail}}</b></p>
{{product | is_in_cart:request.session.cart }}
<form action="/" mthod="POST">
{% csrf_token %}
<input hidden type="text" name='product' value='{{items.id}}'>
<input href="#" type="submit" class="float-right btn btn-light border btn-sm" value="Add to Cart">
</form>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
i have a list like
lst = [
['img1','img2','img3','img4','img5'],
['img6','img7','img8','img9']
]
and a template like
<div class="row"> -- 1st row
<div class="col-lg-3" data-aos="fade-up"> --col-lg-3
<a href="{{img1}}"> --img1
<img src="{{img1}}"> -- img1
</a>
</div>
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100"> --col-lg-6
<a href="{{img2}}"> --img2
<img src="{{img2}}"> --img2
</a>
</div>
<div class="col-lg-3" data-aos="fade-up" data-aos-delay="200"> --col-lg-3
<a href="{{img}}"> --img3
<img src="{{img}}"> --img3
</a>
</div>
</div>
<div class="row"> ---2nd row
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="100"> --col-lg-8
<a href="{{img2}}"> --img2
<img src="{{img2}}"> --img2
</a>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200"> --col-lg-4
<a href="{{img}}"> --img3
<img src="{{img}}"> --img3
</a>
</div>
</div>
please note few things:
every col-lg size is of different size
every and tag of a column contain 1 img
i want to iterate over the whole template but in a different way
eg: i can do this in python where i can iterator over list and assign the value as well
for data in lst:
it = iter(data)
print (next(it)) ---where print will be replaced with img tag
print (next(it))
print (next(it))
print (next(it))
print (next(it))
but how can i do this in django template
Django's for-in template loop builds the DOM defined between the template tag loop for each item in data.
That being said, you could adapt your solution like so:
<div class="row align-items-stretch">
{% for img in data %}
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="{{ data.img }}" class="d-block photo-item" data-fancybox="gallery">
<img src="{{ data.img.url }}" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
{% endfor %}
</div>
If data contains three items/images, the output will be something like:
<div class="row align-items-stretch">
# 1st iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
# 2nd iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
# 3rd iteration
<div class="col-6 col-md-6 col-lg-3" data-aos="fade-up">
<a href="href_according_to_data" class="d-block photo-item" data-fancybox="gallery">
<img src="link" alt="Image" class="img-fluid">
<div class="photo-text-more">
<span class="icon icon-camera"></span>
</div>
</a>
</div>
</div>
I have a problem with Htmlspecialcharon twig I have this
` <div class="row justify-content-center">
<div class="col-lg-10">
{{ form_row(formEdit.description) }}
</div>
</div>`
I checked the twig documentation I found, I tried to fix it by adding (raw)
<div class="row justify-content-center">
<div class="col-lg-10">
{{ form_row(formEdit.description|raw) }}
</div>
</div>
but it doesn't resolve the problem
I'd like to store the iteration value to use in data-target so it would be #question0, #quesion1, #question2 and so on...
I tried using {{item.id}} but this didn't work.
{% for item in post.get_field('qanda') %}
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed"
data-parent="#faqAccordion" data-target="#question{{item.id}}"
data-toggle="collapse">
<h4 class="panel-title"><a class="ing">Q:
{{item.question}}</a></h4>
</div>
<div class="panel-collapse collapse" id="question{{item.id}}" style=
"height: 0px;">
<div class="panel-body">
{{item.answer}}
</div>
</div>{% endfor %}
</div>
You can use the variable loop.index0 (for zero based indexing).
data-target="#question{{loop.index0}}"
should do what you want. See the for loop documentation for more info for more information.
I've got an problem. This is my first time using pagination.
This is my view:
#extends('base')
#section('title', 'News')
#stop
#section('main')
#if ($news->count())
#foreach($news as $news)
<div class="container">
<div class="doc-content-box">
<legend>{{ $news->title }} <div id="spaceholder"></div>
<p>
<h6><span class="muted"><i class="icon-calendar"></i> {{ $news->created_at }} {{ $news->author }}<span>
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $news->content }}</p>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="{{ URL::route('news.edit', $news->id) }}"><i class="icon-pencil"></i> Edit</a>
<a class="btn btn-danger" href="{{ URL::route('news.destroy', $news->id) }}"><i class="icon-trash icon-large"></i> Delete</a>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach
{{ $news->links() }}
#else
<div class="container">
<div class="doc-content-box">
<legend>News</legend>
<p>There are no news.<br /><br />If you wish to create a news, you should go to our news management page!</p>
</div>
</div>
#endif
#stop
Then it results into an error Call to undefined method Illuminate\Database\Query\Builder::links().
I've also tried changing #foreach($news as $news) to #foreach($news->results as $news), but then I get an new error:
Undefined property: Illuminate\Pagination\Paginator::$results
The paginator itself works, but the pagination links (next and previous) won't work.
This happens when your query has not been executed. Your variable $news is a query builder not an array of objects. Before calling:
$news->links();
You need to execute your query by calling:
$news = $news->get();
Then after calling the get() method it will return an array representing the result set instead of an instance of Illuminate\Database\Query\Builder.
Note: when you do a foreach in a instance of Illuminate\Database\Query\Builder it will execute the query but the results will be scoped inside the foreach loop. That's the reason that you cannot retrieve the pagination links, because the object you are referencing is the query instead of the results.
If you test that code :
#foreach($news as $new)
<div class="container">
<div class="doc-content-box">
<legend>{{ $new->title }} <div id="spaceholder"></div>
<p>
<h6><span class="muted"><i class="icon-calendar"></i> {{ $new->created_at }} {{ $new->author }}<span>
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $new->content }}</p>
</div>
<div class="btn-group">
<a class="btn btn-primary" href="{{ URL::route('news.edit', $new->id) }}"><i class="icon-pencil"></i> Edit</a>
<a class="btn btn-danger" href="{{ URL::route('news.destroy', $new->id) }}"><i class="icon-trash icon-large"></i> Delete</a>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach