Middleman: image de fond dynamique?

Question

Quelques informations de base: Je viens juste d'apprendre un intermédiaire pour construire mon portfolio. Je n'ai pas d'expérience en programmation, alors portez-moi :-).

J'ai une page d'index où je liste tous mes projets comme les cartes, créées/peuplées par les données d'un fichier json. Ceci est la boucle que j'utilise pour créer les cartes pour chaque projet sur la page d'index:

<div class="row"> 
    <% data.projects.projects.each do |project| %> 
    <div class="col-md-12"> 
     <h2> 
     <%= project.title %> 
     </h2> 
     <div> 
     <%= link_to 'View project', project.path, relative: true %> 
     </div> 
    </div> 
    <% end %> 
</div> 

Ceci est le fichier JSON que je mets le titre du projet et url:

{ 
    "projects": [ 
     {"title": "One", 
     "path": "/one.html" 
     }, 
     {"title":"Two", 
     "path": "/two.html" 
     }, 
     {"title":"Three", 
     "path": "/three.html" 
     } 
    ] 
} 

Jusqu'à présent, tellement bon.

Maintenant, ce que je veux faire est de définir une image de fond (unique) pour chaque carte, et je ne suis pas tout à fait sûr de la façon de le faire. Comme je le vois, il y a deux approches que je pouvais prendre:

1. Créez les règles CSS pour chaque carte et définissez la classe dans la boucle de JSON:

bg-img-1 { background-image: url("img1.jpg"); }

bg-img-2 { background-image: url("img2.jpg"); }

bg-img-3 { background-image: url("img3.jpg"); }

et d'ajouter { "bg-img": "bg-img-x" } dans chaque projet dans le fichier json.

puis dans ma boucle de création de carte, ajoutez le 'bg-img' à la classe de chaque carte.

2. Définissez un style en ligne sur la div, et injecter le chemin img à partir du fichier JSON:

<div class="card" style="background: url(<%= data.project.img %>)"> </div>

Cependant, aucune de ces solutions semblent élégante/optimale? Avec la solution # 1 faire une modification devient fastidieux car j'aurais à faire des changements à plusieurs endroits, le fichier CSS & json.

La solution n ° 2 n'a pas ce problème, mais je ne suis pas un fan de style en ligne/ayant style sauvegardé dans des endroits distincts.

Y a-t-il une autre façon de procéder? Ou est-ce que je dois choisir l'un d'entre eux et traiter avec les inconvénients de chacun?

Merci!

Answer 1

La solution 2 est complètement fine et souvent utilisée. le style inline pour l'arrière-plan est une pratique standard