How to Customize Image Size and Placement in Hugo PaperMod Theme Using CSS

In the default layout, images are placed in the center with a width of 100%. However, I felt this was a bit too large, so I tried wrapping the image under the title and changing the width to around 150px.

The changes made to the files are as follows.

blank.css

To change the margins, image sizes, and the number of displayed text lines, add the following code to blank.css.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.entry-content {
    -webkit-line-clamp: 4;
}

.entry-footer {
	text-align: right;
}

.entry-cover {
    margin-bottom: initial;
    text-align: center;
}

.entry-cover img {
    border-radius: 4px;
    display: inline;
    max-width: 100%;
}

.post-meta {
    display: block;
    text-align: right;
}

post-entry.css

Since I couldn’t delete the definition in blank.css, I deleted the following line in post-entry.css.

1
2
3
4
5
6
.entry-cover img {
    border-radius: var(--radius);
    pointer-events: none;
    /* width: 100%; */ <- Delete this line
    height: auto;
}

list.html

To change the image layout, I modified the following section in list.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<article class="{{ $class }}">
  <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- Moved down -->
  <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- Moved down -->
  <header class="entry-header">
    <h2>
      {{- .Title }}
      {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
    </h2>
  </header>
  <div style="display:flex;"><!-- Added -->
    <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- Added -->
      {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- Moved from above -->
      {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- Moved from above -->
    </div><!-- Added -->
    <div style="width:100%;"><!-- Added -->
      {{- if (ne (.Param "hideSummary") true) }}
      <div class="entry-content">
        <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
      </div>
      {{- end }}
      {{- if not (.Param "hideMeta") }}
      <footer class="entry-footer">
        {{- partial "post_meta.html" . -}}
      </footer>
      {{- end }}
      <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
    </div><!-- Added -->
  </div><!-- Added -->
</article>

It seems there are quite a few similar requests.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

I would be grateful if this was supported in the upstream repository as well.