Play! framework 2.0: How to display multiple image?

Question

I need to display a gallery of photos. So here is my template:

@(photos: List[Photo])

@title = {
  <bold>Gallery</bold>
}

@main(title,"photo"){
    <ul class="thumbnails">
    @for(photo <- photos) {
        <li class="span3">
            <a href="#" class="thumbnail">
                <img src="@photo.path" alt="">
            </a>
        </li>
    }
    </ul>
}

And here is my controller method:

public static Result getPhotos() {
    return ok(views.html.photo.gallery.render(Photo.get()));
}

And here is my Photo bean :

    @Entity
    public class Photo extends Model {

@Id
public Long id;

@Required
public String label;

public String path;

public Photo(String path, String label) {
    this.path = path;
    this.label = label;
}

private static Finder<Long, Photo> find = new Finder<Long, Photo>(
        Long.class, Photo.class);

public static List<Photo> get() {
    return find.all();
}

public static Photo get(Long id) {
    return find.byId(id);
}

public static void create(Photo photo) {
    photo.save();
}

public static void delete(Long id) {
    find.ref(id).delete();
}

    }

I put the photo absolute path in src attribute of img node, but doesn't work. What is the best way to achieve this ?

PS: Image are located outside the play application.

What is that mean it doesn't work? Did you preview generated source of the HTML page ? Absolute path to some URL or to some filesystem folder (ie. `/home/user/pics/1.jpg`)? can you open desired photo writing that path in the browser's `address bar`? — biesior, Jun 04 '12 at 14:19
The produced html is a blank page with the title gallery. Photo are not loaded. The value of src attribute is the absolute path of a file (/home/user/library/photo1.png). — mcarrolle, Jun 04 '12 at 14:30
No, I can't not access photo by providing path in browser's address bar. As I say, photo are located outside the play application folder. — mcarrolle, Jun 04 '12 at 14:32

score 5 · Accepted Answer · edited May 23 '17 at 12:04

Take a look at my very similar question: Direct serving files from outside of Play directories structure , finally I used my second suggestion in very basic sample it can be showed as:

public static Result serve(String filepath){
    // some stuff if required
    return ok(new File("/home/user/files/"+filepath));
}

route (use asterisk with *filepath to allow strings with slashes inside):

GET   /files/*filepath    controllers.Application.serve(filepath : String)

view (lack of @ character before photo.path is not accidental)

<img src="@routes.Application.serve(photo.path)" alt="@photo.alt" />

edit:

You of course don't need to serve files trough the controller if you have any HTTP server and ability to create new subdomain/alias pointing to directory. In such case you can just store links as http://pics.domain.tld/holidays_2012/1.jpg or even better as holidays_2012/1.jpg (and then prefix it in the template with subdomain).

Finally you can set-up some alias ie. with Apache to use your domain.tld/* as pointer to Play app and domain.tld/pics/* as pointer to some folder

<VirtualHost *:80>
  ProxyPreserveHost On
  ServerName domain.tld
  ProxyPass  /pics !
  ProxyPass / http://127.0.0.1:9000/
  ProxyPassReverse / http://127.0.0.1:9000/

  Alias /pics/ /home/someuser/somefolder_with_pics/
  <Directory /home/someuser/somefolder_with_pics/>
    Order allow,deny
    Allow from all
  </Directory>
</VirtualHost>

in such case it's important to place ProxyPass /pics ! before ProxyPass / http://...

Thanks you. Really clear response. Now i just have to shrink my photo ;) — mcarrolle, Jun 04 '12 at 20:45

Play! framework 2.0: How to display multiple image?

1 Answers1

Linked