Add support for large intro images
- Add Unsplash images to example site for testing
This commit is contained in:
parent
f3487a87c2
commit
1d50924d8b
|
@ -1,4 +1,15 @@
|
|||
<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="intro-text">
|
||||
<h1 class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1>
|
||||
|
|
|
@ -8,6 +8,16 @@
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.intro-image {
|
||||
position: relative;
|
||||
margin-top: -3rem; /* compensate for intro top margin */
|
||||
margin-bottom: 2rem;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
|
||||
/* remove space after last child element */
|
||||
|
|
|
@ -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 |
|
@ -3,7 +3,7 @@ layout: home
|
|||
paginate: true
|
||||
alt_title: "Basically Basic"
|
||||
sub_title: "The name says it all"
|
||||
image: assets/images/markus-spiske-207946.jpg
|
||||
image: /assets/images/amine-ounnas-180287.jpg
|
||||
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**.
|
||||
actions:
|
||||
|
|
Loading…
Reference in New Issue