use generated layout preview images for the carousel, too

www/maposmatic/templates/maposmatic/index-parts/carousel.html

@@ -1,3 +1,7 @@
+{% load i18n %}
+{% load l10n %}
+{% load extratags %}
+
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
   <!-- Indicators -->
   <ol class="carousel-indicators">
@@ -9,21 +13,30 @@
   <!-- Wrapper for slides -->
   <div class="carousel-inner">
     <div class="carousel-item active">
-      <img src="/media/img/preview-1.png" srcset="/media/img/preview-1.png, /media/img/preview-1d.png 2x" width="100%" alt="plain layout">
+      <img 
+        src="/media/img/layout/plain.png"
+        srcset="/media/img/layout/plain.png, /media/img/layout/plain-1.5x.png 1.5x, /media/img/layout/plain-2x.png 2x"
+	width="100%" alt="{% trans "Plain Layout" %}">
       <div class="carousel-caption">
-      	<h3>Plain Layout</h3>
+        <h3>{% trans "Plain Layout" %}</h3>
       </div>
     </div>
     <div class="carousel-item">
-      <img src="/media/img/preview-2.png" srcset="/media/img/preview-2.png, /media/img/preview-2d.png 2x" width="100%" alt="plain layout">
+      <img 
+        src="/media/img/layout/single_page_index_side.png" 
+	srcset="/media/img/layout/single_page_index_side.png, /media/img/layout/single_page_index_side-1.5x.png 1.5x, /media/img/layout/single_page_index_side-2x.png 2x" 
+	width="100%" alt="{% trans "Index Layout" %}">
       <div class="carousel-caption">
-      	<h3>Side Index Layout</h3>
+        <h3>{% trans "Index Layout" %}</h3>
       </div>
     </div>
     <div class="carousel-item">
-      <img src="/media/img/preview-3.png" srcset="/media/img/preview-3.png, /media/img/preview-3d.png 2x" width="100%" alt="plain layout">
+      <img 
+        src="/media/img/layout/multi_page.png" 
+	srcset="/media/img/layout/multi_page.png, /media/img/layout/multi_page-1.5x.png 1.5x, /media/img/layout/multi_page-2x.png 2x"
+	width="100%" alt="{% trans "Multi Page Layout" %}">
       <div class="carousel-caption">
-      	<h3>Multi Page Layout</h3>
+        <h3>{% trans "Multi Page Layout" %}</h3>
       </div>
     </div>
   </div>
@@ -31,11 +44,11 @@
   <!-- Controls -->
   <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="sr-only">Previous</span>
+    <span class="sr-only">{% trans "Previous" %}</span>
   </a>
   <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="sr-only">Next</span>
+    <span class="sr-only">{% trans "Next" %}</span>
   </a>
 
 </div> <!-- Carousel -->