change images to use inline transformations when possible. fix image link in list

itaibenari · itaibenari · commit 0db6f6e1d9e5 · 2013-11-08T10:33:38.000+02:00
diff --git a/samples/photo_album/src/main/webapp/WEB-INF/pages/photos.jsp b/samples/photo_album/src/main/webapp/WEB-INF/pages/photos.jsp
@@ -45,7 +45,7 @@ requested transformations. This also shows how to chain transformations -->
         <c:forEach items="${photos}" var="photo">
             <div class="photo">
                 <h2>${photo.title}</h2>
-                <a href="<cl:url src="${photo.image}"/>" target="_blank">
+                <a href="<cl:url src="${photo.image}" format="jpg"/>" target="_blank">
                     <cl:image src="${photo.image}" extraClasses="thumbnail inline" width="150" height="150" crop="fit" quality="80" format="jpg"/>
                 </a>
 
@@ -58,11 +58,7 @@ requested transformations. This also shows how to chain transformations -->
                     <table class="thumbnails">
                         <td>
                             <div class="thumbnail_holder">
-                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" format="jpg">
-                                    <jsp:attribute name="transformation">
-                                        <cl:transformation crop="fill" height="150" width="150" radius="10"/>
-                                    </jsp:attribute>
-                                </cl:image>
+                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" crop="fill" height="150" width="150" radius="10" format="jpg"/>
                             </div>
                             <table class="info">
                                 <tr><td>crop</td><td>fill</td></tr>
@@ -74,11 +70,7 @@ requested transformations. This also shows how to chain transformations -->
                         </td>
                         <td>
                             <div class="thumbnail_holder">
-                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" format="jpg">
-                                    <jsp:attribute name="transformation">
-                                        <cl:transformation crop="scale" height="150" width="150"/>
-                                    </jsp:attribute>
-                                </cl:image>
+                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" crop="scale" height="150" width="150" format="jpg"/>
                             </div>
                             <table class="info">
                                 <tr><td>crop</td><td>scale</td></tr>
@@ -89,11 +81,7 @@ requested transformations. This also shows how to chain transformations -->
                         </td>
                         <td>
                             <div class="thumbnail_holder">
-                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" format="jpg">
-                                    <jsp:attribute name="transformation">
-                                        <cl:transformation crop="fit" height="150" width="150"/>
-                                    </jsp:attribute>
-                                </cl:image>
+                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" crop="fit" height="150" width="150" format="jpg"/>
                             </div>
                             <table class="info">
                                 <tr><td>crop</td><td>fit</td></tr>
@@ -104,11 +92,7 @@ requested transformations. This also shows how to chain transformations -->
                         </td>
                         <td>
                             <div class="thumbnail_holder">
-                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" format="jpg">
-                                    <jsp:attribute name="transformation">
-                                        <cl:transformation crop="thumb" gravity="face" height="150" width="150"/>
-                                    </jsp:attribute>
-                                </cl:image>
+                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" crop="thumb" gravity="face" height="150" width="150" format="jpg"/>
                             </div>
                             <table class="info">
                                 <tr><td>crop</td><td>thumb</td></tr>
@@ -120,9 +104,8 @@ requested transformations. This also shows how to chain transformations -->
                         </td>
                         <td>
                             <div class="thumbnail_holder">
-                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" format="png">
+                                <cl:image src="${photo.image}" extraClasses="thumbnail inline" format="png" angle="20">
                                     <jsp:attribute name="transformation">
-                                        <cl:transformation angle="20"/>
                                         <cl:transformation crop="fill" gravity="north" height="150" width="150" effect="sepia"/>
                                     </jsp:attribute>
                                 </cl:image>
diff --git a/samples/photo_album/src/main/webapp/WEB-INF/pages/pre.jsp b/samples/photo_album/src/main/webapp/WEB-INF/pages/pre.jsp
@@ -5,7 +5,7 @@
     <title>Photo Album</title>
     <link type="text/css" rel="stylesheet" media="all" href="<c:url value="/stylesheets/application.css"/>">
     <link rel="shortcut icon"
-          href="<cl:url src="http://cloudinary.com/favicon.png" type="fetch"/>" />
+          href="<cl:url src="http://cloudinary.com/favicon.png" type="fetch" effect="sepia"/>" />
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 </head>
 <body>
