How do I make a new HTML class for every document in a mongo database

Question

1.00/5 (2 votes)

See more:

I have a mongodb setup where there any documents for video games. Each document contains information about the game like the title, etc. I want to display each document as a card with html and css, displaying the information about it. Each card needs to have an image of the game on it, so I specified and image path as one of the categories in the document. Now I need to have an html class (the kind you would call to in a div) for each document so I can call that image path specified in that document to display that background for each card. How can I have a new html class made for every document in the database?

Here is some code I used:

HTML

<template name="popularGames">
  <div id="gameBackround" class="col-lg-2 popular-games view view-first">
    <div class="mask">
      <h2>{{title}}</h2>
      <p>Amount of groups playing this title now: 11,075</p>
      <a href="#" class="info">Join Lobby</a>
    </div>
  </div>
  <style>
    .popular-games{
      background-image: url( {{background}} );
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  </style>
</template>

As you can see I am tried to use a background attribute from the mongodb document to change the background of an individual card but it changes the background for all the cards because all the cards are linked to one class, therefore one background. How can I have it so there is a class for every individual document?

What I have tried:

I have tried using meteor templates to add in the class and then edit the class with style tags but it this solution does not help really at all

Posted 8-May-16 14:55pm

Member 11912047

Updated 8-May-16 17:43pm

George Jonsson

v4

Add a Solution

Comments

Sergey Alexandrovich Kryukov 8-May-16 21:10pm

What is that, "HTML class"? Do you mean CSS and "class" attribute? Why for each document? It doesn't seem to make sense. If you think it makes sense, please explain your design.
—SA

Member 11912047 8-May-16 22:28pm

I have a mongodb setup where there any documents for video games. Each document contains information about the game like the title, etc. I want to display each document as a card with html and css, displaying the information about it. Each card needs to have an image of the game on it, so I specified and image path as one of the categories in the document. Now I need to have an html class (the kind you would call to in a div) for each document so I can call that image path specified in that document to display that background for each card. Does that help?

Dave Kreskowiak 8-May-16 22:40pm

Copying and pasting exactly what you have above doesn't improve the description at all. We need to know what you mean by "HTML class". Why does every "card" have to have it's own class?

Member 11912047 8-May-16 22:41pm

i actually wrote the comment to him and then edited the question to put it into so it could help everyone else.... anyways, every card has to have its own class so every card can have its own background. i added some code above, maybe that will help

Sergey Alexandrovich Kryukov 8-May-16 22:45pm

Sounds like a dreadful design. Anyway, it's reduced to the basic thing: where is the knowledge on what background and other stylistic elements should be for every record?
What is the content in {{ }}? Is it a kind of template in a template, or just some meta-notation you want to use to show your indent?.. Do you understand yourself how to use template elements?
And, finally, how do you use the database? What do you have on the server side?
—SA

Member 11912047 8-May-16 22:50pm

yes i know its not a very good design, if you have any idea on how to do it another way I'm all ears. Anyways, the knowledge is all in the mongodb document via text, which is inserted with double brackets as seen in the code above. I am able to do this with meteor js.

Sergey Alexandrovich Kryukov 8-May-16 22:54pm

Hm... To give you an idea, it would be good to know your ultimate goals and some requirements/desirable features...
And no, you did not answer where is the knowledge on style. It's apparent where is the knowledge on content, but where is the knowledge on styles?
—SA

Member 11912047 8-May-16 22:58pm

right in the code i posted, in the style brackets. the problem is it isnt unique to every element, i need it to be unique for every element

Sergey Alexandrovich Kryukov 9-May-16 0:07am

You did not answer my question.
—SA

Member 11912047 9-May-16 15:15pm

you asked where the knowledge on styles is, so I told you the styles are right in the code above, like literally the style brackets with the styles are right there... I think I misunderstand your question

Sergey Alexandrovich Kryukov 9-May-16 15:19pm

Look, let's not mix input and output. If the code fragment shown is supposed output, I'll ask "where is this knowledge?" on input. If this is input, I'll ask "where it comes from and what should be on output?"
—SA

Member 11912047 9-May-16 20:04pm

Ugh you are so patronizing please just leave this question, thanks for the effort.

Sergey Alexandrovich Kryukov 9-May-16 20:28pm

Let me decide what to leave and what not. I'll take your comment into account.
—SA

Dave Kreskowiak 8-May-16 22:54pm

That doesn't say "separate class" to me. That says the background image is just another image not different from the game image you have. It would just be additional data just like the game image.

Member 11912047 8-May-16 22:57pm

there is no additional data, just one path for every document, I think we have a misunderstanding. Every time I try to input the image path via the double brackets seen above, it changes the background for every element because they are all linked to the same class, being popular-games. I need individual css classes for every document so they can have their own background

Dave Kreskowiak 9-May-16 10:39am

OK, so you have to remove the background-image from the popular-games style. You also have to remove the gamebackground ID from the div it's in otherwise every DIV on the page that uses this template will have the exact same ID. You have no way of telling them apart.

You're going to have to supply a different image for each div somehow, and that it data driven. You cannot have a separate class for each record in the database. It just isn't practical.

Member 11912047 9-May-16 15:16pm

alright well you just told me everything I said already, that's why i am asking for help on a different way to do it

Dave Kreskowiak 9-May-16 16:17pm

I already did. If you want individual backgrounds for every game, along with every game image, you're going to have to provide a background image. BOTH pieces of information are going to be required for what you want to do.

Member 11912047 9-May-16 20:06pm

dude i already told you, there arent two pictures, just one. there is only a background image, where are you getting this other image from

Dave Kreskowiak 9-May-16 20:19pm

"ach card needs to have an image of the game on it, so I specified and image path as one of the categories in the document. Now I need to have an html class (the kind you would call to in a div) for each document so I can call that image path specified in that document to display that background for each card."

I took that as two separate images.

George Jonsson 8-May-16 22:28pm

Show us two small HTML documents with limited content, then try to explain what it is you want to do.

Member 11912047 8-May-16 22:40pm

alright check the question now, i put some code in

George Jonsson 8-May-16 22:52pm

Well, I said two small HTML documents, not one snippet. The reason for showing two documents is that then we can see the difference between them.

From what you have shown so far, it looks like you want a unique ID for each image.

Member 11912047 8-May-16 22:54pm

why would you need to see the difference between two html documents? and yes i have a uniques id for each image but not a unique class so since they are all linked to the same class they all become the same image.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

George Jonsson · Accepted Answer · 2016-05-08T17:43:00

I don't think you want a unique CSS class for this.
If, and that is a big if, I have understood you correctly, you want to have the same style and layout for your HTML page, but with a different background image for the main <div> element.
So basically your CSS file should be static and not change for each game you want to show, only the background image of the <div> should change.

Have you tried do do something like this?