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
Related
I have a section that contains a slider with 5 objects in. Looks good on bigger devices, however it would be better displayed as a grid on mobile. how would I go about this but keep the slider for bigger screens. Heres the section with the slider:
<section class="{{ class_name }}" data-id={{ customer.id }} data-glide-mob data-glide-mob-small data-glider-config='{
"type": "slider",
"perView": 5,
"rewind": true,
"bound": true,
"peek": {
"before": 0,
"after": 0
},
"gap": 20,
"breakpoints": {
"768": {
"perView": 3.5,
"peek": {
"before": 0,
"after": 0
}
},
"500": {
"perView": 3,
"peek": {
"before": 0,
"after": 0
}
}
}
}'
>
{% if linklist.links.size > 0 %}
{% if linklist_header %}
<h4 class="heading-4">{{linklist_header}}</h4>
{% endif %}
<div class="glides__slides" data-glide-el="track">
<ul class="flex justify-center">
{% for link in linklist.links %}
<li>
<a href="{{ link.url }}" class="relative icon-background flex align-center justify-center">
<div class="link-icon">
{% assign landing_page = settings.alp_url | default: '/pages/account' %}
{% if link.url == landing_page %}
{% render 'icon-account-background' %}
{% elsif link.url == '/account' %}
{% render 'icon-orders-background' %}
{% elsif link.url == '/account/addresses' %}
{% render 'icon-addresses-background' %}
{% endif %}
</div>
<div class="active-background svg-product-icon-box"></div>
</a>
{{ link.title }}
</li>
{% endfor %}
<li>
<a href="/account/login#recover" data-change-password class="relative icon-background flex align-center justify-center">
<div class="link-icon">
{% render 'icon-change-password-background' %}
</div>
<div class="active-background svg-product-icon-box"></div>
</a>
{{ 'customer.account.change_password' | t }}
</li>
<!-- Begin Recharge code -->
<li>
<a href="/tools/recurring/login/" class="relative icon-background flex align-center justify-center">
<div class="link-icon">
{% render 'icon-subscriptions-background' %}
</div>
<div class="active-background svg-product-icon-box"></div>
</a>
{{ 'customer.account.manage_subs' | t }}
</li>
<!-- End Recharge code -->
</ul>
</div>
<div class="flex flex-column align-center gap-medium account-menu-bullets">
<div class="glide-bullets flex center justify-center margin-t-30" data-glide-el="controls[nav]">
{% for link in linklist.links %}
<button class="slider__bullet glide__bullet" data-glide-dir="={{ forloop.index | minus: 1 }}"></button>
{% endfor %}
</div>
<div class="glide__arrows flex justify-center align-center gap-small" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<" data-glide-btn>
<span class="svg-disable" data-glide-arrow-left >
{% render 'svg-arrow-left' %}
</span>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">" data-glide-btn>
<span data-glide-arrow-right>
{% render 'svg-arrow-right' %}
</span>
</button>
</div>
</div>
{% endif %}
</section>
If you need different code let me know and i will send it over
enter image description hereTitle: CSS styling problem
Question: how do I style four picture in a row? then the other picture will auto to next row
Background information:enter image description here
enter image description here
Question: here is my product.html. It shows the product in HTML. It becomes weird, the picture likes a stair dropping down.
{% for product in product_images %}
<div class="container" id="big">
<div class="row">
<div class="card" style="width: 18rem;">
<img src="{{url_for('static',filename='products/' + product.product_images)}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ product.product_name }}</h5>
<p class="card-text">price:${{ product.price }}</p>
</div>
</div>
</div>
{% endfor %}
<style>
.row {
display: flex;
width: 100% ;
}
.card {
width: 25%
}
</style>
here is my create product.html. i use the form create the upload the product image for the program. I can create the product image, but the product image shows in one line, I want the product image have 4 images in one line, then the 5th product will go to next line auto.
{% extends "base.html" %}
{% block body %}
<div class="content-section">
<form method="POST" enctype="multipart/form-data">
{{form.hidden_tag()}}
<fieldset class="form-group">
<legend class="border-bottom mb-4">{{ legend }}</legend>
<div class="form-group">
{{form.product_name.label(class="form-control-label")}}
{% if form.product_name.errors %}
{{form.product_name(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{%for error in form.product_name.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{form.product_name(class="form-control form-control-lg")}}
{% endif %}
</div>
<div class="form-group">
{{form.product_price.label(class="form-control-label")}}
{% if form.product_price.errors %}
{{form.product_price(class="form-control form-control-lg is-invalid")}}
<div class="invalid-feedback">
{%for error in form.product_price.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{form.product_price(class="form-control form-control-lg")}}
{% endif %}
</div>
<div class="upload-file">
{{form.product_image.label}}
<input type="file" accept="image/png, image/jpeg" name="violin_product" />
</div>
</fieldset>
<div class="form-group">
{{form.submit(class="btn btn-outline-info")}}
</div>
</form>
</div>
{% endblock body %}
Here is my base.html code
<main role="main" class="container">
<div class="row">
<div class="col-md-12">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block body %}{% endblock %}
</div>
</div>
</main>
I think you're missing the flex property on the children:
.card {
flex: 25%
}
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've recently been having this problem where includes on separate pages that are not loading correctly.
This is my downloads.html:
---
layout: default
---
{% if site.downloads %}
<div class="my-6">{% include downloads.html %}</div>
{% else %}
<h2>Downloads</h2>
<p>There are no downloads at the time. Come back later!</p>
{% endif %}
But what all that shows are:
Here is my _layouts/default.html:
{% include header.html %}
{% if site.layout == 'stacked' %}
<div class="container-lg py-6 p-responsive text-center">
{% include masthead.html metadata=false %}
<div class="container-md f4 text-left border rounded-2 bg-white p-3 p-sm-5 mt-6">
<p class="f5">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:#0366d6 aria-label:Home %}Home</p>
<h1 class="f00-light lh-condensed mb-5">{{ page.title }}</h1>
{{ content }}
</div>
</div>
{% else %}
<div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
<div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
{% include masthead.html metadata=true %}
</div>
<div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
<div class="mx-auto" style="max-width: 900px;">
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %}">
<p class="f5">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</p>
<h1 class="f00-light lh-condensed mb-5">{{ page.title }}</h1>
{{ content }}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% include footer.html %}
Here is my _includes/downloads.html:
<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>Downloads</h2>
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Most of my downloads/others on GitHub.</p>
<div class="d-flex flex-wrap gutter-condensed mb-4">
{% for download in site.downloads %}
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
{% include download-card.html %}
</div>
{% endfor %}
</div>
Here is my _includes/download-card.html:
{% if download.download_url %}
<a href="{{ download.download_url }}" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
{% if download.image_url %}
<img src="{{ download.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ download.name }}">
{% else %}
<div
class="bg-blue-light f4 text-gray-light text-bold rounded-1 flex-shrink-0 text-center mx-auto mb-3"
style="width:64px; height:64px; line-height:64px;"
>
#
</div>
{% endif %}
<p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">{{ download.name }}</p>
{% if download.description %}
<p class="f5 text-gray text-center mb-0 mt-1">{{ download.description }}</p>
{% endif %}
</a>
{% endif %}
And here is my _config.yml:
layout: sidebar
style: dark
plugins:
- jekyll-octicons
- jekyll-github-metadata
- jemoji
permalink: /:year/:month/:day/:title/
defaults:
- scope:
path: ""
type: "posts"
values:
layout: "post"
downloads:
- name: Test
description: This is just a test item
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
download_url: https://example.com
It renders perfectly fine on my home layout:
{% include header.html %}
{% if site.layout == 'stacked' %}
<div class="container-lg py-6 p-responsive text-center">
{% include masthead.html metadata=true %}
<div {% if site.style == 'dark' %}class="text-white"{% endif %}>
{{ content }}
</div>
{% if site.topics %}
<div class="my-6">
{% include interests.html %}
</div>
{% endif %}
{% unless posts_total == 0 %}
<div class="my-6">
{% include thoughts.html %}
</div>
{% endunless %}
</div>
{% else %}
<div class="d-md-flex min-height-full {% unless site.style == 'dark' %}border-md-bottom{% endunless %}">
<div class="flex-self-stretch {% if site.style == 'dark' %}bg-gray-dark{% else %}border-md-right border-gray-light bg-white{% endif %} col-md-5 col-lg-4 col-xl-3 px-4 px-md-6 px-lg-7 py-6">
{% include masthead.html metadata=true %}
</div>
<div class="col-md-7 col-lg-8 col-xl-9 px-4 py-6 px-lg-7 border-top border-md-top-0 bg-gray-light" {% if site.style == 'dark' %}style="background-color: #2f363d !important"{% endif %}>
<div class="mx-auto" style="max-width: 900px;">
{% unless content == "" %}
<div class="f4 {% if site.style == 'dark' %}text-white{% endif %} mb-6">
{{ content }}
</div>
{% endunless %}
{% if site.topics %}
{% include interests.html %}
{% endif %}
{% unless posts_total == 0 %}
{% include thoughts.html %}
{% endunless %}
</div>
</div>
</div>
{% endif %}
{% include footer.html %}
Thanks if you can help. I really don't know why this is happening.
{%if collection.title == "Meat"%}
{% if collection.image %}<div class="collection-image" style="background-image: url('{{ collection.image | img_url: '1024x1024' }}'); max-height:400px; "> {% endif %}
<div class="collection-title text-center" style="padding: 50px 0;">
<h1 class="collection-text--headline title text-center" style="margin-top:30px;">{{ collection.title }}</h1>
{% if collection.description.size > 0 %}
<div class="collection-text--body text-center rte large--three-fifths push--large--one-fifth">
<h4>{{ collection.description }}</h4>
</div>
{% endif %}
</div>
<div class="text-center" style="margin-top: -40px;
padding-bottom: 100px;">
<a href="http://www.greensburymarket.com/collections/all" class="btn btn--large btn--splash uppercase sec-col-button" >Learn More</a>
</div>
{% if collection.image %}<div class="collection-image-overlay"></div>
</div>
{% endif %}
know this is a stupid question but I am stumped. tried moving things around. No idea why this doesnt work