Stiky recent post

support
1

Hi guys, can you help me find, why my sticky didn’t work
I tried reducing the image using width, but it still doesn’t move to the right of the article

here theme

and here my blog
https://bitpaus.com/kronologi-peretasan-ronin-network/

2

alwase better to post code, not the result - both links point to generated sites

guess your repo, is the same as in your last post.

You want to change the display of the featured post having image and text exchanged, right?

hint: when customizing a theme it’s better to not change the theme code directly but copy the files you want to change to your sites layout folder.

Haven’t checked what and where you changed other stuff, but seems you already found the relevant template for the featured post: themes\pehtheme-hugo\layouts\_default\home.html

  • copy it to layouts\_default\home.html and do the changes there

  • you already tried something there and made at least one typo at line 39. Check your site to see it . Change it back to <section class="mb-16">. by adding the opening <

The featured image is handled in the first range loop. There are two elements inside

  1. <figure> lines 7-26 for the image
  2. <div> lines 27-30

just exchange the order of these two elements:

featured post part of home.html 
...
<!-- Feature post by tag = "feature" -->

{{- range where .Site.RegularPages "Params.tags" "intersect" (slice "feature" ) | first 1 -}}
<section class="block md:flex relative group p-6 lg:p-10 space-y-6 md:space-x-6 my-14 bg-zinc-100 rounded-3xl hover:bg-blue-100">
   <div class="basis-1/2 self-center">
      <h2 class="text-2xl md:text-3xl lg:text-5xl font-bold mb-4"><a class="before:content-[''] before:z-10 before:top-0 before:right-0 before:left-0 before:bottom-0 before:absolute before:pointer-events-auto" href="{{ .Permalink }}">{{ .Title}}</a></h2>
      <time datetime="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}"><span class="font-bold">{{ .Date.Format "Jan 02, 2006" }}</span></time>
    </div>
    <figure class="basis-1/2 w-full aspect-video overflow-hidden rounded-2xl border">

    {{- if .Params.image }}

      {{- if (strings.HasPrefix .Params.image "http") }}

        <img class="object-cover group-hover:scale-105 transition duration-500 cursor-pointer" src="{{ .Params.image }}" alt="{{ $.Name }}" style="width: 100%; height: 100%; object-fit: cover;">

      {{- else }}

        {{- with $imgfeature := resources.Get .Params.image }}
          {{ $imgfeature := $imgfeature.Resize "720x Q85" -}}
          <img class="object-cover group-hover:scale-105 transition duration-500 cursor-pointer" src="{{ $imgfeature.Permalink }}" alt="{{ $.Name }}" width="{{ $imgfeature.Width }}" height="{{ $imgfeature.Height }}">
        {{- end }}

      {{- end }}

    {{- end }}

  </figure>
</section>

{{ end -}}

<!-- / End feature post  -->
...
3

typo already solve, but still not work.

i add width to class=“lg:sticky lg:top-8” style=“width: 30%;” in aside.html, This successfully shrinks the image but till, recent doesn’t go up to the empty space next to the article

4

Your “sticky sidebar” works as expected based on the code I am seeing on that page you linked. Add a screenshot with some indicators on what is “not working” so we can understand the issue better.

1 Like
5

i did exactly what I described in my post. just swapping the two elements.

after that the image shows right and the text left.

i did not change any code.

i did this on a large screen didnt check small devices.

please give it a try.

if that does not work, please provide an up to date repo and elaborate on the expectations

  • what you get
  • what you want

maybe I understood something wrong

2 Likes