support big images; fixes #37

This commit is contained in:
Dean Attali 2016-03-18 04:33:17 -07:00
parent 8a9ce8af06
commit e6cb0a4f54
8 changed files with 332 additions and 116 deletions

76
_includes/header.html Normal file
View File

@ -0,0 +1,76 @@
<!-- TODO this file has become a mess, refactor it -->
{% if page.bigimg or page.title %}
{% if page.bigimg %}
<div id="header-big-imgs" data-num-img={% if page.bigimg.first %}{{ page.bigimg.size }}{% else %}1{% endif %}
{% for bigimg in page.bigimg %}
{% assign imgnum = forloop.index %}
{% for imginfo in bigimg %}
{% if imginfo[0] %}
data-img-src-{{ imgnum }}="{{ imginfo[0] | prepend: site.baseurl | replace: '//', '/' }}"
data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
{% else %}
data-img-src-{{ imgnum }}="{{ imginfo | prepend: site.baseurl | replace: '//', '/' }}"
{% endif %}
{% endfor %}
{% endfor %}
></div>
{% endif %}
<header class="header-section {% if page.bigimg %}has-img{% endif %}">
{% if page.bigimg %}
<div class="big-img intro-header">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="{{ include.type }}-heading">
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
{% if page.subtitle %}
{% if include.type == "page" %}
<hr class="small">
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
{% else %}
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
{% endif %}
{% endif %}
{% if include.type == "post" %}
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
{% endif %}
</div>
</div>
</div>
</div>
<span class='img-desc'></span>
</div>
{% endif %}
<div class="intro-header no-img">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="{{ include.type }}-heading">
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
{% if page.subtitle %}
{% if include.type == "page" %}
<hr class="small">
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
{% else %}
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
{% endif %}
{% endif %}
{% if include.type == "post" %}
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</header>
{% else %}
<div class="intro-header"></div>
{% endif %}

View File

@ -22,9 +22,7 @@ common-js:
{% include nav.html %}
<div role="main" class="container main-content">
{{ content }}
</div>
{% include footer.html %}

View File

@ -2,22 +2,9 @@
layout: default
---
{% if page.title %}
<header class="header-page">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="page-heading">
<h1>{{ page.title }}</h1>
{% if page.subtitle %}
<hr class="small">
<span class="page-subheading">{{ page.subtitle }}</span>
{% endif %}
</div>
</div>
</div>
</header>
{% endif %}
{% include header.html type="page" %}
<div class="container" role="main">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
@ -28,3 +15,4 @@ layout: default
{% endif %}
</div>
</div>
</div>

View File

@ -2,30 +2,15 @@
layout: default
---
<header class="header-post">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ page.title }}</h1>
{% if page.subtitle %}
<h2 class="post-subheading">{{ page.subtitle }}</h2>
{% endif %}
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
</div>
</div>
</div>
</header>
{% include header.html type="post" %}
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<article role="main" class="blog-post">
{{ content }}
</div>
</div>
</article>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<ul class="pager blog-pager">
{% if page.previous.url %}
<li class="previous">
@ -38,13 +23,12 @@ layout: default
</li>
{% endif %}
</ul>
</div>
</div>
{% if page.comments %}
<div class="row disqus-comments">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="disqus-comments">
{% include disqus.html %}
</div>
</div>
{% endif %}
</div>
</div>
</div>

View File

@ -2,6 +2,7 @@
layout: post
title: Flake it till you make it
subtitle: Excerpt from Soulshaping by Jeff Brown
bigimg: /img/path.jpg
---
Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who hit me, no one would say that I had a commitment problem. But if I walk away from a seemingly secure route because my soul has other ideas, I am a flake?

View File

@ -326,49 +326,139 @@ footer .theme-by {
}
}
/* --- Post and page layout --- */
/* --- Post and page headers --- */
header.header-page {
margin-bottom: 20px;
.intro-header {
margin: 80px 0 20px;
position: relative;
}
header.header-page .page-heading {
.intro-header.big-img {
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-top: 51px; /* The small navbar is 50px tall + 1px border */
margin-bottom: 35px;
}
.intro-header.big-img .big-img-transition {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.intro-header .page-heading {
text-align: center;
}
header.header-post .post-heading h1 {
font-size: 35px;
margin-top: 0;
.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
padding: 100px 0;
color: #FFF;
text-shadow: 1px 1px 3px #000;
}
header.header-page .page-heading h1 {
.intro-header .page-heading h1 {
margin-top: 0;
font-size: 50px;
margin-top: 0;
}
header.header-post .post-heading .post-subheading,
header.header-page .page-heading .page-subheading {
font-size: 24px;
.intro-header .post-heading h1 {
margin-top: 0;
font-size: 35px;
}
.intro-header .page-heading .page-subheading,
.intro-header .post-heading .post-subheading {
font-size: 27px;
line-height: 1.1;
display: block;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
margin: 10px 0 0;
}
header.header-post .post-heading .post-subheading {
.intro-header .post-heading .post-subheading {
margin-bottom: 20px;
}
.intro-header.big-img .page-heading .page-subheading,
.intro-header.big-img .post-heading .post-subheading {
font-weight: 400;
}
.intro-header.big-img .page-heading hr {
box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
-moz-box-shadow: 1px 1px 3px #000;
}
.intro-header.big-img .post-heading .post-meta {
color: #EEE;
}
.intro-header.big-img .img-desc {
background: rgba(30, 30, 30, 0.6);
position: absolute;
padding: 5px 10px;
font-size: 11px;
color: #EEE;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
right: 0;
bottom: 0;
display: none;
}
@media only screen and (min-width: 768px) {
header.header-post .post-heading h1 {
.intro-header {
margin-top: 130px;
}
.intro-header.big-img {
margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */
}
.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
padding: 150px 0;
}
.intro-header .page-heading h1 {
font-size: 80px;
}
.intro-header .post-heading h1 {
font-size: 50px;
}
.intro-header.big-img .img-desc {
font-size: 14px;
}
}
@media only screen and (min-width: 768px) {
header.header-page .page-heading h1 {
font-size: 80px;
.header-section.has-img .no-img {
margin-top: 0;
background: #FCFCFC;
margin: 0 0 40px;
padding: 20px 0;
box-shadow: 0 0 5px #AAA;
}
/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
.header-section.has-img .intro-header.no-img {
display: none;
}
@media only screen and (max-width: 365px) {
.header-section.has-img .intro-header.no-img {
display: block;
}
.intro-header.big-img {
width: 100%;
height: 220px;
}
.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
display: none;
}
.header-section.has-img .big-img {
margin-bottom: 0;
}
}
@media only screen and (max-width: 325px) {
.intro-header.big-img {
height: 200px;
}
}

BIN
img/path.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

View File

@ -1,5 +1,11 @@
// Dean Attali / Beautiful Jekyll 2015
// Dean Attali / Beautiful Jekyll 2016
var main = {
bigImgEl : null,
numImgs : null,
init : function() {
// Shorten the navbar after scrolling a little bit down
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
@ -29,4 +35,77 @@ $('#main-navbar').on("click", ".navlinks-parent", function(e) {
});
});
// show the big header image
main.initImgs();
},
initImgs : function() {
// If the page was large images to randomly select from, choose an image
if ($("#header-big-imgs").length > 0) {
main.bigImgEl = $("#header-big-imgs");
main.numImgs = main.bigImgEl.attr("data-num-img");
// 2fc73a3a967e97599c9763d05e564189
// set an initial image
var imgInfo = main.getImgInfo();
var src = imgInfo.src;
var desc = imgInfo.desc;
main.setImg(src, desc);
// For better UX, prefetch the next image so that it will already be loaded when we want to show it
var getNextImg = function() {
var imgInfo = main.getImgInfo();
var src = imgInfo.src;
var desc = imgInfo.desc;
var prefetchImg = new Image();
prefetchImg.src = src;
// if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
setTimeout(function(){
var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
$(".intro-header.big-img").prepend(img);
setTimeout(function(){ img.css("opacity", "1"); }, 50);
// after the animation of fading in the new image is done, prefetch the next one
//img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
setTimeout(function() {
main.setImg(src, desc);
img.remove();
getNextImg();
}, 1000);
//});
}, 6000);
};
// If there are multiple images, cycle through them
if (main.numImgs > 1) {
getNextImg();
}
}
},
getImgInfo : function() {
var randNum = Math.floor((Math.random() * main.numImgs) + 1);
var src = main.bigImgEl.attr("data-img-src-" + randNum);
var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
return {
src : src,
desc : desc
}
},
setImg : function(src, desc) {
$(".intro-header.big-img").css("background-image", 'url(' + src + ')');
if (typeof desc !== typeof undefined && desc !== false) {
$(".img-desc").text(desc).show();
} else {
$(".img-desc").hide();
}
}
};
// 2fc73a3a967e97599c9763d05e564189
document.addEventListener('DOMContentLoaded', main.init);