Adapt the html to handle a list of images sent by our Ammico API
authorrougeronj
Wed, 08 Apr 2015 17:00:43 +0200
changeset 81 ef4d8ed6eef2
parent 80 86849b3acd3a
child 82 6a5e84bf859c
Adapt the html to handle a list of images sent by our Ammico API
client/app/books/book.html
client/app/slides/slides.html
--- a/client/app/books/book.html	Wed Apr 08 16:55:19 2015 +0200
+++ b/client/app/books/book.html	Wed Apr 08 17:00:43 2015 +0200
@@ -3,7 +3,7 @@
 <ul ui-sortable="sortableOptions" ng:model="slides" class="list-unstyled list-inline gallery container">
   <li class="col-md-3 item" ng-repeat="i in slides">
     <div class="img-ctn">
-        <img class="img img-responsive image" ng-src="{{ i.details.image }}" />
+        <img class="img img-responsive image" ng-src="{{ i.details.images[0] }}" />
         <p>{{ i.details.title }}</p>
         <div class="gallery-buttons">
           <a class="btn btn-default" href="#/slide/{{ i.id }}"><span class="glyphicon glyphicon-pencil"></span></a>
--- a/client/app/slides/slides.html	Wed Apr 08 16:55:19 2015 +0200
+++ b/client/app/slides/slides.html	Wed Apr 08 17:00:43 2015 +0200
@@ -9,8 +9,10 @@
 	</div>
 	<div class="container slide-content">
 		<div class="col-md-7 media">
-			<img ng-if="slide.details.image" ng-src="{{ slide.details.image }}" style="margin: auto;">
-			<p ng-if="slide.details.caption" ng-src="{{ slide.details.caption }}" style="margin: auto;"></p>
+			<figure ng-if="slide.details.images && !slide.details.video" ng-repeat="image in slide.details.images">
+				<img ng-src="{{image}}" style="margin: auto;">
+  				<figcaption>{{slide.details.captions[$index]}}</figcaption>
+			</figure> 
 			<audio ng-if="slide.details.audio" ng-src="{{ slide.details.audio }}" style="margin: auto; controls loop"></audio>
 			<video ng-if="slide.details.video" ng-src="{{ slide.details.video }}" style="margin: auto;" controls></video>
 		</div>
@@ -18,12 +20,9 @@
 			<slide-editor index="{{$index}}"></slide-editor>
 			<hr />
 			<div class="details">
-				<p>
-					<strong>Titre&nbsp;:&nbsp;</strong><small>{{slide.details.title}}</small>
-				</p>
-				<p>
-					<strong>Description&nbsp;:&nbsp;</strong><small>{{slide.details.description}}</small>
-				</p>
+				<p><strong>Titre&nbsp;:&nbsp;</strong><small>{{slide.details.title}}</small></p>
+				<p><strong>Description&nbsp;:&nbsp;</strong><small>{{slide.details.description}}</small></p>
+				<p><strong>Numéro d'Inventaire&nbsp;:&nbsp;</strong><small>{{slide.details.idInventory}}</small></p>
 			</div>
 		</div>
 	</div>