Previousnext - Yellow extension customization Part I

· 3 min ·

As previously mentioned[1], Yellow can be superbly customized to suit one's specific requirements through the use of extensions. Occasionally, though, it becomes necessary to tweak these extensions to seamlessly align with the desired design.

In my case, I had to make adjustments to the Previousnext[2] extension by Anna Svenson. The reason for this was that the default method of linking to the previous and next articles was accomplished using...

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

or by employing

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

or through the shortcode [previousnext] within the article's content. However, I aimed to avoid this approach, as it created the impression that these links were directly related to the article's content, which wasn't always the case.

So, what did I do? To begin with, I inquired whether it was feasible to customize the extension[3], perhaps by incorporating its own layout file, similar to what had been done with pagination. Since this feature wasn't available at the time, I decided to modify the extension file[4], hoping that this adjustment would safeguard my design from being disrupted by future updates. Well, at least that's the idea. :see_no_evil:

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

Next, I integrated the extension into my layout using the following code to provide me with a preview of what needed adjustments and how to achieve them.

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

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

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

This step may not be necessary if the following code line doesn't appear in your layout file:

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

Now, I was ready to tackle the design. I wanted the links to be styled as buttons, aligned both to the right and left, ensuring the 'Next' button is always on the right, even for the first post. To achieve this, I made changes in previousnext.php starting from line 26 onward. I removed the enclosing paragraph tags, assigned the role="button" attribute, and added the CSS class outline via JavaScript:

/* Styling for the previousnext buttons */
document.addEventListener("DOMContentLoaded", previousnextClassesAndStuff);

function previousnextClassesAndStuff() {
  var list = document.getElementsByClassName("previousnext");
  for (var i = 0; i < list.length; i++) {
    var content = list[i].innerHTML;
    content = content.replace("<p>", ""); // remove opening p tag
    content = content.replace("</p>", ""); // remove closing p tag
    list[i].innerHTML = content;

    var links = list[i].getElementsByTagName("a");
    for (var j = 0; j < links.length; j++) {
      links[j].classList.add("outline"); // add class outline
      links[j].setAttribute("role", "button"); // add role button
    }
  }
}

In line 30, I created a paragraph with dummy content that is only inserted if there's no Previous Post:

} else {
    $output .= "<span class=\"dummycontent\"></span>"
}

The CSS to make this work looks like this:

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

To ensure a proper mobile view, I made some adjustments to the button text, and I'm now quite satisfied with the result.

As you can see, Yellow can be easily tailored to your specific needs, even if you have limited or no programming skills.

Reply via e-mail

Back to top