I wanted to put elements in my nav menu in a row, so I used bootstrap 5.0 row class, but they still land one below another.
I am doing a Flask project, so I am using Jinja to some extent.
base.html
<body>
<div class = "container">
{% block body %}
{% endblock %}
</div>
</body>
panel.html
{% block body %}
<nav class="navbar sticky-top">
<div class="fixed-top" style="width: 100%; max-width: 100%; height: 100px; background-color: #2E2E2E;">
<nav class="container-wide navbar navbar-expand-lg">
<div class = "row">
<a id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
<a class ="rbf-link" href= "{{ url_for ('home') }}">Remove more Big Files</a>
</div>
</nav>
</div>
</nav>
{% endblock %}
Your elements in the row have to get "col-" classes.
Bootstrap is based on a 12 column layout, so if you want to have your rbf-main and rbf-link in one row, they should both have classes like that.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "row">
<a class="col-12 col-sm-6" id="rbf-main" style="font-size:40px" href= "{{ url_for ('home') }}">RBF</a>
<a class="col-12 col-sm-6 rbf-link" href= "{{ url_for ('home') }}">Remove more Big Files</a>
</div>
The elements share one row at viewport size sm. You can use any other viewportsize.
Related
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Gallery</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<style>
.image-thumbnail {
height: 200px;
object-fit: cover;
}
.container {
margin-left: 1;
}
.h1 {
text-align: center;
}
.list-group-item a {
text-decoration: none;
color: black;
}
</style>
</head>
<h1 class="text-center m-5 p-3 mb-2 bg-light text-secondary">CHARLIES LIFE</h1>
<body class="m-5">
<div class="container">
<div class="row">
<div class="col-md-3 mt-2">
<div class="card">
<div class="card-header">
Categories
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
All
</li>
{% for category in categories %}
<li class="list-group-item">
<a href="{% url 'gallery' %}?category={{category.name}}">{{category.name}}
</a>
</li>
{% endfor %}
Add Photo
</ul>
</div>
</div>
<div class=" col-md-9">
<div class="row">
{% for photo in photos %}
<div class="col-md-4">
<div class="card my-2">
<img class="image-thumbnail" src="{{photo.image.url}}" class="card-img-cap"
alt="...">
<div class="card-body">
<p class="card-text text-center">{{photo.category.name}}</p>
</div>
<div class="d-grid gap-2">
<a href="{% url 'photo' photo.id %}" class="btn btn-dark m-1"
type="button">View</a>
</div>
</div>
</div>
{% empty %}
<h3> No Photos...</h3>
{% endfor %}
</body>
</html>
Hi, I'm currently trying to make a photo blog to record the life of my son with photos as he grows. The above is my code for the "home" page (name as gallery).
So at the moment I have a for loop which adds a "card" class to my gallery page every time I upload an image.
Ideally I'd like to make it so it only showed each category I create with only one picture from that category rather than showing every picture I upload to the website. I just didn't think a head on how many photos I would upload and the home page will just turn into a HUGE photo dump.
If any one has any ideas how I could accomplish this or any other recommendations it would be greatly appreciated.
TYIA
Correct me if i'm wrong, but what i think you're trying to accomplish is to have different section i.e. 'young', 'teenager', 'adult' or something like that, and only show images in those sections with the section name as a tag in the image itself? If that is the case, you can do something like this:
{% for photo in photos %}
{% if photo.tag == young %}
<h1>Show young images here</h1>
{% elif photo.tag == teenager %}
<h1>Show teenage images here</h1>
{% elif photo.tag == adult %}
<h1>Show adult images here</h1>
{% else %}
<h1>No photo's yet</h1>
{% endif %}
{% endfor %}
alternatively, you can do this in your views and serve different images to different templates if you wish to do so.
It would look something like this:
def teenageImages(request):
teenageImage = Image.objects.raw("SELECT * FROM
photos WHERE tag = 'teenager' ")
template = loader.get_template('teenager_photos.html')
context = {
'photos': teenageImage
}
return HttpResponse(template.render(context, request))
You can also go a different route and use filter, more information on filter can be found here.
EDIT for bootstrap cards
Here is an example Github Repo on bootstrap cards with image (without a link) my webpage repo
You can clone this repo and look around in it, that way maybe you can get some inspiration / ideas on how to do certain things.
Alternatively, you can use something like Wagtail for this, I have also made a Github repo regarding that, which can be found here
I suggest that you look at the RoutablePageMixin of the Wagtail CMS (Django based), see documentation here. With it you could make your home page accept the category as a variable like the following URL is representing: davidsonsblog.com/category/foobar
Than you could define a queryset filtered by category and ordered randomly (e.g. by the queryset method .order_by('?')). If you only want to show one image of it, add the .first() method to the queryset.
The menu would generate the links accordingly.
I am currently working on a django blog. However, I am experiencing some difficulties with the size of the post thumbnails. Here's a picture:
What I marked in yellow is how the image should be filling the space. The width is fine, but the heigh isn't working well as you can see.
Here's the code:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
img {
height: 100%;
width: 100%;
}
</style>
<!-- Post-->
{% for obj in object_list %}
<div class="row d-flex align-items-stretch">
{% if not forloop.first and not forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
<div class="text col-lg-7">
<div class="text-inner d-flex align-items-center">
<div class="content">
<header class="post-header">
<div class="category">
{% for cat in obj.categories.all %}
{{ cat }}
{% endfor %}
</div>
<a href="{{ obj.get_absolute_url }}">
<h2 class="h4">{{ obj.title }}</h2>
</a>
</header>
<p>{{ obj.overview|linebreaks|truncatechars:200 }}</p>
<footer class="post-footer d-flex align-items-center"><a href="#" class="author d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{ obj.author.profile_picture.url }}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{ obj.author }}</span></div></a>
<div class="date"><i class="icon-clock"></i> {{ obj.timestamp|timesince }} ago</div>
<div class="comments"><i class="icon-comment"></i>{{ obj.comment_count }}</div>
</footer>
</div>
</div>
</div>
{% if forloop.first or forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
</div>
{% endfor %}
</div>
</section>
I have no idea where the error is. I've tried to debug the problem but I haven been able to debug it
The way I see it, it's doing exactly what it's supposed to.
You put the image inside a column, then the image has 100% of the width, and because this is just an image inside a div (no display flex on the column or tricks involved), 100% height is just not gonna work and the default height of the image is used.
And even if it did work, and the images where 100% both on height and width, they'll probably end up all stretched and deformed in different resolutions, because the ratio of width:height probably changes.
I usually skip this dilemma by avoiding the use of the img tag altogether, and setting the images as background-images in the column with the 'image' class. Then set the background-size to "cover", and background-position to "center". You probably also need to set a minimum height for this column, so the images don't completely disappear when the columns stack on top of each other on smaller screens.
You can add a class like
<style>
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 200px; // this size is arbitrary, choose what suits best
}
</style>
And then add the image on the iteration like so
<div class="image col-lg-5" style="background-image: url('{{ obj.thumbnail.url }}');"></div>
first you install it using pip install easy-thumbnails
INSTALLED_APPS = [
# ...
'easy_thumbnails',
]
then you do your migrations,and use it in your templates, this is from a project of mine:
{% load thumbnail %}
{% for image in images %}
<div class="image">
<a href="{{ image.get_absolute_url }}">
{% thumbnail image.image 300x300 crop="smart" as im %}
<a href="{{ image.get_absolute_url }}">
<img src="{{ im.url }}">
</a>
</a>
</div>
{% endfor %}
you can play with the details 300x300 as you wish, also the crop is optional but very useful
if you have trouble showing images add : THUMBNAIL_DEBUG = True to your settings
here is the docs https://easy-thumbnails.readthedocs.io/en/
My css file is working but i can't add bacgorund image. I try 3 way but don't work.
This is my style.css
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
This is my base.html ( img is working)
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}VPW{% endblock %}</title>
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<script href="{% static 'js/bootstrap.js' %}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row head">
<div class="col-md-12">
<div class="col-md-4">
</div>
<div class="col-md-4 logo">
<img src="{% static 'img/logo1.png' %}">
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
And this is my main.html where i have class first-info.
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
I try change in css background-image: url( "{% static 'img/bg.jpg' %}"); to background-image: url( "img/bg.jpg"); but don't work it
This is the expected behaviour. Django templating engine populates all the variables while rendering the html template. It will not populate values in your css file which is included in your html.
Your base.html because {% static 'img/logo1.png' %} is replaced into something like /static/img/logo1.png and browser is able to find the image, loads it and renders it.
If you want to make your background-image dynamic you can either .
You can add css class either directly in template i.e.
{% extends "shop/base.html" %}
{% load static %}
{% block title %}VPW{% endblock %}
<style>
.first-info{
width: 100%;
height: 300px;
background-image: url( "{% static 'img/bg.jpg' %}");
}
</style>
{% block content %}
<div class="container-fluid">
<div class="row first-info">
<div class="col-md-4">
<div class="box">
Lorem Ipsum
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
<div class="col-md-4">
<div class="box">
</div>
</div>
</div>
</div>
{% endblock %}
Or use a inline css directly in your html tag.
<div class="row first-info" style="background-image: url({% static 'img/bg.jpg' %})" >
Or
Just hardcode the complete path in your css file. But it removes the dynamic behaviour i.e. your static path. I am assuming it is just /static/
.first-info{
width: 100%;
height: 300px;
background-image: url( '/static/img/bg.jpg' );
}
Try this:
background-image:url('{{ STATIC_URL }}/img/bg.jpg');
Late answer, but I wanted to share this with someone trying to dynamically load a background image. My example is rendering a database request generated in views.py. The request contains three elements: background.photo, background.title and background.body.
Although not necessary, I wanted to apply opacity to the photo; however, using opacity property applies the effect to all children of the element in the DOM, so I used rgba to isolate the effect to the photo. The text is overlaid without being affected by the opacity of the photo. To make the text stand out, I used a horizontal gradient to darken the photo on the left.
{% extends 'base_layout.html' %}
{% block content %}
<div class="background-image" style="background: url({{ background.photo.url }} ) no-repeat; background-size: 100%;">
<div class="container">
<h2 class="title-text">{{ background.title }}</h2>
<p class="body-text">{{ background.body }}</p>
</div>
</div>
{% endblock %}
And the css:
.container{
background: linear-gradient(to right, rgba(0,0,0,1), rgba(255,255,255,0));
}
.background-image{
margin: 1em;
border-style: solid;
border-width: 1px;
border-color: #ff0080;
}
.title-text{
font-family: serif;
color: #ff0080;
margin: 0;
padding: .5em 1em;
}
.body-text{
font-family: serif;
color: #ff0080;
margin: 0;
padding: 1.5em 4em;
}
Django is not processing .css file includes just renders html templates.
Your CSS is static file and url should there be included through processing of some kind of management command if you want it to be extensible.
Othewise just use path of url
Just replace in static with '..'.
It will solve:
background:url('../images/Course.jpg');
Images must be in static/app/images/ and .css files must be located in static/app/content/.
Further in the .css file write like this:
#home {
background: url(../images/1.jpg);
}
This just worked for me:
<style="background-image: url({% static 'images/cover.jpg' %})">
Source:
https://simpleit.rocks/python/django/call-static-templatetag-for-background-image-in-css/
.bgded{
background-image: url( "{% static 'images/ur.jpg' %}");
}
.wrapper {
display: grid;
}
Add this
I have the following HTML structure with CSS formatting.
What I want is the outer div using flex but the inner div not using flex but float style (by the reasons of the sortable drag-drop widget does not work under display as flex).
Specifically, the structure is as below:
<div id="a" style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<div id="b" align="left" style="padding: 10px">
<div id="multi" style="display: NOT flex;"></div>
<div id="p" style=" float:left;"></div>
<div id="q" style=" float:left;"></div>
</div>
</div>
</div>
So, to be precise, I want flex for a. Particularly for div multi, p and q. I don't want flex, so that they can be side-by-side in the layout. Could anyone suggest how to do that? Many thanks.
The following is my working example run by Django on Python 3.5 for Michael_B's advice:
The template listing the RubaXa Sortable's widget for category ranking. What I want to do specifically is to list the blocks and Group A/B side by side, however, the Group A and B can be dragged to the block side for sorting/grouping:
{% extends "admin_content.html" %}
{% load static %}
{% block header_extra%}
<link rel="stylesheet" href="{% static 'django_tables2/themes/paleblue/css/screen.css' %}" />
{% include "fancybox/fancybox_css.html" %}
<!-- AngularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Sortable.js -->
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<!-- ng-sortable.js -->
<script src="http://rubaxa.github.io/Sortable/ng-sortable.js"></script>
<!-- app.js -->
<script src="http://rubaxa.github.io/Sortable/st/app.js"></script>
<link href="/static/app.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block admin_right%}
<div id="multi" >
<div class="tile__list" style="float:left; min-height:100%; min-width=1200px">
{% for field in table %}
<p style="background-color:#C6DDF4; margin: 5px; padding: 10px 15px; cursor: move;"><font size="2px">{{ field.NewsPaper }}, {{ field.Section}}, {{field.Title}}</font></p>
{% endfor %}
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group A</div>
<div class="tile__list">
</div>
</div>
<div class="layer tile" >
<div class="tile__name" style=" float:left;">Group B</div>
<div class="tile__list">
</div>
</div>
</div>
</div>
<script id="jsbin-javascript">
angular.module('demo', ['ng-sortable'])
.controller('DemoController', ['$scope', function ($scope) {
$scope.firstList = ['foo 1', 'foo 2', 'foo 3'];
$scope.secondList = ['bar 1', 'bar 2'];
$scope.sortableOptions = {
group: 'ng',
animation: 200
}
}]);
var el = document.getElementById('multi');
var sortable = Sortable.create(el, {
animation: 150,
handle: ".tile__name",
draggable: ".tile"
});
[].forEach.call(document.getElementById('multi').getElementsByClassName('tile__list'), function (el){
Sortable.create(el, {
group: 'blocks',
animation: 150
});
});
</script>
{#{% load django_tables2 %}#}
{#{% render_table table %}#}
{% endblock %}
And this template is further extend to another template of "admin_content.html" which use display flex in div:
{% extends "main.html" %}
{% load static %}
{% block header_extra%}{% endblock %}
{% block content_main%}
<div style="display:flex;min-height: 100%;overflow:auto;padding-bottom: 150px;">
<nav class="w3-sidenav w3-border" style="width:15%;padding:0px;background:transparent;">
<a class="w3-border-bottom" href="#">Function A</a>
<a class="w3-border-bottom" href="#">Function B</a>
<a class="w3-border-bottom" href="#">Function C</a>
<a class="w3-border-bottom" href="#">Function D</a>
<a class="w3-border-bottom" href="#">Function E</a>
</nav>
<div align="left" style="display:flex; padding: 10px;">
{% block admin_right%}{% endblock %}
</div>
</div>
{% endblock %}
I am trying to make a gallery of images of unknown number using HTML. I am using bootstrap to display the images and have some django template library coding. I am not able to align the images correctly. I am basically trying to use cycle tag in Django Template to display the row class in bootstrap after every 2 images. I want the images to appear in a row, each row with two images. The height of each image in the row should be aligned correctly. Right now the height is not aligned. One image is slightly higher than the other. Can you please help, this is my html file?
<div class="container">
{% load staticfiles %}
{% for plot in plots%}
{% with plot|add:".png" as image_static %}`
<div class = "{% cycle 'row' '' %}">
<div class = "col-md-5">
<div class = "thumbnail">
<img src="{% static image_static %}" alt="My image"/>
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
{% endwith %}
<br><br><br>
</div>
{% endfor %}
</div>
It cannot be done with cycle! Here's how it could be done instead:
{% for plot in plots%}
{% with plot|add:".png" as image_static %}
<div class='col-md-6'>
<div class = "thumbnail">
<img src="{% static image_static %}" alt="My image"/>
</div>
<!-- ... -->
</div>
{% if forloop.counter|divisibleby:"2" %}
</div>
<div class='row'>
{% endif %}
{% endwith %}
{% endfor %}
So, we close the row div and start a new one whenever the forloop index is divisible by 2, so we'll start a new row every two images!