Is it possible to make the previousnext extension customisable, like the pagination?

[pftnhr]

I have now changed the previousnext extension so that it matches the design of my website. Unfortunately, this only works until the next update.

I would like there to be a layout file for this, which I can then integrate in the desired place.

[annaesvensson]

No, this is not possible at the moment.

[pftnhr]

It's a pity, but I've helped myself and hope that this will work for a while: https://frittiert.es/articles/2023/08/extension-customization

[annaesvensson]

Would you mind sharing some of your customisation in this discussion? External links may disappear over time and then we would lose everything you have done. With some additional context, we also have a better chance of understanding what people are doing and which functionality is missing. The next developer who stumbles over the same problem will be happy about it.

[pftnhr]

With pleasure! Where should I start? Ok, first of all the basic problem I had: The links to the previous and next pages/posts were by default sent via

<?php echo $this->yellow->page->getExtraHtml("link") ?>

or per

<?php echo $this->yellow->page->getExtraHtml("previousnext") ?>

within the layout files or with the shortcode [previousnext] into the *.md of the post. I wanted to avoid this, however, because it gave me the impression that the links were related to the content, which of course is not always the case.

So first I changed the version in the previousnext.php so that my design would not be shot to pieces in a future update. At least I hope that's how it works. 🙈

class YellowPreviousnext {
    // const VERSION = "0.8.18";
    const VERSION = "0.9.18";

Next, I integrated the extension into my layout with the following code to give me an overview of what I need to adapt and how.

<?php echo $this->yellow->page->parseContentShortcut("previousnext", null, "block"); ?>

Since the links then appear twice, once inside the content and once outside, I commented out the line 46 statement || $name=="link" in previousnext.php:

if ($name=="previousnext" /* || $name=="link" */ ) {

This step is not necessary if this code line doesn't appear in your layout file:

<?php echo $this->yellow->page->getExtraHtml("link") ?>

Now I could get to work on the design. I wanted to have the links as buttons that are aligned right and left and that the Next button is always on the right, so also for the first post. For this, I made changes in the previousnext.php from line 25 onwards. I removed the enclosing paragraph, gave the links the role="button" and the CSS class outline (both changes are only relevant for me, as I use Pico.css) and in line 29 I created a paragraph with dummy content, which is only inserted if there is no Previous Post. And this is what the new lines 25 to 37 of the previousnext.php now look like:

$output = "<div class=\"previousnext\" role=\"navigation\" aria-label=\"".$this->yellow->language->getTextHtml("previousnextNavigation")."\">\n";
                if ($pagePrevious!=null) {
                    $text = preg_replace("/@title/i", $pagePrevious->get("title"), $this->yellow->language->getText("previousnextPagePrevious"));
                    $output .= "<a class=\"previous outline\" role=\"button\" href=\"".$pagePrevious->getLocation(true)."\">".htmlspecialchars($text)."</a>";
                } else {
                    $output .= "<p class=\"dummycontent\"></p>";
                }
                if ($pageNext!=null) {
                    if ($pagePrevious) $output .= " ";
                    $text = preg_replace("/@title/i", $pageNext->get("title"), $this->yellow->language->getText("previousnextPageNext"));
                    $output .= "<a class=\"next outline\" role=\"button\" href=\"".$pageNext->getLocation(true)."\">".htmlspecialchars($text)."</a>";
                }
                $output .="</div>\n";

I have designed the CSS class previousnext as follows:

.previousnext {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-top: var(--font-size);
}

p.dummycontent::before {
	content: " ";
}

.previousnext {
	clear: both;
}

I hope this is comprehensible and not too extensive. 😄

[pftnhr]

I have adjusted the code in previousnext.php a little so that long post titles do not break the links on mobile devices. I shortened the output of the $text variable to 25 characters plus the small arrow and the three dots.

$output = "<div class=\"previousnext\" role=\"navigation\" aria-label=\"".$this->yellow->language->getTextHtml("previousnextNavigation")."\">\n";
                if ($pagePrevious!=null) {
                    $text = preg_replace("/@title/i", $pagePrevious->get("title"), $this->yellow->language->getText("previousnextPagePrevious"));
                    $output .= "<a class=\"previous outline\" role=\"button\" href=\"".$pagePrevious->getLocation(true)."\">".htmlspecialchars(strlen($text)>25 ? "← ".substr($text,0,25)."..." : $text)."</a>";
                } else {
                    $output .= "<p class=\"dummycontent\"></p>";
                }
                if ($pageNext!=null) {
                    if ($pagePrevious) $output .= " ";
                    $text = preg_replace("/@title/i", $pageNext->get("title"), $this->yellow->language->getText("previousnextPageNext"));
                    $output .= "<a class=\"next outline\" role=\"button\" href=\"".$pageNext->getLocation(true)."\">".htmlspecialchars(strlen($text)>25 ? substr($text,0,25)."... →" : $text)."</a>";
                }
                $output .="</div>\n";

[annaesvensson]

I wonder if we could make this extension a bit more useful. Right now the previousnext extension is super easy to install for new users, however, it does not give enough options to experienced users. Only layout files give web designers full control over their HTML code and as a bonus, each theme can come with its own set of layout files. We went this route with the pagination from the start, because it was clear that there is no standard look-and-feel for a pagination, some want to show page numbers, others prefer buttons with arrows. We could handle previous/next links in a similar way. There is a fine line somewhere where it makes more sense to implement something as a layout. An advantage would be that it can be customised down to the last byte. A disadvantage would be that adding a previous/next button means installing a different theme or editing your blog layout.

What do you think? Any comments are welcome.

[pftnhr]

I am completely in favour of this! How would it be if the previousnext extension would work with the pagination layout, but theme developers would be given the possibility to create a custom layout for previousnext? Because in principle the same functionality is provided.

So if there is no previousnext.html, then the pagination.html takes effect.