I'm looking to create a way to navigate to the next/previous image in an entry's asset range and display only the current asset at one time(starting from first asset).

{% extends '_layout.html' %}

{% block main %}

<div class="tr">
    {{ entry.title }}

  <div class="row nav">
        <a href="{{ siteUrl }}"><span class="name">Emily Ashcroft</span></a>

    <a class="head" href="{{ siteUrl }}comm.html">Commissions</a>
    <a class="head" href="{{ siteUrl }}port.html">Portraits</a>
    <a class="head" href="{{ siteUrl }}pers.html">Personal</a>
    <a class="head" href="{{ siteUrl }}CV.html">Info</a>


<!-- left side of window links to previous image if there is one, right side links to next image or asset if there is on -->

<a href="{{ siteUrl }}"><div class="left"></div></a>

<a href="{{ siteUrl }}"><div class="right"></div></a>

<div class="container">

<!-- output current asset only -->

        {% for photo in entry.photos %}
  <div class="row">
      <div class="centre">
         <img id="slider" src="{{ photo.first.getUrl() }}" />

  {% endfor %}

{% endblock %}

Click on left side of screen and the previous asset is displayed, click on the right and the next asset is output. I'm struggling to figure if I should use a method similar to paginating links to next/prev entries (but I don't think that would work for assets).

This code is taken from _entry.html page of a section.

Thanks for any help provided.

1 Answer 1


Given that your assets are within an entry, it seems that a gallery browsing mechanism may fit well. I'd suggest a javascript framework such as Fancybox: http://fancyapps.com/fancybox/

Alternatively and perhaps more in line with your specific question, have a look at this related thread: Best way to access getPrev and getNext asset fields

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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