fix alt on img and move user defined max width setting to yaml

tennisfar · May 22, 2016 · 8e37595 · 8e37595
1 parent 96e8e5e
commit 8e37595
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 ---
 title:          GitHub Gallery
 image_folder:   /images/
+max_width:      900px
 sort_by:        modified_time   # modified_time or path (notice: path is case sensitive)
 date_format:    "%A, %B %-d, %Y"
 ---
@@ -27,7 +28,9 @@
     <li class="ins-imgs-li" id="{{ img_name }}">
         <div class="ins-imgs-img" onclick=this.classList.toggle("zoom");>
             <a name="{{ img.path }}" href="#{{ img_name }}">
-                <img src=".{{ img.path }}" alt="{{ img.path }}"/>
+                <img src=".{{ img.path }}"
+                     alt="{{ img_name }}"
+                     style="max-width: {{ page.max_width }}"/>
             </a>
         </div>
         <div class="ins-imgs-label">Image name: {{ img_name }} (added {{ img_date }})</div>

diff --git a/style.css b/style.css
@@ -19,15 +19,14 @@ li.ins-imgs-li {
 }
 
 div.ins-imgs-img img {
-    max-width: 900px;
     outline: none;
     -webkit-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
     box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.5);
 }
 
 div.ins-imgs-img.zoom img {
-    max-width: 100%;
+    max-width: 100% !important;
 }
 
 div.ins-imgs-label {