made base colorbox template work
This commit is contained in:
		
							parent
							
								
									0c14627592
								
							
						
					
					
						commit
						fb16ebf20d
					
				
					 2 changed files with 13 additions and 166 deletions
				
			
		|  | @ -1,7 +1,19 @@ | |||
| {% extends "base.html" %} | ||||
| 
 | ||||
| {# | ||||
|     A head block must be defined in the Pelican theme's base.html prior to | ||||
|     closing the HTML head tag so that the siglican stylesheets and javascript | ||||
|     can be added. simply adding: | ||||
|         {% block head %}{% endblock %}  | ||||
|     just before the head closer is sufficient. | ||||
| #} | ||||
| 
 | ||||
| {% block head %} | ||||
|     {{ super() }} | ||||
|     <link rel="stylesheet" href="{{ SIGAL_THEME_URL }}/css/style.min.css"> | ||||
| {% endblock %} | ||||
| 
 | ||||
| {% block content %} | ||||
|       <link rel="stylesheet" href="{{ SIGAL_THEME_URL }}/css/style.min.css">    <!-- this needs to be in head --> | ||||
|       <div id="main" role="main" class="twelve columns offset-by-four"> | ||||
|         <header> | ||||
|           {% if SIGAL_ALBUM.breadcrumb %} | ||||
|  |  | |||
|  | @ -1,165 +0,0 @@ | |||
| <!doctype html> | ||||
| <html lang="en"> | ||||
|   <head> | ||||
|     <meta charset="utf-8"> | ||||
|     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||||
| 
 | ||||
|     <title>{{ album.title }}</title> | ||||
|     <meta name="description" content=""> | ||||
|     <meta name="author" content="{{ author }}"> | ||||
|     <meta name="viewport" content="width=device-width"> | ||||
| 
 | ||||
|     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=PT+Sans"> | ||||
|     <link rel="stylesheet" href="{{ theme.url }}/css/style.min.css"> | ||||
|     <!--[if lt IE 9]> | ||||
|         <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> | ||||
|     <![endif]--> | ||||
|   </head> | ||||
|   <body> | ||||
|     <div class="container"> | ||||
|       <div class="four columns"> | ||||
|         <div class="sidebar"> | ||||
|           <h1><a href="{{ album.index_url }}">{{ index_title }}</a></h1> | ||||
|           {% if settings.links %} | ||||
|           <nav id="menu"> | ||||
|             <ul> | ||||
|               {% for title, link in settings.links %} | ||||
|               <li><a href="{{ link }}">{{ title }}</a></li> | ||||
|               {% endfor %} | ||||
|             </ul> | ||||
|           </nav> | ||||
|           {% endif %} | ||||
|           <footer> | ||||
|             <p>{% if author %}© {{ author }} - {% endif %} | ||||
|               Generated by <a href="{{ sigal_link }}">sigal</a></p> | ||||
|           </footer> | ||||
|         </div> | ||||
|       </div> | ||||
| 
 | ||||
|       <div id="main" role="main" class="twelve columns offset-by-four"> | ||||
|         <header> | ||||
|           {% if album.breadcrumb %} | ||||
|           <h2> | ||||
|             {% for url, title in album.breadcrumb %} | ||||
|             <a href="{{ url }}">{{ title }}</a>{% if not loop.last %} » {% endif %} | ||||
|             {% endfor -%} | ||||
|           </h2> | ||||
|           <hr> | ||||
|           {% endif %} | ||||
|         </header> | ||||
| 
 | ||||
|         {% set numbers = ["zero", "one", "two", "three", "four", "five", "six", | ||||
|         "seven", "eight", "nine", "ten", "eleven", "twelve"] %} | ||||
|         {% set column_size = settings.colorbox_column_size %} | ||||
|         {% set nb_columns = (12 / column_size)|int %} | ||||
|         {% set column_size_t = numbers[column_size] %} | ||||
| 
 | ||||
|         {% if album.albums %} | ||||
|         {% for alb in album.albums %} | ||||
|           {% if loop.index % nb_columns == 1 %} | ||||
|           <div id="albums" class="row"> | ||||
|           {% endif%} | ||||
|             <div class="{{ column_size_t }} columns thumbnail | ||||
|                         {% if loop.index % nb_columns == 1 %}alpha{% endif%} | ||||
|                         {% if loop.index % nb_columns == 0 %}omega{% endif%}"> | ||||
|               <a href="{{ alb.url }}"> | ||||
|                 <img src="{{ alb.thumbnail }}" class="album_thumb" | ||||
|                     alt="{{ alb.name }}" title="{{ alb.name }}" /></a> | ||||
|               <span class="album_title">{{ alb.title }}</span> | ||||
|             </div> | ||||
|           {% if loop.last or loop.index % nb_columns == 0 %} | ||||
|           </div> | ||||
|           {% endif%} | ||||
|         {% endfor %} | ||||
|         {% endif %} | ||||
| 
 | ||||
|         {% if album.medias %} | ||||
|           {% macro img_description(media) -%} | ||||
|             {% if media.big %} data-big="{{ media.big }}"{% endif %} | ||||
|             {% if media.exif %} | ||||
|               {% if media.exif.datetime %} | ||||
|                 data-date=", {{ media.exif.datetime }}" | ||||
|               {% endif %} | ||||
|             {% endif %} | ||||
|           {%- endmacro %} | ||||
|         <div id="gallery" class="row"> | ||||
|           {% for media in album.medias %} | ||||
|             {% if media.type == "image" %} | ||||
|             <div class="{{ column_size_t }} columns thumbnail | ||||
|                         {% if loop.index % nb_columns == 1 %}alpha{% endif%} | ||||
|                         {% if loop.index % nb_columns == 0 %}omega{% endif%}"> | ||||
|               <a href="{{ media.filename }}" class="gallery" title="{{ media.filename }}" {{ img_description(media) }}> | ||||
|                 <img src="{{ media.thumbnail }}" alt="{{ media.filename }}" | ||||
|                     title="{{ media.title if media.title else media.filename }}" /></a> | ||||
|             </div> | ||||
|             {% endif %} | ||||
|             {% if media.type == "video" %} | ||||
|               <div class="{{ column_size_t }} columns thumbnail | ||||
|                           {% if loop.index % nb_columns == 1 %}alpha{% endif%} | ||||
|                           {% if loop.index % nb_columns == 0 %}omega{% endif%}"> | ||||
|                 <a href="#{{ media.filename|replace('.', '')|replace(' ', '') }}" | ||||
|                   class="gallery" inline='yes' title="{{ media.filename }}" | ||||
|                   {% if media.big %} data-big="{{ media.big }}"{% endif %}> | ||||
|                   <img src="{{ media.thumbnail }}" alt="{{ media.filename }}" | ||||
|                       title="{{ media.title if media.title else media.filename }}" /></a> | ||||
|               </div> | ||||
|               <!-- This contains the hidden content for the video --> | ||||
|               <div style='display:none'> | ||||
|                 <div id="{{ media.filename|replace('.', '')|replace(' ', '') }}"> | ||||
|                   <video controls> | ||||
|                   <source src='{{ media.filename }}' type='video/webm' /> | ||||
|                   </video> | ||||
|                 </div> | ||||
|               </div> | ||||
|             {% endif %} | ||||
|           {% endfor %} | ||||
|         </div> | ||||
|         {% endif %} | ||||
| 
 | ||||
|         {% if album.zip %} | ||||
|         <div id="additionnal-infos" class="row"> | ||||
|           <p><a href="{{ album.zip }}" | ||||
|               title="Download a zip archive with all images">Download ZIP</a></p> | ||||
|         </div> | ||||
|         {% endif %} | ||||
| 
 | ||||
|         {% if album.description %} | ||||
|         <div id="description" class="row"> | ||||
|           {{ album.description }} | ||||
|         </div> | ||||
|         {% endif %} | ||||
|       </div> | ||||
|     </div> | ||||
| 
 | ||||
|     {% if album.medias %} | ||||
|     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||||
|     <script>!window.jQuery && document.write(unescape('%3Cscript src="{{ theme.url }}/js/jquery-1.10.2.min.js"%3E%3C/script%3E'))</script> | ||||
|     <script src="{{ theme.url }}/js/jquery.colorbox.min.js"></script> | ||||
| 
 | ||||
|     <script> | ||||
|       $(".gallery").colorbox({ | ||||
|         rel:"gallery", | ||||
|         transition:"none", | ||||
|         maxWidth: "90%", | ||||
|         maxHeight: "90%", | ||||
|         scalePhotos: true, | ||||
|         current: "{current} / {total}", | ||||
|         title: function () { | ||||
|           title = this.title; | ||||
|           if(this.hasAttribute("data-big")) { | ||||
|             title += " (full size)".link(this.getAttribute("data-big")); | ||||
|           } | ||||
|           if(this.hasAttribute("data-date")) { | ||||
|             title += this.getAttribute("data-date"); | ||||
|           } | ||||
|           return title; | ||||
|         }, | ||||
|         inline: function() { | ||||
|           return this.hasAttribute("inline"); | ||||
|         } | ||||
|       }); | ||||
|     </script> | ||||
|     {% endif %} | ||||
|     {% include 'analytics.html' %} | ||||
|   </body> | ||||
| </html> | ||||
		Loading…
	
		Reference in a new issue