I'm new to foundation and i am building a blog based off the Simple Blog template. The images are currently appearing like this however I would like them to appear in the middle. How would I do this?
This is the current code I have for my posts:
<div id="posts" class="row medium-8 large-7 columns">
{% for i in object_list %}
<a href="{{i.get_absolute_url }}" style="color:dimgrey; text-decoration:none">
<div class="blog-post">
<h3 style="color: black;">{{ i.post_title }}<small> {{ i.post_date }}</small></h3>
<hr> {% if i.post_image %}
<img class="thumbnail" src="{{ i.post_image.url }}"> {% endif %}
<p>{{ i.post_content|linebreaks }}</p>
{% if instance.post_author.get_full_name %}
<div class="callout">
<ul class="menu simple">
<li>Written By: {{ i.post_author.get_full_name }}</li>
</ul>
</div>
{% endif %}
</a>
<br>
{% endfor %}
</div>
Thanks,
-Will
You can use the below code to align the image at the center with respect to the main class of id posts:
div.row medium-8 large-7 columns
{
position: relative;
}
div.row medium-8 large-7 columns img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
You could wrap the image in a div and use the text-center class (docs):
<div class="text-center">
<img class="thumbnail" src="{{ i.post_image.url }}">
</div>
Related
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
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>
It is <img>'s default behaivor to fill the whole width and height, often losing its aspect ratio.
The fact that it did not happen in your case, most likely is because you set object-fit: contain somewhere in your css.
You either remove object-fit: contain setting, or you can use
img {
height: 100%;
width: 100%;
object-fit: fill !important; # fill is the default value.
}
I am developing a blog and it is almost done. I want page numbers on each page, I already have arrows for next page and previous page.
It is a custom coded blog developed in Hubspot hence the use of HUBL, a templating language and HTML.
Can anyone tell me what line of code I need to add in order to get page numbers on there too?
I have separated it into to documents: BlogList.html and Blogpost.html and will show you what I have so far.
Any advice will be welcomed.
Thank you.
BlogList.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% set page_domain = "https://hello.com" %}
{% set images_domain = "https://login.hello.com" %}
{% import '/2019 Theme/MacroMeta.html' %}
{{ scm_meta(page_meta.html_title) }}
</head>
<body>
{% import '/2019 Theme/MacroHeader.html' %}
{{ scm_header() }}
{{ standard_header_includes }}
<div class="content_container">
<div class="banner internal_banner" style="background-image: url('{{images_domain}}/blog-images/banner_blog.jpg')">
<div class="content text-center">
<img src="{{images_domain}}/blog-images/banner_icon_blog.png"
srcset="{{images_domain}}/blog-images/banner_icon_blog#2x.png 2x" alt="" class="mb-4">
<h1 class="mb-3"><strong>Blog</strong></h1>
</div>
</div>
<div class="section section_grey">
<div class="content">
<div class="row blog_posts_list_ctn">
{% for content in contents %}
<div class="col-12 col-sm-6 col-md-4 py-3">
<div class="blog_post_list">
<div class="blog_list_img_holder">
{% if content.post_list_summary_featured_image %}
<a href="{{content.absolute_url}}"><img src="{{ content.post_list_summary_featured_image }}" alt=""
class="img-fluid"></a>
{% endif %}
</div>
<div class="blog_list_text text-center">
<div class="blog_list_date text-uppercase">
{{ content.updated|datetimeformat('%A, %B %e, %Y') }}
</div>
<div class="blog-list-title">
<h3><strong>{{ content.name }}</strong></h3>
</div>
<div class="blog-list-text">
{{ content.post_list_content|safe }}
</div>
<div class="blog-list-btn">
Read more
</div>
<!--
{% if content.topic_list %}
<div class="acticle_tags">
{% for topic in content.topic_list %}
#{{ topic.name }}{% if not loop.last %},{% endif %}
{% endfor %}
</div>
{% endif %}
-->
</div>
</div>
</div>
{% endfor %}
</div>
<div class="blog_paginate d-flex">
{% if last_page_num %}
<a href="{{ blog_page_link(last_page_num) }}" class="paginate_prev"><i class="fa fa-long-arrow-left"
aria-hidden="true"></i> Prev</a>
{% endif %}
{% if next_page_num %}
<a href="{{ blog_page_link(next_page_num) }}" class="paginate_next">Next <i class="fa fa-long-arrow-right"
aria-hidden="true"></i></a>
{% endif %}
</div>
</div>
</div>
</div>
{% import '/2019 Theme/MacroFooter.html' %}
{{ scm_footer() }}
{{ standard_footer_includes }}
</body>
</html>
BlogPost.html:
<!DOCTYPE html>
<html lang="en">
<head>
{% set page_domain = "https://hello.com" %}
{% set images_domain = "https://login.hello.com" %}
{% import '/2019 Theme/MacroMeta.html' %}
{{ scm_meta(page_meta.html_title + ' | Hello Blog') }}
{% import '/2019 Theme/MacroBlogCanonicalUrl.html' %}
</head>
<body>
{% import '/2019 Theme/MacroHeader.html' %}
{{ scm_header() }}
{{ standard_header_includes }}
<div class="section">
<div class="content">
<div class="back-to-blog-link">
<a class="back-link" href="https://blog.scanmarket.com">Back to the Hello Blog</a>
</div>
<div class="article_title_ctn">
<h2 class="text-center"><strong>{{ content.name }}</strong></h2>
</div>
<div class="row blog_post_details py-5 my-3 my-lg-5">
<div class="col-12 col-md-6">
<div class="section_grey p-4 p-lg-5 blog-post-intro">
<h3><strong>{{ content.post_list_content|safe }}</strong></h3>
</div>
</div>
<div class="col-12 col-md-5 offset-md-1 mt-5 mt-md-0">
<div class="article_details">
<table class="table_details border-0 align-middle w-100">
<tbody>
<tr>
<td><strong>Author</strong></td>
<td>
<div class="article_authors">
<a class="author-link"
href="{{ group.absolute_url }}/author/{{ content.blog_post_author.slug }}">{{ content.blog_post_author.display_name }}</a>
</div>
</td>
</tr>
<tr>
<td><strong>Date</strong></td>
<td>
<p class="small_text text_grey mb-0 text-uppercase">
<strong>{{ content.updated|datetimeformat('%A, %B %e, %Y') }}</strong></p>
</td>
</tr>
<tr class="separator">
<td colspan="2"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="content_small article_content content py-0">
{{ content.post_body }}
</div>
</div>
</div>
{% import '/2019 Theme/MacroFooter.html' %}
{{ scm_footer() }}
{{ standard_footer_includes }}
</body>
</html>
HTML/HubL Code:-
<div class="blog-pagination">
{% set page_list = [-2, -1, 0, 1, 2] %}
{% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
{% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
{% elif current_page_num == 2 %}{% set offset = 1 %}
{% elif current_page_num == 1 %}{% set offset = 2 %}
{% else %}{% set offset = 0 %}{% endif %}
<a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="{{ blog_page_link(last_page_num) }}">
{% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %}
Prev
</a>
{% for page in page_list %}
{% set this_page = current_page_num + page + offset %}
{% if this_page > 0 and this_page <= contents.total_page_count %}
<a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="{{ blog_page_link(this_page) }}">{{ this_page }}</a>
{% endif %}
{% endfor %}
<a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="{{ blog_page_link(current_page_num + 1) }}">
Next
{% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
</a>
</div>
CSS Code
.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: Lato,sans-serif;
margin-bottom: 3.3rem;
}
.blog-pagination__link {
color: #494a52;
}
.blog-pagination__prev-link--disabled, .blog-pagination__next-link--disabled {
color: #b0c1d4;
pointer-events: none;
cursor: default;
}
.blog-pagination__prev-link {
text-align: right;
margin-right: .25rem;
}
.blog-pagination__prev-link, .blog-pagination__next-link {
display: inline-flex;
align-items: center;
}
.blog-pagination__link {
display: block;
transition: color 0.1s ease-in-out;
line-height: 1.25;
color: #77838f;
background-color: #fff;
border: 0 solid #77838f;
padding: 0.5rem 0.75rem;
border-radius: 5px;
font-weight: 600;
margin-left:5px;
}
.blog-pagination__link:hover {
text-decoration: none;
color: #3e416d;
background-color: rgba(9, 27, 18, 0.1);
border-color: rgba(9, 27, 18, 0.1);
}
.blog-pagination__link--active {
border: 2px solid #b0c1d4;
}
Himanshu's answer is good.
Just adding for anyone who stumbles on this, the HubSpot Theme boilerplate has a pagination module included. This includes the HTML, HubL, and CSS.
https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/modules/blog-pagination.module
I have the following:
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{ article.headline }}</h2>
<br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
</div>
<div>
{% if article.image %}
<img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
{% endif %}
{{ article.text|safe }}
</div>
</div>
</div>
</div>
{% endblock %}
And the image currently sticks out the bottom of the panel and makes it looks ever so odd.
The css for article image is simply:
.article-image {padding: 0; margin-bottom: 20px;}
#media(min-width: 768px){.article-image {margin-left: 20px;}}
Can anyone help understand why the image does not fit snugly within the panel?
Many thanks, Alan.
Try to put your panel content inside a div class="panel-body" and give the image dimensions. Something like this
{% block content %}
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">{{ article.headline }}</h2>
<br/><h2 class="panel-title">{{ article.date|date:"l jS F Y" }}</h2>
</div>
<div class="panel-body">
{% if article.image %}
<img src="{{ MEDIA_URL }}{{ article.image }}" class="article-image pull-right img-responsive col-md-· col-sm-6 col-xs-12" alt="{{ article.headline }}" />
{% endif %}
{{ article.text|safe }}
</div>
<div>
</div>
</div>
</div>
</div>
{% endblock %}
CSS
.article-image {
padding: 0;
margin-bottom: 20px;
width: 50px; //whatever you want
height: 50px; //whatever you want
}
#media(min-width: 768px){
.article-image {
margin-left: 20px;
}
}
I'm having a very hard time trying to solve this. I got a back-end working but problem is html and css. I'm trying to make it like this here;
picture on the far left, user name on top and text below the user name and next to picture which is also the style youtube use. Here's my try.
as you can see when text isn't too long it kinda works but when it gets big it alters the form. Also as for the reply comment, the whole thing is a mess. I moved things around but still won't do the job.
Here's my full code(I'm using django template language here as well) and you can see simplified version here https://jsfiddle.net/n9h7gy54/ (it might be better to see the one here because my full code is very messy)
<table class='table'>
{% for comment in comments %}
<tr>
<td>
<div class="wholeComment" style="width:100%; margin:auto; font-size:14px;">
<div class="profileImage" style="float:left;">
<img src="{{ comment.user.get_mugshot_url }}" height='48' width='48' />
</div>
<div class="comment_header" style="float:left;">
<div class="commentInfo">
{{ comment.user.user }}| <small>{{ comment.timestamp|timesince }} </small>
</div>
<div class="aboutComment">
<span style="margin:5px; word-break: break-all;">
{{ comment.get_comment }}</span>
</div>
<div class="comment_bottom" style="padding:3px;">
{% if user.is_authenticated %}
<div class="make_reply">
<a href='#' class='reply_btn'>reply</a>
<div class='reply_comment'>
<form method="POST" action='{% url "comment_create" %}'>{% csrf_token %}
<input type='hidden' name='post_id' id='post_id' value='{% url "comment_create" %}'/>
<input type='hidden' name='origin_path' id='origin_path' value='{{ comment.get_origin }}'/>
<input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' />
{% crispy comment_form comment_form.helper %}
</form>
</div>
</div>
{% endif %}
<div class="replyInfo">
{% if not comment.is_child %}
<div class="wholeReply">
{% if comment.comment_count %}
<a href='#' class='replies'>
view{{comment.comment_count}}reply</a>
{% endif %}
<div class="got_replies">
<ul style="list-style-type: none;">
{% for child in comment.get_children %}
<hr>
<li>
<div style="float:left;">
<img src="{{ child.user.get_mugshot_url }}" height='48' width='48'/> {{ child.user.user }}
</div>
<div style="word-break: break-all; ">
{{ child.get_comment }}</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</td></tr>
{% endfor %}
</table>
If I understand you correctly, you're looking for
<div class="row">
<div class="col-xs-1">
<img src="{{ comment.user.get_mugshot_url }}"/>
</div>
<div class="col-xs-11">
<div class="row">
<div class="col-xs-12">
<p>
{{ comment.user.user }}
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<small>{{ comment.timestamp|timesince }} </small>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<span>{{ comment.get_comment }}</span>
</div>
</div>
{% for child in comment.get_children %}
{% include 'commentrow.html' comment=child %}
{% endfor %}
</div>
</div>
You can save this snippet as a template called commentrow.html and it will work recursively for children, including it in your template the same way
{% for comment in comments %}
{% include 'commentrow.html' comment=comment %}
{% endfor %}
JSFiddle
The important part is the col-xs tags, since this will mean the columns don't wrap regardless of screensize.