puresyntax71/hugo-theme-chunky-poster

A simple, bootstrap 4 based hugo blog theme.

Chunky poster

A simple, bootstrap 4 based blog theme. The structure and design is based on the Prisma blog.

Demo | Demo 2

Screenshot

Features

• Multi-author
• Image processing
• Basic i18n
• Prism
• LazyLoad
• Commento
• Image gallery

Usage

git clone https://github.com/puresyntax71/hugo-theme-chunky-poster.git

Check out the configuration at exampleSite/config.toml for configuring your Hugo site.

Authors

The authors structure is based on this blog post.

1. Add the taxonomy "author".

2. hugo new authors/john-doe/_index.md

3. Configure the author metadata twitter.

4. Configure the author metadata images. First image on the list will be used as the avatar and on the profile page. Images are page resources under the author e.g. content/authors/john-doe/image.png.

5. Assign the author to a content:

   ---
   authors: ["John Doe"]
   ---

Content images

The images structure is based on this blog post.

Upload the images that will be used on content pages under content/images and create the file content/images/index.md with the front matter:

---
headless: true
---

Set the path to the image in a post content under the images property:

---
images: ["/images/image.png"]
---

The first image on the list will be used as the "cover" image on a post.

Prism

Configure Prism under [params.prismJS] and set enable to true. Change the theme under theme.

[params]
  [params.prismJS]
    enable = true
    theme = "okaidia"

Commento

Configure Commento under [params.commento]. Set enable to true and add the URL at url:

[params]
  [params.commento]
    enable = true
    url = "https://somename.commento.io"

Share

Enable sharing under params with share set to true and disable per-post sharing by setting share to false in the front matter.

[params]
  share = true

---
share: false
---

Image gallery

The image gallery feature uses the ekko-lightbox and figure shortcode. This is just a simple implementation of the lightbox gallery feature from the library.

Customization

Fork the project and run yarn watch during development.

The project has an .nvmrc if you wish to use nvm.

The application javascript file is located at src/js/app.js.

For customizing SCSS, the main entrypoint is at src/scss/style.scss. Bootstrap variables can be overridden in the _variables.scss file. The theme's styles are located at src/scss/chunky-poster.scss.

For production, you can run yarn build for the assets to be updated.

Credits

• Victor Hugo
• hugo-theme-even
• Blank
• CleanWhite

Images from Unsplash and Freepik.

License

This theme is released under the MIT license.

hugo-theme-chunky-poster's Issues

How to Use with Cloudinary

I am trying to move my image hosting Cloudinary for performance reasons, but I cannot figure out how to get Chunky Poster to use the absolute path.

I've changed the img tag in Card.html to <img src="{{ $.Site.Params.cloudinary_base_url }}/{{ with $page.Params.images }}{{ index . 0 }}{{ end }}" class="card-img-top mx-auto d-block" alt="{{ $page.Title }}">.

In local testing, this produces: http://localhost:1313/https://res.cloudinary/.... I cannot figure out why the base URL to the site is prepended.

Thanks.

Tags badge in blog post not rendering

I'm trying to make tags badge appear in blog posts.
I se that in single.html the code is present, but tags don't appear.

I tried to add tags in the header copying them from a page of your exampleSite, but the site then doesn't render and gives an error because the heaer is formatted
tags = ["value","value2"]
but Hugo is expecting
tags: ["value","value2"]

is that the cause of the issue?

The "e.g." emojis as in emoji-support.md don't render

E.g. just writing e.g. :​heart: in the file surrounding w. HTML elements does work.

previous webpack scss problem continued.

have been trying for days and still can't really figure out how to properly using the victor hugo webpack boiletplate with the theme.
At first i thought it's because it didn't includes scss but i realised the webpack included everything. Is it because the folders logic is different from what expected from webpack setting from the theme?
https://dev.to/kazushikonosu/use-webpack-with-hugo-to-manage-assets-for-your-static-website-2172
https://webpack.js.org/loaders/sass-loader/
https://webpack.js.org/guides/production/

Not sure Mr puresyntax can really help us to test it out a bit by trying to using your theme on victor hugo boilerplate.
It could help because I think many beginners learn from the tutorial of netlify and trying to use your theme on metlify itself.

I am confused about some files like main.js , app.js and a few src folders and files.

From last thread you talked about simple deployment. Are there are resources apart from the link you wrote last time? Just realised i have never tried a simple deployment.

Double escape for special characters in links

It seems that the text of links is escaped twice. For example: [a'a](/) is shown as a’a, that is a’a in the source HTML.

I tested it and it's not happening with other themes, so I imagine it has to do with this theme. I tried looking at the code but couldn't figure out why this is happening. I'm not very familiar with Hugo, but I'll gladly help to fix it if someone could point me to the source of this issue.

Trying to add fa-share icon to sharer.html produces a !/? icon

I've added Parler to sharer.html as follows:

 <li class="nav-item">
            <a class="nav-link" target="_blank" href="https://parler.com/new-post?message={{ .Title | htmlEscape }}&url={{ .Permalink | htmlEscape }}">
              <i class="fa-fw fab fa-share"></i>
          </a>
        </li>

Everything works except the fa-share icon doesn't show up; this does:

Thanks for the help

How to set wordcouns and reading time like your sites？

Thx your geart work! I like it, but I have some troubles. Like your site, How to set wordcounts and reading time？

Syntax highlighting CSS is broken?

This is from gitlab:

First, thank you so much for this fantastic theme. Our lab needs a quick but professional looking website that's more than a minimal blog, so thank you!

In both the demo website as well as my own installation (NB: I have correctly copied all content/ from exampleSite, so unlike the live demo, images, etc. show up correctly), the CSS in the syntax highlighting shows up with a sort of offset drop-shadow. See it here:

https://themes.gohugo.io//theme/hugo-theme-chunky-poster/post/markdown-syntax/

under "Code block with Hugo's internal highlight shortcode". While working on this issue, I found that in the exampleSite/ config.toml, the prismJS theme was left blank (""). By filling this in the problem was resolved. Thus I suggest that a theme be filled in in the example config.toml.

However, I also found that disabling prismJS and enabling codeFences also did not work properly, which must be a CSS issue?

Thanks again and kind regards

Some fontawesome won't appear

Hai,

This is my first time to use Hugo 😁️,

I have some trouble when i'm trying to add search icon using <i class='fa-fw fab fa-search'></i> the search icon won't appear (they just display exclamation logo with loading bars),

afterward i try to change to fa-twitter the twitter logo displaying correctly.

Mmark is deprecated and will be removed in a future release.

mmark needs to be replaced as it's due to be decommed:

Found here:

content/post/math-typesetting.mmark
7:markup: mmark

themes/hugo-theme-chunky-poster/exampleSite/content/post/math-typesetting.mmark
7:markup: mmark

Link: https://gohugo.io//content-management/formats/#list-of-content-formats

Add support for git info

Add support for Git info variables.

params.social email address with double slaches

Not sure, if this is theme issue, blogdown or HUGO issue, but while we have: email = "[email protected]" in config.toml, when clicking on email, email address retrieved is //[email protected] with to slashes...

Our site: https://corona-stat.lt
Github repo: https://github.com/justasmundeikis/corona-stat-lt-blog

Need help getting the exampleSite working

I'm just starting out with Hugo and with this theme. With the instructions in the README, I can't get the example site working. Here's what I'm doing:

• create a new hugo site hugo new site mywebsite
• initiate git repo cd mywebsite && git init
• download the theme git submodule add https://github.com/puresyntax71/hugo-theme-chunky-poster.git themes/hugo-theme-chunky-poster
• copy the content of the /themes/hugo-theme-chunky-poster/exampleSite to / (the root of the website)

When running the hugo server command it spits allot of message about missing layout files. I noticed there is a layouts folder in the theme's folder, so I copied that. That still doesn't produce a working example site, as can be seen in the demo.

I'm sure I am missing something. Could you please nudge me in the right direction?
My goal is to have the theme's examples site up and running as in the demo. From there I will start customising things.

Many thanks in advance! 😄

does this theme not work with github.io site?

I tried to use this theme to host my github.io site and I followed the set of deployment steps from herehttps://gohugo.io/hosting-and-deployment/hosting-on-github/

but I am getting 404 site not found even though the htmls are committed. Does this theme requires netlify?

About image in front-matter

Thx your great work. In the text, we can use the markdown image hyperlink ![]()or the image link format defined by the theme, but in the front-matter, can the image be hyperlinked?

Similar css js render issue for Netlify Host

First of all your theme is amazing and i have learnt a lot from it.
Trying to play around with it by making a blog. Everything seems to be perfect running local until I serve it to Netlify. Obviously your pipeline is a bit different from what I have been blogging on another 2 years old blog. I have spent hours trying to figure out the problem yet I have to surrender to it coming to seek your help.

I am not sure there are steps i have been missing. Originally I was wondering it was just a problem of relative link. I tried to change the baseURL from "/" to a domain. It seems doesn't work and I have no clues whether i need to change something on the partial/head.html on the href for the min.js and min.css.

Here is the website https://www.nipponhashi.com and I can see the from the console returning .min.js file missing as the href is pointing to dist/blahblahblah.

Did I miss something so that I cannot generate the html properly with a whole link https://www.nipponhashi.com/dist/blah for it?

I am looking forward to seeing your reply soon.

Unable to Manage.

Hi all,

Sorry! I wasn't really able to manage anything in this repo. It's been a tough year. Been busy with both work and life, and recently I've been dealing with the pandemic that has caught up in our place.

I really appreciate, despite a small community, all the help that's been happening in this project even though I haven't really had a chance to answer or review any issues or PRs.

Feel free if you want to fork, manage (message me if you want to), or do whatever you want with the repo.

I've disabled dependabot for lesser noise on the repo. I've also closed all the PRs only related to dependabot. Was originally planning to just remove webpack and use hugo pipes.

Thank you very much!

RSS icon broken

the rss icon is broken (also on your blog) - I'm not sure why, I tried to fix it myself but got nowhere

Add support for TOC

Add support for table of contents.

Top bar on iOS broken

on safari on ios the top bar stays invisible when you scroll down and all the way back to the top.
In order to see it again one has to scroll down and a little up again (but not all the way).

Apostrophe not rendering properly in post intros

' show's up as $rsquo; on the homepage for posts older than latest. They work fine on the latest one.

A workaround which works for me is to escape these apostrophes like so in the post markdown: how\'s.

Aligning text to the center doesn't work

I tried using <div align="center">Lorem ipsum</di>, but when using it like this, text disappears.

Is this an issue or is there a workaround this?

Thanks!

overriding styles

Hi,
this is probably a newb/general hugo question but I can't seem to override the stylesheets.

in my site root i made an /src/scss/chunky-poster.scss
also tried /static/src/scss/chunky-poster.scss

...but no joy. Can't even change the background colour!
Do I need to build out the scss files first or is that handled by Hugo?

Cheers,
Pete.

Fix multilingual pages

Pages are broken when multiple languages are enabled.

Question: why main content has content-page css class

Hi,
thank you for the theme, I like it.

I'm noob in css and web design/front-end stuff. I'm trying to learn a little bit. I see that main tag has content-page class, but in css files I can't find it. Could you answer what is a role of content-page?

Example from single.html:

<main class="content-page container pt-7 pb-5">

Best regards,
Łukasz

Adding line numbers for prism

I'm new to Hugo, Is there any way to add line numbers plugin in prismjs?
Thanks for the awesome theme

Telegram Socials

Socials for telegram doesn't seem to be working

HTML tags appearing in Home page UI and in the generated Public HTML (escaped form)

Hi, firstly, great work with the theme.

On building the site in my local, the generated index.html in the Public directory has escaped HTML tags in the posts cards which appear in the Home Page. Thus, while viewing the home page, I see the actual HTML tags (like <p>) in the text of the posts cards.

Attaching screenshots below:

1. One of the card in the index.html in Public/ dir:

2. How this card looks in the UI:

More details:

Also, the first post card in the Home Page (which appears at the top and covers a complete row), does not have this issue. Just the post cards appearing as tiles in the home page has them.

If there are any links in the article, they start appearing also in the UI (as they are escaped in the generated HTML) as <a link...>

Let me know how to resolve the HTML tags appearing issue.

Thanks.

Preview images of older posts are stretched

I was customising the theme because i noticed that older posts in the main page are getting stretched.

I think this is not ideal and I would rather preserve the image aspect ratio by changing .Resize to either .Fill (which keeps the image box aspect ratio and crops the image inside) or .Fit (which changes the image box aspect ratio, but keeps the full image)

Blur resized author image

the small author pic included in posts is really blurry on safari on ios (and I guess all mobile phones?) even though the original is high res. If you go to the author page everything is fine again.

Images from opengraph.html and twitter_cards.html result in 404 errors

The images from these internal templates result in 404 errors.

<meta property="og:image" content="https://hugo-theme-chunky-poster.netlify.com/image-gallery.jpg" />

This does not resolve

Readtime and Wordcount not working

Hi, Im playing around with your theme, which I find great. But apparently Word Count and Read Time is showing no values on the post pages. Do you have an idea, why?

https://5e31af7fb8ec1d000805a002--romantic-nobel-925ac9.netlify.com/

Cannot paginate Blogposts

There's a variable in config.toml which sets paginate = 2 however, I do not see this being used anywhere in the codebase.

Is there a way to add pagination ? Or if there is currently no support, is there a roadmap for this?

How to use the theme for multi-lingual gitpage?

Thank you for creating such a wonderful Hugo theme.

This theme is tagged 'multilingual' on Hugo theme pages, but cannot find a function to support multilingual on this github readme.md. Can you kindly explain how to use this theme to support multi-languages, please?

bad static site rendering

I deployed my static site generated with hugo in a nginx container with the following configurations:

version: "3.7"

services:
  renard-resilient:
    image: nginx:latest
    container_name: renard-resilient
    labels:
      - traefik.backend=renard-resilient
      - traefik.frontend.rule=Host:renard-resilient.fr
      - traefik.docker.network=proxy
      - traefik.port=80
    networks:
      - proxy
    volumes:
      - .:/var/www/html # `.` is the content of the public folder
      - ./nginx.conf:/etc/nginx/nginx.conf

networks:
  proxy:
    external: true

Note: Please, do not take care about the traefik settings. It still does not work in local when I run my nginx container by exposing its port (80)

My nginx.conf:

events {}
http {
  server {
    listen 80;
    listen [::]:80;

    server_name renard-resilient.fr www.renard-resilient.fr;

    root /var/www/html/;
    index index.html;

    location / {
      try_files $uri $uri/ =404;
    }
  }
}

In my config.toml, I have baseURL = "https://renard-resilient.fr".

---

My site renders like this:

I can access to the minified files with:

• css
• js

I do not understand why my static site does not render the css.

My static site has a good redering when I use hugo server.

Can you help me?

How to use commento

Sorry, but I don't understand how to use commento.
I already maked signup and put my link, but I don't get how to update the link in config.toml
What link shuld I put in "https://somename.commento.io"?
Tks

Title Tag

The title tag displays the same '.Site.Title' on all pages. This is bad for SEO. The title tag should display unique titles for each page that has been assigned one. For example:
'Markdown Syntax Guide | Hugo Themes'
not:
'Hugo Themes' everywhere.

Can someone add NetlifyCMS support!

Hi, I want to know if anyone has added support for NetlifyCMS. Thanks!

favicon and Page width

Thx @puresyntax71 , I really like your themes, it's very beautiful. But I have two issues:

• How to modify the page width of the post？ I think the default setting is a bit narrow, I do not know in which file to modify.
• How to add favicon for web pages?