Setting thumbnail_image_position to 'bottom' makes a smaller empty line

[chrisjwelly]

Description

The default configuration for thumbnail_image_position is right. I changed this to bottom in order remove the seemingly empty space on the right side. I have written several paragraph of my posts, and I separate my paragraphs with an empty line. When I am still using the default thumbnail_image_position to right, the empty lines are shown clearly, but upon changing to bottom, the empty lines looks like it is missing, presumably because the size is much smaller.

I notice that this only applies to my post which has a <!--more--> to create a post excerpt. By looking at the CSS using web developer tools, this seems to apply only to content of posts with the postShorten-except applied to it. I tried (temporarily) changing it to postShorten-content using the web developer tools, and it seems to look much better.

Expected behavior

When setting thumbnail_image_position to 'bottom', post excerpts should have a clearly visible empty lines.

Current Behaviour:

Expectation (notice how the empty lines are much more visible):

Steps to reproduce the bug

1. Go to themes/tranquilpeak/_config.yml and change thumbnail_image_position to bottom.
2. Create a new dummy post: hexo new post test-post-excerpt
3. Write multiple paragraphs, separated by empty lines (example below)
4. Insert a <!--more--> to turn it into a post excerpt
5. Run hexo server to view the outcome
6. Extra: Remove <!--more--> to turn this into a normal post without an excerpt to compare

Example text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat aliquam eleifend. Curabitur bibendum, nulla eu convallis eleifend, ante risus pretium lacus, a facilisis lacus sapien vitae metus. Etiam ex sapien, blandit id ex ac, bibendum consequat diam. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat aliquam eleifend. Curabitur bibendum, nulla eu convallis eleifend, ante risus pretium lacus, a facilisis lacus sapien vitae metus. Etiam ex sapien, blandit id ex ac, bibendum consequat diam. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat aliquam eleifend. Curabitur bibendum, nulla eu convallis eleifend, ante risus pretium lacus, a facilisis lacus sapien vitae metus. Etiam ex sapien, blandit id ex ac, bibendum consequat diam. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat aliquam eleifend. Curabitur bibendum, nulla eu convallis eleifend, ante risus pretium lacus, a facilisis lacus sapien vitae metus. Etiam ex sapien, blandit id ex ac, bibendum consequat diam. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat aliquam eleifend. Curabitur bibendum, nulla eu convallis eleifend, ante risus pretium lacus, a facilisis lacus sapien vitae metus. Etiam ex sapien, blandit id ex ac, bibendum consequat diam. 
<!--more-->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris volutpat aliquam eleifend. Curabitur bibendum, nulla eu convallis eleifend, ante risus pretium lacus, a facilisis lacus sapien vitae metus. Etiam ex sapien, blandit id ex ac, bibendum consequat diam. 

Environment

• Operating system with version : Ubuntu 20.04
• Node version: 12.3.1
• Hexo version: 5.0.0
• Hexo-cli version: 4.1.0
• Tranquilpeak version: 4.0.0 with no modifications (save for some config files)
• Site configuration file: Link to _config.yml
• Theme configuration file: Link to _config.yml
• Hexo plugin:

  hexo-site@0.0.0 /home/chrisjwelly/blog
  ├── hexo@5.0.0
  ├── hexo-deployer-git@2.1.0
  ├── hexo-generator-archive@1.0.0
  ├── hexo-generator-category@1.0.0
  ├── hexo-generator-feed@2.2.0
  ├── hexo-generator-index@1.0.0
  ├── hexo-generator-tag@1.0.0
  ├── hexo-renderer-ejs@1.0.0
  ├── hexo-renderer-marked@2.0.0
  ├── hexo-renderer-stylus@1.1.0
  ├── hexo-server@1.0.0
  └── hexo-wordcount@6.0.1

Additional information

• [ ] I can fix this bug

I investigated the CSS of both postShorten-excerpt as well as postShorten-content, but I see almost no difference except for margin-top. Even when I made them consistent, it didn't fix the issue.

• postShorten-excerpt:
• postShorten-content:

[LouisBarranqueiro]

👋 @chrisjwelly , thanks for the detailed report. I'm checking this out right now.

[LouisBarranqueiro]

I found why and implemented a fix. I will release a new version including this fix real soon :)

[chrisjwelly]

@LouisBarranqueiro Awesome! Thanks.

If you don't mind me asking, how did last-of-type fix the issue?

[LouisBarranqueiro]

@chrisjwelly sure 🙂 this CSS rule will remove the bottom margin of the last paragraph in the excerpt instead of (previously) removing the bottom margin of all paragraphs in the excerpt. last-of-type is a CSS selector to select the last element of type p in the excerpt (div).

[chrisjwelly]

@chrisjwelly sure 🙂 this CSS rule will remove the bottom margin of the last paragraph in the excerpt instead of (previously) removing the bottom margin of all paragraphs in the excerpt. last-of-type is a CSS selector to select the last element of type p in the excerpt (div).

I see, thank you very much!