-
-
Save jandersoncampelo/9ef1d2937bd7ae31cd7cf70254e2948c to your computer and use it in GitHub Desktop.
A small bash script to create a basic image gallery from a folder of images. An example of the resulting gallery is here http://sebspain.co.uk/photos/gallery1/ and the css etc is available here https://github.com/sebspain/sebspain.github.io. Currently very specific to my site but feel free to modify for your purposes. Eventually I may write it i…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| # | |
| if [ -e index.html ] | |
| then echo "index.html already exists, please remove it and rerun this script" | |
| exit | |
| fi | |
| #Create Thumbnails | |
| # | |
| #Check if directory exists and create it if not | |
| if [ -d thumbs ] | |
| then echo "thumbs directory found" | |
| else mkdir ./thumbs && echo "thumbs directory created" | |
| fi | |
| ##Create HTML page | |
| title=$1 | |
| cat >> ./index.html <<HEAD | |
| <!DOCTYPE HTML> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>sebspain.co.uk - gallery - $title</title> | |
| <link href='http://fonts.googleapis.com/css?family=PT+Sans|Open+Sans:300italic,400italic,700italic,400,300,700|Montserrat+Alternates|Montserrat|Share+Tech+Mono' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" href="/css/gridism.css"> | |
| <link rel="stylesheet" href="/css/normalize.css"> | |
| <link rel="stylesheet" href="/css/style.css"> | |
| <link rel="stylesheet" href="/css/syntax.css"> | |
| <!-- MathJax Section --> | |
| <script type="text/javascript" | |
| src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> | |
| <script> | |
| MathJax.Hub.Config({ | |
| tex2jax: { | |
| inlineMath: [['$','$'], ['\\(','\\)']], | |
| skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'] | |
| } | |
| }); | |
| MathJax.Hub.Queue(function() { | |
| var all = MathJax.Hub.getAllJax(), i; | |
| for(i=0; i < all.length; i += 1) { | |
| all[i].SourceElement().parentNode.className += ' has-jax'; | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body class="wrap wider"> | |
| <header> | |
| <div class="mobile-nav center-on-mobiles show-on-mobiles"> | |
| <p> | |
| <a href="/" class="button">Home</a> | |
| <a href="/blog.html" class="button ">Blog</a> | |
| <a href="/research/" class="button ">Research</a> | |
| <a href="/publications/" class="button ">Pub<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">lications</span></a> | |
| <a href="/graphics.html" class="button ">Graphics</a> | |
| <a href="/photos.html" class="button current">Photo<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">graphy</span></a> | |
| <a href="/about/" class="button ">About</a> | |
| </p> | |
| </div> | |
| </header> | |
| <div class="grid"> | |
| <div class="unit w-3-4 "> | |
| <h2>$title</h2> | |
| All images are by <a xmlns:cc="http://creativecommons.org/ns#" href="http://sebspain.co.uk/photos.html" property="cc:attributionName" rel="cc:attributionURL">Seb Spain</a> and are licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">Creative Commons Attribution-ShareAlike 3.0 Unported License</a> unless otherwise stated.</p> | |
| HEAD | |
| for i in *.jpg | |
| do | |
| convert -resize x250 $i thumbs/th_${i/.jpg/}.jpg | |
| caption=`cat caption.list | grep $i | sed ';s/.*://g' ` | |
| cat >> ./index.html <<HTML | |
| <div class="unit w-1-3"> | |
| <a class="lbLink" href="#img_$i"><img class="gallery" src="./thumbs/th_$i" alt="Thumbnail of $caption"/></a> | |
| <div class="lb" id="img_$i"> | |
| <a href="#close"><img src="$i" alt="$caption" /><p>$caption</p></a> | |
| </div> | |
| </div> | |
| HTML | |
| done | |
| cat >>./index.html<<FOOT | |
| </div> | |
| <nav class="main-nav unit w-1-4 hide-on-mobiles"> | |
| <ul> | |
| <li class="nav-button"> | |
| <a href="/">Home</a> | |
| </li> | |
| <li class="nav-button "> | |
| <a href="/blog.html">Blog</a> | |
| </li> | |
| <li class="nav-button "> | |
| <a href="/research/">Research</a> | |
| </li> | |
| <li class="nav-button "> | |
| <a href="/publications/">Pub<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">lications</span></a> | |
| </li> | |
| <li class="nav-button "> | |
| <a href="/graphics.html">Graphics</a> | |
| </li> | |
| <li class="nav-button current"> | |
| <a href="/photos.html">Photo<span class="show-on-mobiles">s</span><span class="hide-on-mobiles">graphy</span></a> | |
| </li> | |
| <li class="nav-button "> | |
| <a href="/about/">About</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <footer> | |
| <div class="grid"> | |
| <div class="unit full"> | |
| <div class="align-left center-on-mobiles"> | |
| <p>This website is built with <a href="http://jekyllrb.com">jekyll</a> and the source is <a href="https://github.com/sebspain/sebspain.github.io">hosted on github</a>, feel free to fork it</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |
| FOOT | |
| echo "HTML created and written to index.html" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment