gethugothemes / academia-hugo

Academia is a Hugo resume theme. You can showcase your academic resume, publications and talks using this theme.
https://gethugothemes.com/products/academia/?utm_source=academia_github&utm_medium=referral&utm_campaign=github_theme_about
MIT License
203 stars 181 forks source link

Placement option ignored in posts/projects/talk #24

Open jpmvferreira opened 3 years ago

jpmvferreira commented 3 years ago

From the Wowchemy Docs the featured image field on a post should have the following options:

# Featured image
# To use, place an image named `featured.jpg/png` in your page's folder.
# Placement options: 1 = Full column width, 2 = Out-set, 3 = Screen-width
# Focal point options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
# Set `preview_only` to `true` to just use the image for thumbnails.
image:
  placement: 1
  caption: "Photo by [Geo](https://github.com/gcushen/)"
  focal_point: "Center"
  preview_only: false
  alt_text: An optional description of the image for screen readers.

All options work as expected in my post except for the placement option which makes no change.

jpmvferreira commented 3 years ago

For reference here's a few screenshots of my webpage, with an image that is 16:9 in 1080p

Here's the default looking post: image

With the following index.md:

---
title: Display Jupyter Notebooks with academia
subtitle: Learn how to blog in academia using Jupyter notebooks
summary: Learn how to blog in academia using Jupyter notebooks
authors:
- admin
tags:
- human
categories: []
date: "2019-02-05T00:00:00Z"
featured: false
draft: false

# Featured image
# To use, add an image named `featured.jpg/png` to your page's folder.
# Focal point options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
image:
  placement: 1
  caption: 'Image credit: [**Unsplash**](https://unsplash.com/photos/CpkOjOcXdUY)'
  focal_point: "Center"
  preview_only: false

# Projects (optional).
#   Associate this post with one or more of your projects.
#   Simply enter your project's folder or file name without extension.
#   E.g. `projects = ["internal-project"]` references `content/project/deep-learning/index.md`.
#   Otherwise, set `projects = []`.
projects: []

# Set captions for image gallery.
gallery_item:
- album: gallery
  caption: Default
  image: theme-default.png
- album: gallery
  caption: Ocean
  image: theme-ocean.png
- album: gallery
  caption: Forest
  image: theme-forest.png
- album: gallery
  caption: Dark
  image: theme-dark.png
- album: gallery
  caption: Apogee
  image: theme-apogee.png
- album: gallery
  caption: 1950s
  image: theme-1950s.png
- album: gallery
  caption: Coffee theme with Playfair font
  image: theme-coffee-playfair.png
- album: gallery
  caption: Strawberry
  image: theme-strawberry.png
---

As you can see the placement option provides no change.

Here's how it looks with the image being just a preview: image

This is exactly how i wanted it to work, but with an image on top that would fill the column width, regardless if it had to upscale or how look very big, I would then take care of the resolution myself.

It also makes the author, date, time to read and social media share much better.

In a cellphone it also looks good as it fits everything to width: image

jpmvferreira commented 3 years ago

From the Wowchemy docs there's also the option for a header image that doesn't work either.

For reference I've tried placing the image in static/media and static/img and nothing worked.

jpmvferreira commented 3 years ago

I would also like to know, as my knowledge is limited, how do I change de width of the borders of the page.

If you look at it the entire theme is developed in such a way that, at least for my screen on 1080p, everything fits perfectly in a A4 sheet except for the talks/publications/projects posts, which kills consistency and I feel like it should be the default since that's how most webpages behave and looks better and more organized.