I have to hide some button in an html page and for this I wanted to use a line that is located in another html file of mine, the ng-if="category.layers_count > 0".
enter image description here
But when I tried to put it in my other file, it doesn't work and I don't know why.
This is how I tried to do it.
{% verbatim %}
<div ng-repeat="category in categories"</div>
{% endverbatim %}
<div ng-if="category.layers_count > 0">
<div class="col-xs-4 col-sm-3 col-md-2 col-lg-1">
<a target="_self" href="{% url "search" %}?limit=100&offset=0&category__identifier__in=biota">
<div class="category" data-toggle="tooltip" data-placement="auto"
title="{% trans "Flora and/or fauna in natural environment. Examples: wildlife, vegetation, biological sciences, ecology, wilderness, sealife, wetlands, habitat." %}">
<i class="fa fa-leaf fa-3x"></i>
<h4>{% trans "Biota" %}</h4>
</div>
</a>
</div>
</div>
Related
I'm developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>
I cannot see why my background image is not showing. I've tried even eliminating the css styling just to try and get the image to pop up somewhere. The image is recognized and found just fine, but all I get is a white background.
{% extends "base.html" %}
{% block page_content %}
<div class="view" style="background-image: url('17973908.jpg'); background-repeat:no-repeat; background-size:cover; background-position:center center;">
<div class="container-fluid">
<br>
<div class="row">
<div class="col-sm-10">
<h1>Blog</h1>
</div>
<div class="col-sm-1">
<a class="btn-floating btn-lg btn-fb" href="#" type="button" role="button"><i class="shadow rounded-circle fab fa-facebook fa-2x" style="color:#0099FF;"></i></a>
</div>
<div class="col-sm-1">
<a class="btn-floating btn-lg btn-fb" href="#" type="button" role="button"><i class="shadow rounded fab fa-linkedin fa-2x" style="color:#0099FF;"></i></a>
</div>
</div>
<hr>
</div>
<div class="container">
{% for post in posts %}
<div class="shadow card" style="margin-bottom: 10px;">
<div class="card-header">
<h2>{{ post.title }}</h2>
</div>
<div class="card-body">
<div class="card-title">
<small>
{{ post.created_on.date }} |
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
<div class="card-text">
<p>{{ post.body | slice:":400" }}...</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Based on your question I cannot reproduce your setup, so here are just some suggestions for trying to find the problem.
Make sure the image is loaded properly - open DevTools with F12 and check Console and Network tabs for errors
Remove your custom CSS, i.e., at least the view class
Make sure the div on which the image is set has a width and height larger than 0
Make sure no element is on top of the image div - try setting a high z-index, e.g., z-index: 9999;
Remove surrounding HTML elements, especially elements inside the image div
P.S.: I directly copied your code into the Bootstrap Starter template and changed the background-image url to some random image from the internet and it worked.
I want to display one query into two coulmns for explain: I have 22 elements in my query and i want to display it as 11 on the left and 11 on the right.
<div class="list-group container">
<div class="list-group-item">
{% for k in kategoria %}
<div class="media align-items-center">
<div class="mr-3">
</div>
<div class="media-body">
<a href="{% url 'katalog:kategoria' pk=k.pk %}">
<h5 class="text-md d-block text-limit mb-2 ml-5 text-left"><u>{{k.name}}</u></h5>
</div>
<div class="media-body">
<a href="{% url 'katalog:kategoria' pk=k.pk %}">
<h5 class="text-md d-block text-limit mb-2 ml-5 text-left"><u>{{k.name}}</u></h5>
</div>
</div>
{% endfor %}
</div>
</div>
This is my code, actually my website looks like:
I just want to display half of the list on the left and the second half on the right.
I'm creating a website using GRAV CMS and I stumbled upon a problem that I need help with... I created a page that I want to list out all pdf-files that I upload in GRAV. I want the output to look something like that:
The pure hardcoded HTML for this looks like that:
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-6">
<ul class="downloads">
<li class="download-item pb-3">
<i class="fas fa-file-pdf fa-lg"></i>
<a href="./assets/downoads/file.pdf" class="action-btn m-0" download</a>
.
. etc...
.
</li>
</ul>
</div>
</div>
</div>
and the <li></li> is repeated as many times as the number of pdf-s...
The grav HTML and Twig combo looks like this:
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-12">
<ul class="downloads">
{% for pdf in page.media %}
<li class="download-item pb-3">
<i class="fas fa-file-pdf fa-lg"></i>
<a href="{{ pdf.url }}" class="action-btn m-0" download></a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
Now this code does not work, it generates this error:
Twig_Error_Syntax:
Unexpected token "punctuation" of value "." ("operator" expected with value "in").
I have also tried this:
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-12">
<ul class="downloads">
{% for manuals in page.media %}
<li class="download-item pb-3">
<i class="fas fa-file-pdf fa-lg"></i>
{% set pdf = manuals.media %}
<a href="{{ pdf.url }}" class="action-btn m-0" download></a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
and this:
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-12">
<ul class="downloads">
<li class="download-item pb-3">
<i class="fas fa-file-pdf fa-lg"></i>
<a href="{{ page.media.url('/pdf') }}" class="action-btn m-0" download></a>
</li>
</ul>
</div>
</div>
</div>
Both of these result didn't generate an error like the above... the page loaded but in inspect element mode the <a></a> tag was empty (looked like this):
How can I achieve this or what is wrong with my code?
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-12">
<ul class="downloads">
<?PHP
$path = "./filespath/"; //set the path of the folder that contains the files
$dir_handle = #opendir($path) or die("Unable to open $path");
while ($file = readdir($dir_handle))
{if($file!="." && $file!=".." && is_file($path.$file)){$f[] = $file;}}
closedir($dir_handle);
if(count($f)>0){
sort($f);//Set an order of the files
$newpath=substr($path,2);//this takes out the ./ of the path
foreach ($f as $val) {
echo '
<li class="download-item pb-3">
<i class="fas fa-file-pdf fa-lg"></i>
<a href="'.$newpath.$val.'" class="action-btn m-0" download>'.substr($val,0,-4).'</a><br>
</li>
';
}
}
?>
</ul>
</div>
</div>
</div>
I dont know how GRAV works, but this PHP code should help you. You only have to change the filespath where your files are located.
The path of folders where your files are located ex: falconimogollon.com/here/there/filesarehere/ you only set $path = "./here/there/filesarehere/";
If you need further help, reply me. Good Luck
I have pasted a jsfiddle into my webpage and it doesn't work. Here is the jsfiddle. Pasted the CSS and javascript into the appropriaate places. There seem to be no errors on the console related to the link or popup.
All the link seems to do is to reload the current page.
Here is my HTML :
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8">
<!-- POST -->
{% for entry in entries %}
<div class="panel panel-default">
<div class="panel-body">
<div class="media media-clearfix-xs-min">
<div class="media-left">
<a href="lesson.html">
<span class="media-object icon-block bg-default"><i class="fa fa-github"></i></span>
</a>
</div>
<div class="media-body">
<h3 class="media-heading h4">{{ entry.title }}</h3>
<p class="small text-muted">
<!-- <i class="fa fa-clock-o fa-fw"></i> time since post -->
Open PopUp
<div class="popup-box" id="popup-box-1">
<div class="close">X</div>
<div class="top">
<h2>Sample Header</h2>
</div>
<div class="bottom">
<p><h1>Sample Text</h1></p>
</div>
</div>
<i class="fa fa-user fa-fw"></i> {{entry.user_name}}
<i class="fa fa-calendar fa-fw"></i> {{entry.date_posted}}
</p>
{% for tag in entry.tagList %}
<span class="label label-default">{{tag}}</span>
{% endfor %}
</div>
</div>
</div>
</div>
{% else %}
<em>No entries!</em>
{% endfor %}
</div>
</div>
</div>
Sorry, here, I should have tested more.
I thought I had pasted the javascript in the right file, but I didn't. Once I pasted the js in the right file, it worked fine.