Mixing
Loop over Django objects and Bootstrap cards
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I would like to use Bootstrap cards in order to create one card by object and add some sub_objects in each one.
For example :
I have an object Publication which could contain one or many sub_objects Document.
Publication object has some attributes : category, title, picture, description and Document object has some attributes like title, format, language, ...
I would like to get something like this :
For a same category, I create a card by publication and I list all documents for each publication.
This is what I get with my code :
As you can see, I should have document n°1 and document°2 in the same card and not two different cards.
This is my code :
{% for category in research_categories|dictsort:'name' %}
<div class="row">
<fieldset>
<legend id="category_{{ category.id }}"><span class="name">{{ category }}</span></legend>
</fieldset>
</div>
<div class="row">
<div class="col-sm-4">
{% for element in test_research %}
{% if element.publication.category|stringformat:"s" == category|stringformat:"s" %}
{% ifchanged %}
<div class="card" style="width:250px">
<img class="card-img-top" src="{{ element.publication.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element.publication }}</h4>
<table class="table table-condensed">
<tbody>
<tr>
<td> {{ element.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endifchanged %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
And my view according to this part is :
# By default, display documents
test_research = Document.objects.all().order_by('publication__title', 'title', 'language', 'format')
research_categories = defaultdict(list)
for element in test_research:
research_categories[element.publication.category].append(element)
research_publications = defaultdict(list)
for element in test_research:
research_publications[element.publication].append(element)
kwargs['test_research'] = test_research
kwargs['research_categories'] = research_categories
kwargs['research_publications'] = research_publications
django twitter-bootstrap bootstrap-4
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
add a comment |
I would like to use Bootstrap cards in order to create one card by object and add some sub_objects in each one.
For example :
I have an object Publication which could contain one or many sub_objects Document.
Publication object has some attributes : category, title, picture, description and Document object has some attributes like title, format, language, ...
I would like to get something like this :
For a same category, I create a card by publication and I list all documents for each publication.
This is what I get with my code :
As you can see, I should have document n°1 and document°2 in the same card and not two different cards.
This is my code :
{% for category in research_categories|dictsort:'name' %}
<div class="row">
<fieldset>
<legend id="category_{{ category.id }}"><span class="name">{{ category }}</span></legend>
</fieldset>
</div>
<div class="row">
<div class="col-sm-4">
{% for element in test_research %}
{% if element.publication.category|stringformat:"s" == category|stringformat:"s" %}
{% ifchanged %}
<div class="card" style="width:250px">
<img class="card-img-top" src="{{ element.publication.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element.publication }}</h4>
<table class="table table-condensed">
<tbody>
<tr>
<td> {{ element.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endifchanged %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
And my view according to this part is :
# By default, display documents
test_research = Document.objects.all().order_by('publication__title', 'title', 'language', 'format')
research_categories = defaultdict(list)
for element in test_research:
research_categories[element.publication.category].append(element)
research_publications = defaultdict(list)
for element in test_research:
research_publications[element.publication].append(element)
kwargs['test_research'] = test_research
kwargs['research_categories'] = research_categories
kwargs['research_publications'] = research_publications
django twitter-bootstrap bootstrap-4
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
add a comment |
I would like to use Bootstrap cards in order to create one card by object and add some sub_objects in each one.
For example :
I have an object Publication which could contain one or many sub_objects Document.
Publication object has some attributes : category, title, picture, description and Document object has some attributes like title, format, language, ...
I would like to get something like this :
For a same category, I create a card by publication and I list all documents for each publication.
This is what I get with my code :
As you can see, I should have document n°1 and document°2 in the same card and not two different cards.
This is my code :
{% for category in research_categories|dictsort:'name' %}
<div class="row">
<fieldset>
<legend id="category_{{ category.id }}"><span class="name">{{ category }}</span></legend>
</fieldset>
</div>
<div class="row">
<div class="col-sm-4">
{% for element in test_research %}
{% if element.publication.category|stringformat:"s" == category|stringformat:"s" %}
{% ifchanged %}
<div class="card" style="width:250px">
<img class="card-img-top" src="{{ element.publication.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element.publication }}</h4>
<table class="table table-condensed">
<tbody>
<tr>
<td> {{ element.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endifchanged %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
And my view according to this part is :
# By default, display documents
test_research = Document.objects.all().order_by('publication__title', 'title', 'language', 'format')
research_categories = defaultdict(list)
for element in test_research:
research_categories[element.publication.category].append(element)
research_publications = defaultdict(list)
for element in test_research:
research_publications[element.publication].append(element)
kwargs['test_research'] = test_research
kwargs['research_categories'] = research_categories
kwargs['research_publications'] = research_publications
django twitter-bootstrap bootstrap-4
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
I would like to use Bootstrap cards in order to create one card by object and add some sub_objects in each one.
For example :
I have an object Publication which could contain one or many sub_objects Document.
Publication object has some attributes : category, title, picture, description and Document object has some attributes like title, format, language, ...
I would like to get something like this :
For a same category, I create a card by publication and I list all documents for each publication.
This is what I get with my code :
As you can see, I should have document n°1 and document°2 in the same card and not two different cards.
This is my code :
{% for category in research_categories|dictsort:'name' %}
<div class="row">
<fieldset>
<legend id="category_{{ category.id }}"><span class="name">{{ category }}</span></legend>
</fieldset>
</div>
<div class="row">
<div class="col-sm-4">
{% for element in test_research %}
{% if element.publication.category|stringformat:"s" == category|stringformat:"s" %}
{% ifchanged %}
<div class="card" style="width:250px">
<img class="card-img-top" src="{{ element.publication.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element.publication }}</h4>
<table class="table table-condensed">
<tbody>
<tr>
<td> {{ element.title }}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endifchanged %}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
And my view according to this part is :
# By default, display documents
test_research = Document.objects.all().order_by('publication__title', 'title', 'language', 'format')
research_categories = defaultdict(list)
for element in test_research:
research_categories[element.publication.category].append(element)
research_publications = defaultdict(list)
for element in test_research:
research_publications[element.publication].append(element)
kwargs['test_research'] = test_research
kwargs['research_categories'] = research_categories
kwargs['research_publications'] = research_publications
django twitter-bootstrap bootstrap-4
django twitter-bootstrap bootstrap-4
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
asked Jan 3 at 13:13
ChocoBombChocoBomb
768
768
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023014%2floop-over-django-objects-and-bootstrap-cards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54023014%2floop-over-django-objects-and-bootstrap-cards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
