Meteor only retrieving one image for all of the item in collection

Question

I have a FS.collection that holds one image per posted item. I have a template that lists every single item, but every time a new item with a picture of it is uploaded, that newest uploaded picture replaces the picture for every single item.

Here is the CSS:

.demo-card-square > .mdl-card__title {
  color: #fff;
  background: url('{{image.url store="images"}}') bottom right 15% no-repeat #46B6AC;
}

Here is the declaration of the collection:

Images = new FS.Collection("images", {
  stores: [new FS.Store.FileSystem("images", {path: "~/uploads"})]
});

Here is the item helper. It's supposed to get each item's unique photoID and then find the image in the collection. It seems like it only does it for the most recent image though:

Template.item.helpers({
  image: function () {
    console.log(this);
    return Images.findOne(this.photo._id); // Where Images is an FS.Collection instance
  }
});

I also checked the mongo shell, and the images are being successfully uploaded, so I know they're all successfully saved. Is there anything I need to change in the helper code to get the image to correctly display for each individual item? The other attributes of the item, such as its name and description, correctly show up on its respective template, but not the image.

score 1 · Accepted Answer · answered Sep 08 '15 at 21:37

1

A simpler approach would be to inline the reference to the image in a style tag, that will avoid a proliferation of css styles:

<div class="demo-card-square mdl-card mdl-shadow--2dp"
  style="background: url('{{image.url}}') store='images'">

answered Sep 08 '15 at 21:37

Michel Floyd

18,793
4
24
39

Out of curiosity, do you happen to know what the '>' does in the ".demo-card-square > .mdl-card__title"? – Gabriel Garrett Sep 08 '15 at 21:39
mdl-card__title is an [immediate child](http://stackoverflow.com/a/4459872/2805154) of demo-card-square – Michel Floyd Sep 08 '15 at 21:41

score 0 · Answer 2 · answered Sep 08 '15 at 20:42

Turned out the issue was because I was setting the background image for a specific CSS class, as seen here:

    .demo-card-square > .mdl-card__title {
  color: #fff;
  background: url('{{image.url store="images"}}') bottom right 15% no-repeat #46B6AC;
}

Because of this, the most recently loaded image would naturally set the background image URL to that most recent image. I added an ID on this CSS selector unique to the ID of each uploaded item, and subsequently added this ID as an attribute on the actual html tag that the class was selecting. Like So:

  #{{_id}}.demo-card-square > .mdl-card__title {  //this line is not a comment, but SOverflow marks it as such.
    color: #fff;
    background:
      url('{{image.url store="images"}}') bottom right 15% no-repeat #46B6AC;
  }
  </style>

  <div class="demo-card-square mdl-card mdl-shadow--2dp" id="{{_id}}">

Meteor only retrieving one image for all of the item in collection

2 Answers2