Skip to content

Commit

Permalink
fix photos
Browse files Browse the repository at this point in the history
  • Loading branch information
@ncharlton02
ncharlton02 committed Sep 25, 2018
1 parent a0397f3 commit 7af3742
Show file tree
Hide file tree
Showing 28 changed files with 11,257 additions and 39 deletions.
23 changes: 21 additions & 2 deletions build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,32 @@ const {ncp} = require("ncp")
const del = require("del")

function injectTemplates(filename) {
let html = fs.readFileSync(filename).toString()
let html = fs.readFileSync(filename).toString();

//Inject templates
html = html.replace(/{{{.*}}}/g, (match, x, y) => {
return fs.readFileSync(`templates/${match.replace(/[{}]/g, "")}`).toString()
})

let photoItemSrc = fs.readFileSync("templates/photoitem.html").toString();

//Inject images
html = html.replace(/{img}(.|\n|\r)*?{img}/g, (match, x, y) => {
match = match.replace("{img}", "{");
match = match.replace("{img}", "}");

json = JSON.parse(match);

output = photoItemSrc.replace("[IMG_SRC]", json.src);
output = output.replace("[IMG_SRC]", json.src);
output = output.replace("[CAPTION]", json.caption);
output = output.replace("[SIZE]", json.size);

return output
})

fs.writeFileSync(filename, html)
console.log("---parsed ", filename)

}

function fromDir(startPath, filter) {
Expand Down
17 changes: 17 additions & 0 deletions docs/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,23 @@ hr {
background-color: #FFFFFF;
}

.title-caption{
text-align: center;
max-width: 420px;
margin: 0 auto;
font-size: 30px;
padding: 10px;
line-height: 30px;
color: white;
font-weight: bold;
}

.gallery-img {
max-width: 100%; /* you can use % */
height: auto;
max-height: 500px;
}

.page-box {
background: #1892ca;
padding-left: 5px;
Expand Down
150 changes: 132 additions & 18 deletions docs/gallery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,14 @@
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/main.js"></script>
<link rel="stylesheet" href="photoswipe/photoswipe.css">
<link rel="stylesheet" href="photoswipe/default-skin/default-skin.css">
<script src="photoswipe/photoswipe.min.js"></script>
<script src="photoswipe/photoswipe-ui-default.min.js"></script>
<script src="js/photos.js"></script>
</head>

<body class="webpage-body">
<body class="webpage-body" onload="loadGallery()">
<center>
<div class="topnav" id="navbar">
<div class="mobile-hamburger-container">
Expand All @@ -31,24 +36,133 @@
<a href="gallery.html">Gallery</a>
</div>
</div>
<div class="page-box">
<h1>Gallery</h1>
<img src="assets/team_pictures/outreach/trick-or-treat.png" height="300">
<img src="assets/team_pictures/outreach/Capture01.PNG" height="300">
<img src="assets/team_pictures/outreach/Capture02.PNG" height="300">
<img src="assets/team_pictures/cannonbot/cannonbot.jpg" height="300">
<img src="assets/team_pictures/cannonbot/Capture06.PNG" height="300">
<img src="assets/team_pictures/cannonbot/cannon prototype.png" height="300">
<img src="assets/team_pictures/cannonbot/cannon-stuff.jpg" height="300">
<img src="assets/team_pictures/cannonbot/game2.png" height="300">
<img src="assets/team_pictures/ftc 2017/Capture03.PNG" height="300">
<img src="assets/team_pictures/ftc 2017/Capture05.PNG" height="200">
<img src="assets/team_pictures/ftc 2017/drivetrain prototype.PNG" height="300">
<img src="assets/team_pictures/ftc 2017/gyro code.png" height="300">
<img src="assets/team_pictures/ftc 2017/intake-prototype.PNG" height="300">

<br><br><br>

<!-- Sumobots -->

<figcaption class="title-caption" itemprop="caption description">July 4th Fair</figcaption>

<div class="my-gallery-item" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/team_pictures/sumobots/driving0.png" itemprop="contentUrl" data-size="810x555">
<img class="gallery-img" src="assets/team_pictures/sumobots/driving0.png" itemprop="thumbnail" />
</a>
<figcaption class="pswp__caption__center" itemprop="caption description"></figcaption>
</figure>
</div>

<div class="my-gallery-item" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/team_pictures/sumobots/driving1.png" itemprop="contentUrl" data-size="588x588">
<img class="gallery-img" src="assets/team_pictures/sumobots/driving1.png" itemprop="thumbnail" />
</a>
<figcaption class="pswp__caption__center" itemprop="caption description"></figcaption>
</figure>
</div>

<div class="my-gallery-item" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/team_pictures/sumobots/driving3.png" itemprop="contentUrl" data-size="578x773">
<img class="gallery-img" src="assets/team_pictures/sumobots/driving3.png" itemprop="thumbnail" />
</a>
<figcaption class="pswp__caption__center" itemprop="caption description"></figcaption>
</figure>
</div>

<!-- Cannonbot -->

<br><br>
<figcaption class="title-caption" itemprop="caption description">The Tee
Shirt Cannon</figcaption>
<br>

<div class="my-gallery-item" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/team_pictures/cannonbot/cannonbot.jpg" itemprop="contentUrl" data-size="2048x1365">
<img class="gallery-img" src="assets/team_pictures/cannonbot/cannonbot.jpg" itemprop="thumbnail" />
</a>
<figcaption class="pswp__caption__center" itemprop="caption description">The tee shirt cannon at the high school football game</figcaption>
</figure>
</div>

<div class="my-gallery-item" itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="assets/team_pictures/cannonbot/bright.png" itemprop="contentUrl" data-size="2048x1365">
<img class="gallery-img" src="assets/team_pictures/cannonbot/bright.png" itemprop="thumbnail" />
</a>
<figcaption class="pswp__caption__center" itemprop="caption description">A test of the tee shirt cannons LEDs</figcaption>
</figure>
</div>




<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>

<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">

<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<!-- don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>

<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">

<div class="pswp__top-bar">

<!-- Controls are self-explanatory. Order can be changed. -->

<div class="pswp__counter"></div>

<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

<button class="pswp__button pswp__button--share" title="Share"></button>

<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>

<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>

<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>

<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>

<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>

</div>
<h6>Copyright Eastern Ohio Robotics 2018</h6>
<hr/>

</div>

</div>
</center>
</body>

Expand Down
Loading

0 comments on commit 7af3742

Please sign in to comment.