how to stack images from bottom up in Django - html

I'm starting with this code:
{% for award in data.profile.awards %}
<img src="media/{{ award.Medals.ribbon }}">
{% if forloop.counter|divisibleby:3 %}
<br />
{% endif %}
{% endfor %}
my problem is that it goes from top down. Meaning that it produces the first three, then a break, then another three, and repeat from there.
What I need is to go from bottom up. in my case, If there's 4 images, I want 1 on top, and 3 on bottom. If there's 8, then there's 2 on top, 3 in the middle, then 3 on bottom. How do I do that?
Thanks.

You could possibly try to invert your loop and count from end, like this:
{% if forloop.revcounter|divisibleby:3 %}
<br>
{% endif %}
So, if for example you have 10 images, 1 images will be displayed, then condition will insert break, and break will be occurred after each 3 images.
Hope it helps!

I don't know django template language well enough, so here it is in pure js, maybe you can translate it:
var total_cells = 8;
var columns = 3;
var remainder = total_cells % columns;
for(var i=1;i<=total_cells;i++){ //starting from 1 similar to django's forloop.counter
console.log('<img>');
if((columns - remainder + i) % columns == 0){
console.log('<br>')
}
}
The idea is to calculate the remainder from total cells divided by the number of columns, which for 8 will be 2, and then insert breaks not at every 3rd position, but at every (3-remainder+1) position.

Related

How to integrate jinja module inside PyGears

I created jinja module as example, which looks like this
{% from 'snippet.j2' import module with context %}
{% call module() %}
logic [$size(din.data)-1 : 0] res;
assign res = din.data * din.data;
{% if params['half'] %}
assign dout.data = res / 2;
{% else %}
assign dout.data = res;
{% endif %}
assign din.ready = dout.ready;
assign dout.valid = din.valid;
{% endcall %}
How should I use this module inside PyGears?
Okay, I think this should work.
If I understood correctly you are trying to create a Jinja template for a module that will multiply with 1/2 (in other words divide by two). First of all, make sure your Jinja file and module are named the same (this is a must so PyGears would know which Jinja template to use).
Having all this in mind let's say our module name is mulh
Python file would be something like this:
from pygears import gear, Intf, reg
from pygears.typing import Uint
from pygears.hdl import hdlgen
#gear
def mulh(din: Uint,*,half=False)->b'din*din':
    pass
mulh(Intf(Uint[8]))
hdlgen('/mulh', outdir='.')
This code will call your Jinja file and the HDL output would look like something like this:
module mulh
(
    input logic clk,
    input logic rst,
    dti.consumer din, // u8 (8)
    dti.producer dout // u16 (16)
);
    typedef logic [7:0] din_t; // u8
    typedef logic [15:0] dout_t; // u16
    din_t din_s;
    dout_t dout_s;
    assign din_s = din.data;
    assign dout.data = dout_s;
    logic [$size(din.data)-1 : 0] res;
    assign res          = din.data * din.data;
    assign dout.data    = res;
assign din.ready    = dout.ready;
    assign dout.valid   = din.valid;
endmodule
To make it easier to picture all of this I made this picture bellow

How could check content of td without spaces and lines

I have a a table with dynamic value of td, some of td will be empty and some will has value, the empty td I want there background red, and filled td should be green
I tried to do that with css by :
td:empty {
background-color: red;
}
the issue that I faced is empty td has only spaces & lines content that spaces make td:empty totally useless
in other words the css reading there is a content in td tag, but in fact that content is just spaces and lines which is fake content
how could fix his problem ?
--- update ---
here is output result : https://i.imgur.com/Qz3lE22.png
and here is the script :
<td>
{% for mission in missions|get_missions_by_user:user %}
{% if mission.start_date|date:"d-m-Y" == week_dates.6.date|date:"d-m-Y" %}
{{ mission.title }}
<!-- filled cell - this should be green background -->
<br>
{% endif %}
<!-- empty cell - this should be red background -->
{% endfor %}
</td>
Could adding the needed calss by yesno be a solution for you?
CSS:
td.empty {
background-color: red;
}
td.filled {
background-color: green;
}
HTML:
<td class='{{missions.count|yesno:"filled,empty"}}'>
{% for mission in missions %}
{% if mission == 'MISSION' %}
{{ mission }}
<!-- filled cell - this should be green background -->
<br>
{% endif %}
<!-- empty cell - this should be red background -->
{% endfor %}
</td>
Note: I've never done any code with django and I'm not familiar with python. In javascript I would check for missions.length. I think you know what I've tried above. Hope i helps.:)
Thx for every body tried to help me ,
after few days of searching and asking Javascript exports I got the script
this script is an alternative way for td:empty but trimming spaces and lines
here is the js script :
$("#tableID td:not(:first-child)").each(function () {
if ($(this).text().replace(/\s/g, "").length > 0) {
$(this).css("backgroundColor", "green");
} else {
$(this).css("backgroundColor", "red");
}
});
you have to add and remove class if tabld td is empty then add class and on that class you give background.

Flask generate dynamic table where number of rows and columns depends on number of elements in the list

Dear stackoverflow users,
I am creating a website with flask as a backend. It will fetch some data from different systems e.x. jenkins.
one of the "data packs" will be a list of Jenkins jobs
the main .py file will include route to a page
#app.route("/simplejenkins")
def simple_jenkins():
return render_template('simplejenkins.html', job_list=job_list)
and the simplejenkins.html will iterate over the job_list and list them
{% for job in jobs_list %}
<tr>
<td>{{ job }}</td>
<td>
<p>Successful!</p>
</td>
</tr>
{% endfor %}
the idea is that the number of elements in the list will change over time.
and I want to put them in the table - each element (job) in different cell. And let's say I want to have 6 columns (depends on the screen resolution, but let's ignore this for now). So in case of 44 jobs I should have 7 full rows and 2 more job in 8th row.
and my question is, how to achieve this?
the script below generates a table with dynamic number of rows and columns but how to populate the cells using jinja?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Dynamic Table</title>
<script>
window.onload = createTable;
function createTable()
{
rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns",1);
for(var r=0;r<parseInt(rn,10);r++)
{
var x=document.getElementById('myTable').insertRow(r);
for(var c=0;c<parseInt(cn,10);c++)
{
var y= x.insertCell(c);
y.innerHTML="Row-"+r+" Column-"+c;
}
}
}
</script>
<style type="text/css">
body {margin: 30px;}
</style>
</head>
<body>
<table id="myTable" border="1">
</table><form>
</form>
</body>
</html>
i don't expect full solution of course, a link to existing similar case should be more than enough... somehow i cannot find one
thanks in advance for help
regards
Mariusz
To use that JS script all you need is an ajax call, once the page is ready, the ajax call will retrieve the data (jobs) from your flask route as JSON data and insert it in the table, with no need for jinja at all.
Or if it's not necessary for you to use a table, you can use the inline display in your frontend where your jobs will float next to each other as long as there is space, otherwise they will fall to the next line, you will loop over those jobs exactly as you did, but instead of having rows and cells you will have divs or something like that.
would you mind trying this ?
<table>
{% max_columns = 6 %}
{% interval = jobs_list|length / max_columns }
{% rows = interval|int + 1 } # +1 for the last/incomplete row
{% for p in range(rows) %}
<tr>
{% for n in range(max_columns) %}
{% cell_pos = (p * max_columns) + n }
<td>{{ jobs_list[cell_pos] }}</td>
{% endfor %}
</tr>
{% endfor %}
</table>

Loop in django with 2 parameter [duplicate]

This question already has answers here:
is there a way to loop over two lists simultaneously in django?
(6 answers)
Closed 6 years ago.
I am new to Django, I have passed two list(rawmaterial and food) to my template, and then I want to have a loop like this :(it is the logic of my aim, the syntax is not correct)
for(i=0;i<food.length;i++)
<div ,id="menuFood>
<h4> food.name(i)</h4>
<h4> rawmaterial.name(i)</h4>
</div>
but when i searched, i can find only loop like this:
{% for o in some_list %}
{% endfor %}
so with this syntax , I can't understand how to create that loop. I think only nested loop can make by this syntax..
here is my view code :
def foods(request):
food = Food.objects.all()
raw = [];
.
.
.
raw.append(warehouse)
return render(request, 'polls/foods.html', {'food': food,'rawmaterial': raw})
You can't do index on django template, but you could just put 2 lists together in your views.py using zip function:
food = Food.objects.all()
raw = []
# ...
raw.append(warehouse)
result = zip(food, raw)
return render(request, 'polls/foods.html', {'result': result})
Then in your template:
{% for food, raw in result %}
<h4>{{ food }}</h4>
<h4>{{ raw }}</h4>
{% endfor %}
By the way, you seems to come from java/c++ background because in python people never do:
for(i=0; i<food.length; i++)
print food[i]
instead, we do:
for i in food:
print i
Django template is adopting the similar syntax, it makes writing a loop a lot easier.

Align dynamic number of images django templates

I have a django template that gets a set of images. The number of images varies. I want to align it in the template file, like 3 images per line. Normal displaying of the image does not align it. creating a
<div class="col-md-4">
</div>
for each image misformats after 3 images. How do I acquire this, either using django itself, or in bootstrap?
If I understand correctly you need to close your row after 3 objects.
To do this you should take a look at forloop.counter template tag and divisibleby filter in Django documentation about built-in template tags.
It seems that you want to split a list into equally sized chunks in django templates.
The following snippet would help.
Templatetag code:
from django import template
register = template.Library()
#register.filter(name='chunks')
def chunks(iterable, chunk_size):
if not hasattr(iterable, '__iter__'):
# can't use "return" and "yield" in the same function
yield iterable
else:
i = 0
chunk = []
for item in iterable:
chunk.append(item)
i += 1
if not i % chunk_size:
yield chunk
chunk = []
if chunk:
# some items will remain which haven't been yielded yet,
# unless len(iterable) is divisible by chunk_size
yield chunk
Template code:
{% for chunk in images|chunks:3 %}
<div class="row">
{% for image in chunk %}
<div class="col-md-4">
{{image}}
</div>
{% endfor %}
</div>
{% endfor %}