Enhanced UI & small improvement of wordings

MagazineduWebdesign · Oct 31, 2015 · 8ef4235 · 8ef4235
1 parent 6511a7c
commit 8ef4235
Show file tree

Hide file tree

Showing 51 changed files with 168 additions and 40 deletions.
diff --git a/app/_collection/2015-10-20-stocks-photos-libres-de-droits-short-list.markdown b/app/_collection/2015-10-20-stocks-photos-libres-de-droits-short-list.markdown
@@ -6,4 +6,6 @@ date: "2015-10-20 00:00:00"
 bgimgheader: "true"
 image: "stocks-photos-libres-de-droits.jpg"
 description: "Economisez votre temps et votre budget avec cette collection de stocks de photographies libres de droits."
+bgimgheader: "true"
+image: "949839c56d7a02aabcdafdf5b445f4bc.jpg"
 ---
diff --git a/app/_includes/custom/sections/hero.html b/app/_includes/custom/sections/hero.html
@@ -6,7 +6,7 @@
 [https://s3-eu-west-1.amazonaws.com/mdw-images/large/kit-ui-livo-animation.gif, (large)],
 [https://s3-eu-west-1.amazonaws.com/mdw-images/large/kit-ui-livo-animation.gif, (largeretina)]">
 	<div class="header-collection-shadow">
-		<div class="header-collection">
+		<div class="header-collection mod-home-hero">
 			<header class="row-liste-index">
 				<div class="small-12 columns text-center">
 					<h1 class="headline-collection text-center">

diff --git a/app/_includes/custom/sections/index-header-bg-img.html b/app/_includes/custom/sections/index-header-bg-img.html
@@ -1,5 +1,5 @@
 {% if page.bgimgheader == 'true' %}
-<div class="{% if page.bgimgheader_repeated-pattern == 'true' %}header-collection-bgimg-repeated-pattern{% else %}header-collection-bgimg{% endif %} is-img" data-is-img="{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/medium/' }}" data-interchange="[{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/large/' }}, (default)],
+<div class="header-collection-bgimg is-img" data-is-img="{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/medium/' }}" data-interchange="[{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/large/' }}, (default)],
 [{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/medium/' }}, (small)],
 [{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/large/' }}, (smallretina)],
 [{{ page.image | prepend:'https://s3-eu-west-1.amazonaws.com/mdw-images/medium/' }}, (medium)],

diff --git a/app/_includes/header.html b/app/_includes/header.html
@@ -31,7 +31,7 @@ <h1>
         </a>
         <!-- release -->
         <sup class="logo-release">
-          <a href="https://github.com/MagazineduWebdesign/MagazineduWebdesign.github.io/releases" title="release 3" target="_blank" rel="nofollow">r3</a>
+          <a href="https://github.com/MagazineduWebdesign/MagazineduWebdesign.github.io/releases" title="release" target="_blank" rel="nofollow">r4</a>
         </sup>
       </li>
 

diff --git a/app/_layouts/evenements_index.html b/app/_layouts/evenements_index.html
@@ -25,8 +25,8 @@
 				{% else %}
 				<!-- list filters
 				================================================== -->
-				<div class="row text-center">
-					<div class="small-12 columns">
+				<div class="row-liste-index text-center large-text-left">
+				  <div class="medium-12 large-9 columns">
 
 						<!-- desktop list filters
 						================================================== -->
@@ -123,6 +123,19 @@
 								</div>
 							</div>
 						</div>
+				  </div>
+					<div class="large-3 columns text-right show-for-large-up section-header">
+						<!-- Number of item by index -->
+						{% if page.category == 'evenements' %}
+							{% for post in site.categories.evenements %}
+								{% capture length %}{{ forloop.length }}{% endcapture %}
+							{% endfor %}
+						{% else %}
+							{% for post in site.tags[page.tags] %}
+								{% capture length %}{{ forloop.length }}{% endcapture %}
+							{% endfor %}
+						{% endif %}
+						<span class="section-header-titre">{{ length }} événements</span>
 					</div>
 				</div>
 				{% endif %}
@@ -134,23 +147,6 @@
 
 	{% if page.coming-soon == 'true' %}
 	{% else %}
-		<!-- list subheader
-		================================================== -->
-		<div class="row-liste-index">
-		  <div class="small-12 columns section-header">
-		    <!-- Number of item by index -->
-				{% if page.category == 'evenements' %}
-					{% for post in site.categories.evenements %}
-				    {% capture length %}{{ forloop.length }}{% endcapture %}
-				  {% endfor %}
-				{% else %}
-					{% for post in site.tags[page.tags] %}
-				    {% capture length %}{{ forloop.length }}{% endcapture %}
-				  {% endfor %}
-				{% endif %}
-		    <span class="section-header-titre">{{ length }} événements</span>
-		  </div>
-		</div>
 
 		<!-- list items
 		================================================== -->

diff --git a/app/_layouts/video_index.html b/app/_layouts/video_index.html
@@ -27,7 +27,6 @@ <h1 class="header-liste-headline">{{ page.title }}</h1>
 			</div>
      </header>
 
-
 		<!-- list filters
 		================================================== -->
 		<div class="row text-center large-text-left">

diff --git a/app/_scss/main.scss b/app/_scss/main.scss
@@ -196,7 +196,7 @@ sup {
 		color: $gainsboro;
 	}
 	.header-liste-content-link {@include header-liste-link;}
-	.header-liste-content-link:hover{color: scale-color($white, $lightness: -48%);}
+	.header-liste-content-link:hover{color: $aluminum;}
   .header-liste-panel-info{
     margin-bottom: 0!important;
     @include panel($bg: $callout-panel-bg);
@@ -1318,7 +1318,12 @@ figcaption{
 	border-bottom:1px dotted $gainsboro;
 }
 .article-meta-item-time{@include item-row}
-.article-bgimg-meta-by-time{@include header-liste-link; margin-bottom:rem-calc(24);}
+.article-bgimg-meta-by-time{
+  margin-bottom:rem-calc(24);
+  padding: 0;
+  font-size: rem-calc(14);
+  color: $aluminum;
+}
 .row-article-featured-image {
   @include grid-row;
   .column-article-featured-image{
@@ -1572,13 +1577,65 @@ input.index-wide-newsletter-in-grid-submit{
 	min-height:($topbar-height * 4);
 	@include header-liste($bg:transparent);
   padding-bottom: rem-calc(96);
-  margin-bottom: rem-calc(-96);
+  margin-bottom: rem-calc(-72);
 }
+.header-collection.mod-home-hero{
+  padding-bottom: rem-calc(192);
+  margin-bottom: rem-calc(-128);
+}
+
 .header-collection-bgimg{
-  @include header-bgimg
+  @include header-bgimg($bgsize: 110%);
+    transition-property : background-size;
+    -webkit-transition-property : background-size;
+    animation-iteration-count: 1;
+    -webkit-animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0);
+    -webkit-animation-timing-function: cubic-bezier(0.5, 0.2, 0.3, 1.0);
+    animation-delay: 300ms;
+    -webkit-animation-delay: 300ms;
+    animation: kenburns 5s;
+    -webkit-animation: kenburns 5s;
+    animation-fill-mode: forwards;
+    -webkit-animation-fill-mode: forwards;
+}
+@keyframes kenburns {
+  0% {
+    background-size: 110%;
+  }
+  50% {
+    background-size: 105%;
+  }
+  100% {
+    background-size: 100%;
+  }
+}
+@-webkit-keyframes kenburns {
+  0% {
+    background-size: 110%;
+  }
+  50% {
+    background-size: 105%;
+  }
+  100% {
+    background-size: 100%;
+  }
+}
+@media #{$small-only}{
+  .header-collection-bgimg{
+    animation: none;
+    -webkit-animation: none;
+    background-size: cover;
+  }
+}
+.header-collection-bgimg .tabs-item{
+  color: $white;
+}
+.header-collection-bgimg .tabs-item:hover{
+  color: $aluminum;
 }
-.header-collection-bgimg-repeated-pattern{
-  @include header-bgimg($bgsize: contain)
+.header-collection-bgimg .section-header-titre{
+  color: $white; 
 }
 .header-collection-shadow{
   background: linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(245,245,245,1) 100%);

diff --git a/app/collection/collection_index.markdown b/app/collection/collection_index.markdown
@@ -6,5 +6,5 @@ intro: "Vous pouvez trouver chaque jours des dizaines de nouveautés sur le Maga
 description: "Collections d'inspirations, d'outils & de ressources classés par thématiques"
 text-twtr : "(Ͼ˳Ͽ)..!!! En train d'explorer les collections du @MagduWebdesign."
 bgimgheader: "true"
-image: "photo-1431608660976-4fe5bcc2112c.jpg"
+image: "photo-1417013886928-11bd3d45406b.jpg"
 ---
diff --git a/...nseils/conseils-guide/conseils-guides-tags-index/conseils-guide-design.markdown b/...nseils/conseils-guide/conseils-guides-tags-index/conseils-guide-design.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/guides/design/"
 intro: "Collection de guides, de conseils et d'astuces concernant le design d'interfaces et le quotidien des designers. N'hésitez pas à partager vos découvertes et vos créations."
 description: "Collection de guides, de conseils et d'astuces concernant le design d'interfaces et le quotidien des designers"
 text-twtr: "En train d'explorer la sélection de guides et de conseils sur le design du @MagDuWebdesign"
+bgimgheader: "true"
+image: "outils-trouver-offre-emploi-teletravail.jpg"
 ---
diff --git a/...ils-guide/conseils-guides-tags-index/conseils-guide-product-management.markdown b/...ils-guide/conseils-guides-tags-index/conseils-guide-product-management.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/guides/product-management/"
 intro: "Collection de guides, de conseils et d'astuces concernant le product management. Ce dernier doit savoir quelles fonctionnalités implémenter, ignorer ou améliorer & comment répondre d'une mnanière efficiente aux besoins des utilisateurs. Cette sélection de lectures vous offrent des conseils pour les prises de décisions difficiles et vous guidera étapes par étapes – de la recherche UX jusqu'à la mesure des résultats, en passant par le design et l'implémentation technique."
 description: "Conseils pour les prises de décisions – de la recherche UX jusqu'à la mesure des résultats, en passant par le design et l'implémentation technique"
 text-twtr: "En train d'explorer la sélection de guides de product management du @MagDuWebdesign"
+bgimgheader: "true"
+image: "outils-trouver-offre-emploi-teletravail.jpg"
 ---
diff --git a/...ils/conseils-guide/conseils-guides-tags-index/conseils-guide-ux-design.markdown b/...ils/conseils-guide/conseils-guides-tags-index/conseils-guide-ux-design.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/guides/ux-design/"
 intro: "Collection de guides, de conseils et d'astuces concernant le design d'UX. Découvrez des méthodologies de recherche innovantes afin de comprendre les besoins et les frictions des utilisateurs. Explorez comme les teams UX à travers le monde restituent les résultats à l'équipe projet, gardent le cap sur les objectifs business et comment elles implémentent un écosystème de mesure des résultats."
 description: "Découvrez des méthodologies de recherche innovantes, des techniques pour restituer les résultats et mesurer la performances des interfaces"
 text-twtr: "En train d'explorer la sélection de guides et de conseils d'UX Design du @MagDuWebdesign"
+bgimgheader: "true"
+image: "outils-trouver-offre-emploi-teletravail.jpg"
 ---
diff --git a/app/conseils/conseils-guide/conseils-guides-tags-index/conseils-guides.markdown b/app/conseils/conseils-guide/conseils-guides-tags-index/conseils-guides.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/guides/"
 intro: "Collection de guides, de conseils et d'astuces pour designers, développeurs & product managers. N'hésitez pas à partager vos découvertes et vos créations."
 description: "Collection de guides, de conseils et d'astuces pour designers, développeurs & product managers"
 text-twtr: "En train d'explorer la sélection de guides, de conseils et d'astuces du @MagDuWebdesign"
+bgimgheader: "true"
+image: "outils-trouver-offre-emploi-teletravail.jpg"
 ---
diff --git a/...ls/conseils-livres/conseils-livres-tags-index/conseils-livres-designer.markdown b/...ls/conseils-livres/conseils-livres-tags-index/conseils-livres-designer.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/livres/designer/"
 intro: "Devenir un designer talentueux est une longue aventure. Accélerez le processus en explorant cette sélection de livres. N'hésitez pas à partager vos découvertes."
 description: "Devenir un designer talentueux est une longue aventure. Accélerez le processus en explorant cette sélection de livres."
 text-twtr: "En train d'explorer la sélection de livres pour designer du @MagDuWebdesign"
+bgimgheader: "true"
+image: "photo-1431608660976-4fe5bcc2112c.jpg"
 ---
diff --git a/...conseils-livres/conseils-livres-tags-index/conseils-livres-developpeur.markdown b/...conseils-livres/conseils-livres-tags-index/conseils-livres-developpeur.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/livres/developpeur/"
 intro: "L'union code+papier n'est pas évident. Néanmoins, des mines d'informations attentend le développeurs curieux souhaitant étendre ses connaissances et enrichir sa bilbliothèque. N'hésitez pas à partager vos lectures."
 description: "Des mines d'informations attentend le développeurs curieux souhaitant étendre ses connaissances et enrichir sa bilbliothèque."
 text-twtr: "En train d'explorer la sélection de livres pour développeur du @MagDuWebdesign"
+bgimgheader: "true"
+image: "photo-1431608660976-4fe5bcc2112c.jpg"
 ---
diff --git a/...onseils-livres/conseils-livres-tags-index/conseils-livres-entrepreneur.markdown b/...onseils-livres/conseils-livres-tags-index/conseils-livres-entrepreneur.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/livres/entrepreneur/"
 intro: "Une bibliothèque organisée des bouquins incontournables pour le créateur d'une startup. N'hésitez pas à partager vos lectures."
 description: "Une bibliothèque organisée des lectures incontournables pour le créateur d'une startup."
 text-twtr: "En train d'explorer la sélection de livres pour entrepreneur du @MagDuWebdesign"
+bgimgheader: "true"
+image: "photo-1431608660976-4fe5bcc2112c.jpg"
 ---
diff --git a/...eils-livres/conseils-livres-tags-index/conseils-livres-product-manager.markdown b/...eils-livres/conseils-livres-tags-index/conseils-livres-product-manager.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/livres/product-manager/"
 intro: "Une collection de livres vous donnant les bases pour piloter vos produits &amp; vos services. Optimisez votre réponse aux problématiques utilisateurs en explorant cette bibliothèque. N'hésitez pas à partager vos lectures."
 description: "Une collection de livres vous donnant les bases pour piloter vos produits & services."
 text-twtr: "En train d'explorer la sélection de livres pour product manager du @MagDuWebdesign"
+bgimgheader: "true"
+image: "photo-1431608660976-4fe5bcc2112c.jpg"
 ---
diff --git a/...conseils-livres/conseils-livres-tags-index/conseils-livres-ux-designer.markdown b/...conseils-livres/conseils-livres-tags-index/conseils-livres-ux-designer.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/livres/ux-designer/"
 intro: "Une bibliothèque organisée faite par des UX designers talentueux, pour des personnes talentueuses. N'hésitez pas à partager vos lectures."
 description: "Une bibliothèque organisée faite par des UX designers talentueux, pour des personnes talentueuses."
 text-twtr: "En train d'explorer la sélection de livres pour UX designer du @MagDuWebdesign"
+bgimgheader: "true"
+image: "photo-1431608660976-4fe5bcc2112c.jpg"
 ---
diff --git a/app/conseils/conseils-livres/conseils-livres-tags-index/conseils-livres.markdown b/app/conseils/conseils-livres/conseils-livres-tags-index/conseils-livres.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/livres/"
 intro: "Je partage avec vous ma liste de lectures. Des livres incontournables qui peuvent challenger votre perception de ce vaste monde, de votre métier ou la manière d'interagir avec des humains :-). Je recommande ces lectures à tout designer, développeur & entrepreneur s'efforcant chaque jour de rendre les interfaces meilleures. Faites de la place dans votre bibliothèque et n'hésitez pas à partager vos lectures."
 description: "Une collection de livres incontournables pour les designers, les développeurs & toutes les personnes qui s'efforcent chaque jour de rendre les interfaces meilleures."
 text-twtr: "En train d'explorer la collection de livres du @MagDuWebdesign"
+bgimgheader: "true"
+image: "photo-1431608660976-4fe5bcc2112c.jpg"
 ---
diff --git a/...onseils-podcasts/conseils-podcasts-tags-index/conseils-podcasts-design.markdown b/...onseils-podcasts/conseils-podcasts-tags-index/conseils-podcasts-design.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/podcasts/design/"
 intro: "Collection d'interviews des personnes qui conçoivent vos applications préférées."
 description: "Collection d'interviews des personnes qui conçoivent vos applications préférées"
 text-twtr: "En train d'explorer la collection de podcasts Design du @MagDuWebdesign"
+bgimgheader: "true"
+image: "ad4d9b53be2c10efa2afe699424b648a.jpg"
 ---
diff --git a/...-podcasts/conseils-podcasts-tags-index/conseils-podcasts-developpement.markdown b/...-podcasts/conseils-podcasts-tags-index/conseils-podcasts-developpement.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/podcasts/developpement-web/"
 intro: "Une collection de podcasts sur le quotidien des personnes & les technologies à l'origine de vos applications préférées."
 description: "Une collection de podcasts sur le quotidien des personnes & les technologies à l'origine de vos applications préférées."
 text-twtr: "En train d'explorer la collection de podcasts Dev&Tech du @MagDuWebdesign"
+bgimgheader: "true"
+image: "ad4d9b53be2c10efa2afe699424b648a.jpg"
 ---
diff --git a/...seils/conseils-podcasts/conseils-podcasts-tags-index/conseils-podcasts.markdown b/...seils/conseils-podcasts/conseils-podcasts-tags-index/conseils-podcasts.markdown
@@ -6,4 +6,6 @@ permalink: "/conseils/podcasts/"
 intro: "Collection de podcasts abordant les thèmes du design & du développement de produits. Une mine d'infos sur le quotidien des personnes qui conçoivent et maintiennent les applications que vous utilisez au quotidien."
 description: "Collection de podcasts abordant les thèmes du design & du développement de produits"
 text-twtr: "En train d'explorer la collection des meilleurs podcasts pour designers et développeurs du @MagDuWebdesign"
+bgimgheader: "true"
+image: "ad4d9b53be2c10efa2afe699424b648a.jpg"
 ---
diff --git a/app/evenements/evenements-tags-index/evenements-all.markdown b/app/evenements/evenements-tags-index/evenements-all.markdown
@@ -6,4 +6,6 @@ permalink: "/evenements/"
 intro: "Collection d'événements en France et en Europe, abordant les problématiques et les thèmes les plus sensibles pour les designers et les développeurs Web. N'hésitez pas à suggérer des événements locaux ou nationaux si vous pensez qu'ils sont pertinents pour la communauté du MDW."
 description: "Collection d'événements en France et en Europe, abordant les problématiques et les thèmes les plus sensibles pour les designers et les développeurs Web."
 text-twtr: "En train d'explorer la collection d'événements de design & de DevOps du @MagDuWebdesign"
+bgimgheader: "true"
+image: "audience-945449_1280.jpg"
 ---
diff --git a/app/evenements/evenements-tags-index/evenements-design.markdown b/app/evenements/evenements-tags-index/evenements-design.markdown
@@ -6,4 +6,6 @@ permalink: "/evenements/design-interactif/"
 intro: "Collection d'événements en France et en Europe, abordant les problématiques et les thèmes spécifiques au design interactif. N'hésitez pas à suggérer des événements locaux ou nationaux si vous pensez qu'ils sont pertinents pour la communauté du MDW."
 description: "Collection d'événements en France et en Europe, abordant les problématiques et les thèmes spécifiques au design interactif"
 text-twtr: "En train d'explorer la collection d'événements pour les designers d'interfaces du @MagDuWebdesign"
+bgimgheader: "true"
+image: "audience-945449_1280.jpg"
 ---
diff --git a/app/evenements/evenements-tags-index/evenements-developpement-web.markdown b/app/evenements/evenements-tags-index/evenements-developpement-web.markdown
@@ -6,4 +6,6 @@ permalink: "/evenements/developpement-web-devops/"
 intro: "Collection d'événements en France et en Europe, abordant les problématiques et les défis techniques spécifiques aux développeurs et aux aficionados DevOps. N'hésitez pas à suggérer des événements locaux ou nationaux si vous pensez qu'ils sont pertinents pour la communauté du MDW."
 description: "Collection d'événements en France et en Europe, abordant les problématiques et les défis techniques spécifiques aux développeurs et aficionados DevOps"
 text-twtr: "En train d'explorer la collection d'événements sur le développement Web & le DevOps du @MagDuWebdesign"
+bgimgheader: "true"
+image: "audience-945449_1280.jpg"
 ---
diff --git a/app/evenements/evenements-tags-index/evenements-ux-design.markdown b/app/evenements/evenements-tags-index/evenements-ux-design.markdown
@@ -6,4 +6,6 @@ permalink: "/evenements/ux-design/"
 intro: "UX designer, product manager, explorez la collection d'événements en France et en Europe, abordant les problématiques et les thèmes spécifiques au design de l'expérience utilisateur. N'hésitez pas à suggérer des événements locaux ou nationaux si vous pensez qu'ils sont pertinents pour la communauté du MDW."
 description: "Collection d'événements en France et en Europe, abordant les problématiques et les thèmes spécifiques au design de l'expérience utilisateur"
 text-twtr: "En train d'explorer la collection d'événements sur l'UX Design du @MagDuWebdesign"
+bgimgheader: "true"
+image: "audience-945449_1280.jpg"
 ---
diff --git a/app/index.html b/app/index.html
@@ -9,7 +9,7 @@
 
 <section>
 	<div class="row">
-		<div class="small-12 columns">
+		<div class="small-12 columns text-center">
 			<h2>Les collections du moment</h2>
 		</div>
 	</div>

diff --git a/...r/inspirations-ui-android-wear-tags-index/inspirations-ui-android-wear.markdown b/...r/inspirations-ui-android-wear-tags-index/inspirations-ui-android-wear.markdown
@@ -6,4 +6,6 @@ permalink: "/inspirations/ui-design/android-wear/"
 intro: "Si vous êtes à la recherche d'inspirations material design pour la conception d'une montre connectée, ne cherchez plus, vous avez trouvé la source !"
 description: "Explorez la liste des meilleurs designs d'interfaces d'applications pour les montres connectées Android Wear."
 text-twtr: "En train d'explorer la collection d'interfaces material design Android Wear du @MagDuWebdesign"
+bgimgheader: "true"
+image: "android-wear-concept-application-musique.png"
 ---
diff --git a/...ted-car-tags-index/inspirations-ui-connected-car-constructeurs-bentley.markdown b/...ted-car-tags-index/inspirations-ui-connected-car-constructeurs-bentley.markdown
@@ -6,4 +6,6 @@ permalink: "/inspirations/ui-design/connected-car/constructeurs/bentley-motors/"
 intro:
 description: "Explorez la liste des meilleurs designs d'interfaces et concepts de tableaux de bord automobiles de Bentley Motors"
 text-twtr: "En train d'explorer la collection d'interfaces au sein des voitures connectées Bentley Motors du @MagDuWebdesign"
+bgimgheader: "true"
+image: "connected-car-bentley-exp-10-speed-6-concept-infotainment.jpg"
 ---
diff --git a/...nnected-car-tags-index/inspirations-ui-connected-car-constructeurs-bmw.markdown b/...nnected-car-tags-index/inspirations-ui-connected-car-constructeurs-bmw.markdown
@@ -6,4 +6,6 @@ permalink: "/inspirations/ui-design/connected-car/constructeurs/bmw/"
 intro:
 description: "Explorez la liste des meilleurs designs d'interfaces et concepts de tableaux de bord automobiles de BMW"
 text-twtr: "En train d'explorer la collection d'interfaces au sein des voitures connectées BMW du @MagDuWebdesign"
+bgimgheader: "true"
+image: "connected-car-bmw-i8-concept-head-up-display.PNG"
 ---
diff --git a/...ed-car-tags-index/inspirations-ui-connected-car-constructeurs-cadillac.markdown b/...ed-car-tags-index/inspirations-ui-connected-car-constructeurs-cadillac.markdown
@@ -6,4 +6,6 @@ permalink: "/inspirations/ui-design/connected-car/constructeurs/cadillac/"
 intro:
 description: "Explorez la liste des meilleurs designs d'interfaces et concepts de tableaux de bord automobiles de Cadillac"
 text-twtr: "En train d'explorer la collection d'interfaces au sein des voitures connectées Cadillac du @MagDuWebdesign"
+bgimgheader: "true"
+image: "connected-car-cadillac-concept-elmiraj-3.jpg"
 ---
diff --git a/...ted-car-tags-index/inspirations-ui-connected-car-constructeurs-ferrari.markdown b/...ted-car-tags-index/inspirations-ui-connected-car-constructeurs-ferrari.markdown
@@ -6,4 +6,6 @@ permalink: "/inspirations/ui-design/connected-car/constructeurs/ferrari/"
 intro:
 description: "Explorez la liste des meilleurs designs d'interfaces et concepts de tableaux de bord automobiles de Ferrari"
 text-twtr: "En train d'explorer la collection d'interfaces au sein des voitures connectées Ferrari du @MagDuWebdesign"
+bgimgheader: "true"
+image: "connected-car-concept-tableau-de-bord-ferrari-ustwo-2.png"
 ---