Images in a collection

help
1

Hi,

I’m a meteor beginner and currently trying to implement a memorygame. I therefore think it might be a good idea to create a “Card”-schema, such that I will have a collection of all card and can display them in random order in an each loop later.

Cards.schema = new SimpleSchema({
name: {type: String},
// my question is: how can I put an image type here?
})

Thank you in advance,

Best, Sissi

2

Typically you’d store a url to a cloud storage service, or an id/identifier for a bucket or file stored in the cloud storage provider you are configured to use in your app. It could also be an object if you need to store additional info, such as the type/size or any other upload info.

If that doesn’t sound right, I may be misunderstanding.

3

You can perhaps have a look at the Meteor-Files package from Veliovgroup. It is an awesome package to handle file/image uploads. It will also guide you to define an Images collection. You can then either store the images on the server or cloud based stores and have access to the image through a download URL.

Alternatively you can just save the Card images in a folder in your Meteor project manually and then just have a reference to each image that you can call as needed.

Hope it makes sense.

4

if i take the alternative and use a “public” folder with my images, then i can reference them from within the collection item?

it needn’t necessary be a collection, maybe an array with objects which contain the image, its partner image’s identification, and a boolean “clicked” would be enough. so i wasn’t sure if i really need a package. would you still suggest using it?

thank you,

best, sissi

5

If this isn`t a production type project the public folder solution should work. Just setup your collection to have documents per image and each document have a reference to a specific image…as an example:

  1. Card 1 – /public/card1.png
  2. Card 2 – /public/card2.png

Then basically have some frontend where the user can click on a document and then use the /public/card1.png as a source.

6

yes, that was precisely my plan. I just didn’t find any syntax for that.

i thought of something like this:

insertCard(cardName, image, partner, clicked, found){
	Cards.insert({
		cardName: cardName,
		**//what goes here?**
		partner: partner, 
		clicked: false,
		found: false
	});
},

and then call it like

insertCard(“card1”, ???, card2);

you know? I tried putting the source of the image into a variable and putting it where you see the ??? but I haven’t succeeded so far.

7

On server start-up you can perhaps insert the cards as proposed:
Cards.insert({
cardName : ‘Jack’,
imageUrl : ‘/public/Jack.png’,
…whatever else you need
});

Client side:
You would want to subscribe to the Cards collection.

Then once you have a reference to the collection client side, let`s call it All_Cards you can do whatever you want with it.

Loop through the cards:

<div ng-repeat="card in All_Cards ">
      <span>{{card.cardName}}</span>
      <img src="card.imageUrl " alt="Italian Trulli">
</div>

In that example you will see each card name and card image in a list.

Please note all syntax is not 100% seeing that I don`t know if you are using Angulajs, Blaze… But it is just to give you an idea.

8

thank you, that’s what i was thinking.
but weirdly, the html file doesn’t seem able to read the collections contents…it doesn’t display the name or the image… is there any import or export or anything i have forgotten? autopublish is on so it can’t be that.