Middleman: динамическое фоновое изображение?

Question

Некоторая фоновая информация: Я только начал изучать посредника, чтобы построить свое портфолио. У меня нет фона программирования, так что несите меня :-).

У меня есть индексная страница, где я перечисляю все мои проекты, такие как карты, созданные/заполненные данными из json-файла. Это цикл я использую для создания карт для каждого проекта на индексной странице:

<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> 

Это файл JSON, из которого я дал название проекта и URL:

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

До сих пор, так хорошо.

Теперь, что я хочу сделать, это установить (уникальное) фоновое изображение для каждой карты, и я не совсем уверен, как это сделать. Как я понимаю, есть два подхода я мог бы взять с собой:

1. Создайте правила CSS для каждой карты и установите класс в цикле из 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"); }

и добавить { "bg-img": "bg-img-x" } в каждый проект в файле json.

, а затем в моем цикле создания карты добавьте «bg-img» в класс каждой карты.

2. Установить инлайн стиль на DIV, и ввести путь IMG из файла JSON:

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

Однако ни одно из этих решений кажется элегантным/оптимальным? С решением # 1 внесение изменений становится утомительным, так как я должен был бы внести изменения в несколько мест, json-файл CSS &.

Решение № 2 не имеет этой проблемы, но я не являюсь поклонником встроенного стиля/стилизации, сохраненной в отдельных местах.

Так есть ли другой способ сделать это? Или мне нужно выбрать один из них и разобраться с проминусами каждого?

Спасибо!

Answer 1

Решение №2 полностью прекрасное и часто используется. стиль вставки для фона - стандартная практика