I can not see the image during server side rendering in django. Any help or hint would be appreciated. Below is the code I have written.
{% if object_list %}
{% for post in object_list %}
<div id="colorlib-main">
<section class="ftco-section ftco-no-pt ftco-no-pb">
<div class="container">
<div class="row d-flex">
<div class="col-xl-8 py-5 px-md-5">
<div class="row pt-md-4">
<div class="col-md-12">
<div class="d-md-flex">
<div class="text text-2 pl-md-4">
<h3 class="mb-2">{{post.title}}</h3>
<div class="meta-wrap">
<p class="meta">
<span><i class="icon-calendar mr-2"></i>June 28, 2019</span>
<span><i class="icon-folder-o mr-2"></i>Travel</span>
<span><i class="icon-comment2 mr-2"></i>5 Comment</span>
</p>
</div>
<p class="mb-4">A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>Read More <span class="ion-ios-arrow-forward"></span></p>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No post yet!!</p>
{% endif %}
Any clue/hint?
Related
I want to show only a select/specific category of Blog Posts in Webpage Section added using the built in Page Builder.
Have created this Web Template in EPRNext to Show Blog postings on any WebPage by adding a Section using Page-Builder. This works fine to show the Blog Posts.
But I want to show only a select category of Posts. What should I add.
`
<section class="container my-5">
<h2 class="section-title">{{ _('जलक्रांतीच्या गाथा') }} </h2>
<p class="section-description">{{ _('ब्लॉगच्या माध्यमातुन') }} </p>
<div class="row">
{% for post in frappe.get_all("Blog Post", fields=["title", "blogger", "blog_intro", "route", "meta_image"], order_by="published_on desc", limit=6) %}
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src={{ post.meta_image }} alt="" class="image-wiih-blur card-img-top image-loaded" max-width="400" max-height="400">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(post.blogger) }}</p>
<p class="card-text">{{ post.blog_intro }}</p>
</div>
<div class="card-body flex-grow-0">
{{ _('पुढे वाचा') }}
</div>
</div>
</div>
{% endfor %}
</div>
</section>
`
<section class="container my-5">
<h2 class="section-title">{{ _('जलक्रांतीच्या गाथा') }} </h2>
<p class="section-description">{{ _('ब्लॉगच्या माध्यमातुन') }}</p>
{% set category = frappe.get_doc("Blog Category", selected_category_name) %}
<div class="row">
{% for post in frappe.get_all("Blog Post", fields=["title", "blogger", "blog_intro", "route", "meta_image"], filters={"blog_category": category.name}, order_by="published_on desc", limit=6) %}
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src={{ post.meta_image }} alt="" class="image-wiih-blur card-img-top image-loaded" max-width="400" max-height="400">
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-subtitle mb-2 text-muted">{{ _('By {0}').format(post.blogger) }}</p>
<p class="card-text">{{ post.blog_intro }}</p>
</div>
<div class="card-body flex-grow-0">
{{ _('पुढे वाचा') }}
</div>
</div>
</div>
{% endfor %}
</div>
</section>
I'm working on a comments section for a blog in Flask. Having a very poor understanding of html, I decided to go with a public domain template. The script below works great, just one problem! After each submission, the comment window shrinks. Does anyone know how to make the size of the comment window constant?
{% for comment in post.comments %}
<div class="container my-2 py-2">
<div class="row d-flex justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="card text-dark">
<div class="card-body p-4">
<p class="fw-light mb-4 pb-2"> Recent Comment By: </p>
<div class="d-flex flex-start">
<img class="rounded-circle shadow-2-strong me-2"
src="{{url_for('static', filename='uploads/' + comment.user.image_file)}}" alt="avatar" width="60"
height="60" />
<div>
<h6 class="fw-bold mb-2">{{comment.user.username}}</h6>
<div class="d-flex align-items-center mb-2">
<p class="mb-0">
<i> {{comment.datetime.strftime('%B %d, %Y')}} </i>
{% if user.id == comment.author or user.id == post.author %}
<a href="/delete_comment/{{comment.id}}">
<span class="badge bg-danger">remove?</span>
</a>
{% endif %}
</p>
</div>
<p class="mb-0"> {{comment.text|safe}} </p>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I am working on a Django blog application and I have run into a problem with image alignment using Bootstrap 5. I am new at CSS and none of the solutions I see in SO are helping. My problem is I want the text under my images to always line up regardless of the height of the image itself. Here is a partial screen shot:
Here is the HTML code I developed:
{% extends 'base.html' %}
{% load static %}
{% block title %}Post List{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<!-- Latest Posts -->
<main class="posts-listing col-lg-8">
{% if page_obj %}
<div class="container">
<div class="row">
<!-- posts -->
{% for post in page_obj %}
<div class="post col-xl-6">
<div class="card">
<a href="{{post.get_absolute_url}}">
<img src="{{post.thumbnail.url}}" alt="..." class="img-fluid"></a>
</div>
<div class="card-body">
<div class="post-meta d-flex justify-content-between">
{% comment "" %}<div class="date meta-last"></div>{% endcomment %}
<div class="category">
{% for cat in post.categories.all %}
{{cat.title}}
{% endfor %}
</div>
</div>
<a href={{post.get_absolute_url}}>
<h3 class="h4">{{post.title}}</h3>
</a>
<p class="text-muted">{{post.content|safe | truncatechars:256 }}</p>
<footer class="post-footer d-flex align-items-center">
<a href="{% url 'show-user-profile' post.author.user.id %}" class="profile d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{post.author.profile_picture.url}}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{post.author.user.username}}</span></div>
</a>
<div class="date"><i class="icon-clock"></i>{{post.timestamp | timesince}} ago</div>
<div class="comments meta-last"><i class="icon-comment"></i>{{post.comment_count}}</div>
</footer>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<p class="text-big">No Posts in this category</p>
{% endif %}
</main>
{% include 'sidebar.html' with most_recent=most_recent category_count=category_count %}
</div>
</div>
{% endblock content %}
The comments I am getting make it seem like what I am trying to do is impossible, and perhaps it is. Here is a screenshot from Adobe Lightroom that shows the concept - all the photos are placed in identically sized boxes regardless of aspect ratio. No distortion, just different size margins to fill in unused space. Now Lightroom isn't HTML but can't this be done? As I mentioned, all of the sample galleries I see use photos with the same aspect ratio, but that should not be a requirement of a gallery.
I would appreciate some help. Thanks
so I have three cards in one row but they are all stuck together without margin it looks ugly. I want there to be some margin between each card so I added margin but it ruins the responsiveness bootstrap provides. Thus I added padding only. Any help would be appreciated
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4 card" style="padding:20px">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
{% endfor %}
</div>
You can just tweak the card
<div class="row">
{% for all_episode in episode %}
<div class="col-6 col-md-4">
<div class="card" style="padding:20px">
<a href="{% url 'episode_detail' slug=all_episode.slug %}">
<img class="card-img-top" src='{{all_episode.image.url}}'>
</a>
<div class="card-body">
<h5 class="card-title">
{{ all_episode.title }}
</h5>
<p class="card-text">{{ all_episode.story |slice:":100" }}...</p>
</div>
<div class="card-footer">
<small class="text-muted">
<span class="h5">
{{ all_episode.series }}
</span> /
<span class="h6">
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">{{ all_episode.season }}
</a>
</span>
</small>
</div>
</div>
</div>
{% endfor %}
</div>
Use Bootstrap Card Deck all cards will be in a row and responsive.
https://getbootstrap.com/docs/4.0/components/card/#card-decks
I have to get team members by their groups from a database.
My Database looks like:
table team_groups:
id
name
table team_member:
id
name
description
imagepath
team_group_id
I have an twig template where the team_members are shown by there groups like this:
<div class="row row-centered">
<h3 class="text-center">{{team_group.name}}</h3>
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{team_member.imagepath}}"
alt="{{team_member.name}}"></span>
<h3>{{team_member.name}}</h3>
<p>{{team_member.description}}</p>
</div>
</div>
</div>
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{team_member.imagepath}}"
alt="{{team_member.name}}"></span>
<h3>{{team_member.name}}</h3>
<p>{{team_member.description}}</p>
</div>
</div>
</div>
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{team_member.imagepath}}"
alt="{{team_member.name}}"></span>
<h3>{{team_member.name}}</h3>
<p>{{team_member.description}}</p>
</div>
</div>
</div>
</div>
But I don't know how to loop the team_members over the team_groups in my controller.
I started like that:
$teamGroups = $app['db']->fetchAll('SELECT * team_groups');
$teamMembers = $app['db']->fetchAll('SELECT * team_members');
but don't know how to continue.
Please help
Oh yeah twig is really nice...
I thought I have to link the objects in the controller, but now I simply wrote:
{% for teamGroup in teamGroups %}
<div class="row row-centered">
<h3 class="text-center">{{ teamGroup.name }}</h3>
{% for teamMember in teamMembers %}
{% if teamMember.team_group_id is same as(teamGroup.id) %}
<div class="col-xs-6 col-centered col-fixed">
<div class="item">
<div class="team-member text-center">
<span><img class="img-team" src="{{ app.request.basepath }}/img/team/{{ teamMember.image }}"
alt="{{ teamMember.name }}"></span>
<h3>{{ teamMember.name }}</h3>
<p>{{ teamMember.description }}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
That did it for me :-)