2

I need to display entries that contain an image, and a piece of text, on the home page of my website.

When someone clicks 'next', I would like it to go to the next entry (by post date) and display that entries image and text. I also need the user to be able to click on 'previous' (by post date again) and 'random'.

How do I go about this?

Thanks!

4

You could use the getNext() and getPrev() methods on your entry like this:

{% set params = craft.entries.section('yoursection').order('postDate asc') %}

{% set prevEntry = entry.getPrev(params) %}
{% set nextEntry = entry.getNext(params) %}
{# to access url, I use #}
{{ prevEntry.url }}
{# to access title, I use #}
{{ prevEntry.title }}

NOTE: I've shamelessly pinched this code from the answer here.

You need to setup the params variable so that it would create a list of entries which would include your current entry and the next/prev entries you expect. So include your ordering by postDate etc.

| improve this answer | |
1

You should read about how to create a plugin from the Craft docs, then you can create one with Pluginfactory.io

I'll reload the entries with javascript in my example since I don't like reloading the page every single time and ajax is the way to go in these days. You can achieve this without any javascript/php code with only twig but users would have to refresh and reload the entire page then.

First you need a Controller that loads your entry and return a template. You could as well increase your limit and show/hide the rest of the entries via javascript or css but since you asked for only one I'll provide the code to only show one.

public function actionSearchEntry()
{
    $offset = craft()->request->getParam('offset');
    $criteria = craft()->elements->getCriteria(ElementType::Entry);
    $criteria->section = "news";
    $criteria->orderBy = "postDate";
    $criteria->limit = 1;
    $criteria->offset = $offset;
    $entries = $criteria->find();
    $template = '';
    // to let your javascript know if it was successfuly
    $success = false;
    if($entries){
        $template = craft()->templates->render('path/to/your/template', array(
            'entry' => $entries[0]
        ));
        $success = true;
    }else{
        // render some not found template or search again to show the first one or so
    }
    $this->returnJson([
        'html'      => $template,
        'success'   => $success
    ]);
}

And this is your javascript file

var offset = 0;
$("#reloadButtonClick").change(function(){
    offset++;
    var data = {
        action: "pluginname/controllerName/searchEntry",
        offset: offset
    };
    $.ajax({
        type: "post",
        url: '',
        data: data,
        success: function(data){
            if(data.success === true){
                $("#idOfYourDiv").html(data.html);
            }else{
                // display some errors or so
                offset = 0;
            }
        },
        error: function (XMLHttpRequest, textStatus) {
            console.log("Status: " + textStatus);
        }
    });
});

When you want to "scroll" to the previous entry you have to decrease your offset at some point. Note: this is just a very basic example to show you the direction, I did not include much error handling you should to that on your own

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.