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">
 | 
					<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>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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 */
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -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
 | 
					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:
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue