Add support for large intro images

- Add Unsplash images to example site for testing
This commit is contained in:
Michael Rose 2017-03-13 22:13:50 -04:00
parent f3487a87c2
commit 1d50924d8b
7 changed files with 48 additions and 1 deletions

View File

@ -1,4 +1,15 @@
<header id="intro"> <header id="intro">
{% if page.image %}
{% assign intro_image = page.image.path | default: page.image %}
{% unless intro_image contains '://' %}
{% assign intro_image = intro_image | relative_url %}
{% endunless %}
{% assign intro_image = intro_image | escape %}
<div class="intro-image">
<img src="{{ intro_image }}" alt="{{ page.title }}">
</div>
{% endif %}
<div class="inner"> <div class="inner">
<div class="intro-text"> <div class="intro-text">
<h1 class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1> <h1 class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1>

View File

@ -8,6 +8,16 @@
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.intro-image {
position: relative;
margin-top: -3rem; /* compensate for intro top margin */
margin-bottom: 2rem;
img {
width: 100%;
}
}
.intro-text { .intro-text {
/* remove space after last child element */ /* remove space after last child element */

View File

@ -0,0 +1,26 @@
---
title: "Layout: Intro Image"
image: /assets/images/eder-oliveira-180877.jpg
categories:
- Layout
tags:
- content
- image
- layout
last_modified_at: 2017-03-13T22:06:24-04:00
---
This post should display an image in the introductory section of a page.
This post tests a horizontal image using the following YAML Front Matter:
```yaml
image: /assets/images/eder-oliveira-180877.jpg
```
Intro images can also be assigned like this:
```yaml
image:
path: /assets/images/eder-oliveira-180877.jpg
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 222 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 183 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 KiB

View File

@ -3,7 +3,7 @@ layout: home
paginate: true paginate: true
alt_title: "Basically Basic" alt_title: "Basically Basic"
sub_title: "The name says it all" sub_title: "The name says it all"
image: assets/images/markus-spiske-207946.jpg image: /assets/images/amine-ounnas-180287.jpg
introduction: | introduction: |
Basically Basic is a Jekyll theme meant to be a substitute for the default `jekyll new` theme --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**. Basically Basic is a Jekyll theme meant to be a substitute for the default `jekyll new` theme --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
actions: actions: