Browse Source

Allow dynamic images on each blog post (#143)

* Allow dynamic images on each blog post

* Adding responsive CSS for blog post images

* Adding image parameter to YAML front matter
Bryan Britten 2 years ago
parent
commit
66bd2ada99
7 changed files with 67 additions and 6 deletions
  1. 1
    0
      README.md
  2. 7
    0
      _config.yml
  3. 9
    1
      _includes/nav.html
  4. 1
    0
      _posts/2015-01-04-first-post.md
  5. 35
    0
      css/main.css
  6. BIN
      img/hello_world.jpeg
  7. 14
    5
      index.html

+ 1
- 0
README.md View File

@@ -137,6 +137,7 @@ subtitle    | Short description of page or blog post that goes under the title
137 137
 bigimg      | Include a large full-width image at the top of the page.  You can either give the path to a single image, or provide a list of images to cycle through (see [my personal website](http://deanattali.com/) as an example).
138 138
 comments    | If you want do add Disqus comments to a specific page, use `comments: true`. Comments are automatically enabled on blog posts; to turn comments off for a specific post, use `comments: false`. Comments only work if you set your Disqus id in the `_config.yml` file.
139 139
 show-avatar | If you have an avatar configured in the `_config.yml` but you want to turn it off on a specific page, use `show-avatar: false`. If you want to turn it off by default, locate the line `show-avatar: true` in the file `_config.yml` and change the `true` to `false`; then you can selectively turn it on in specific pages using `show-avatar: true`.
140
+image       | If you want to add a personalized image to your blog post that will show up next to the post's excerpt and on the post itself, use `image: /img/some_image.jpeg` where `some_image.jpeg` is replaced by the name of the image you would like to use.
140 141
 share-img   | If you want to specify an image to use when sharing the page on Facebook or Twitter, then provide the image's full URL here.
141 142
 social-share | If you don't want to show buttons to share a blog post on social media, use `social-share: false` (this feature is turned on by default).
142 143
 layout      | What type of page this is (default is `blog` for blog posts and `page` for other pages. You can use `minimal` if you don't want a header and footer)  

+ 7
- 0
_config.yml View File

@@ -182,6 +182,13 @@ prose:
182 182
           help: "Enter date of post."
183 183
           placeholder: "yyyy-mm-dd"
184 184
           alterable: true
185
+      - name: "image"
186
+        field:
187
+          element: "text"
188
+          label: "Image"
189
+          help: "Add a thumbnail image to your post."
190
+          placeholder: "Thumbnail"
191
+          alterable: true
185 192
       - name: "published"
186 193
         field:
187 194
           element: "checkbox"

+ 9
- 1
_includes/nav.html View File

@@ -37,7 +37,15 @@
37 37
       </ul>
38 38
     </div>
39 39
 
40
-	{% if site.avatar and (layout.show-avatar or page.show-avatar) %}
40
+	{% if page.image and (layout.show-avatar or page.show-avatar) %}
41
+	<div class="avatar-container">
42
+	  <div class="avatar-img-border">
43
+	    <a href="{{ site.url }} ">
44
+	      <img class="avatar-img" src="{{ page.image | prepend: site.baseurl | replace: '//', '/' }}" />
45
+		</a>
46
+	  </div>
47
+	</div>
48
+	{% elsif site.avatar and (layout.show-avatar or page.show-avatar) %}
41 49
 	<div class="avatar-container">
42 50
 	  <div class="avatar-img-border">
43 51
 	    <a href="{{ site.url }} ">

+ 1
- 0
_posts/2015-01-04-first-post.md View File

@@ -1,6 +1,7 @@
1 1
 ---
2 2
 layout: post
3 3
 title: First post!
4
+image: /img/hello_world.jpeg
4 5
 tags: [random, exciting-stuff]
5 6
 ---
6 7
 

+ 35
- 0
css/main.css View File

@@ -340,6 +340,28 @@ footer .theme-by {
340 340
 .post-preview .post-entry {
341 341
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
342 342
 }
343
+.post-entry-container {
344
+  display: inline-block;
345
+  width: 100%;
346
+}
347
+.post-entry {
348
+  width: 100%;
349
+}
350
+.post-image {
351
+  float: right;
352
+  height: 192px;
353
+  width: 192px;
354
+  margin-top: -35px;
355
+  filter: grayscale(90%);
356
+}
357
+.post-image:hover {
358
+  filter: grayscale(0%);
359
+}
360
+.post-image img {
361
+  border-radius: 100px;
362
+  height: 192px;
363
+  width: 192px;
364
+}
343 365
 .post-preview .post-read-more {
344 366
   font-weight: 800;
345 367
 }
@@ -382,6 +404,19 @@ footer .theme-by {
382 404
   }
383 405
 }
384 406
 
407
+@media only screen and (max-width: 500px) {
408
+  .post-image, .post-image img {
409
+    height: 100px;
410
+    width: 100px;
411
+  }
412
+  
413
+  .post-image {
414
+    width: 100%;
415
+    text-align: center;
416
+    margin-top: 0;
417
+    float: left;
418
+  }
419
+}
385 420
 /* --- Post and page headers --- */
386 421
 
387 422
 .intro-header {

BIN
img/hello_world.jpeg View File


+ 14
- 5
index.html View File

@@ -21,12 +21,21 @@ subtitle: This is where I will tell my friends way too much about me
21 21
       Posted on {{ post.date | date: "%B %-d, %Y" }}
22 22
     </p>
23 23
 
24
-    <div class="post-entry">
25
-      {{ post.excerpt | strip_html | xml_escape | truncatewords: site.excerpt_length }}
26
-      {% assign excerpt_word_count = post.excerpt | number_of_words %}
27
-      {% if post.content != post.excerpt or excerpt_word_count > site.excerpt_length %}
28
-        <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read&nbsp;More]</a>
24
+    <div class="post-entry-container">
25
+      {% if post.image %}
26
+      <div class="post-image">
27
+        <a href="{{ post.url | prepend: site.baseurl }}">
28
+          <img src="{{ post.image }}">
29
+        </a>
30
+      </div>
29 31
       {% endif %}
32
+      <div class="post-entry">
33
+        {{ post.excerpt | strip_html | xml_escape | truncatewords: site.excerpt_length }}
34
+        {% assign excerpt_word_count = post.excerpt | number_of_words %}
35
+        {% if post.content != post.excerpt or excerpt_word_count > site.excerpt_length %}
36
+          <a href="{{ post.url | prepend: site.baseurl }}" class="post-read-more">[Read&nbsp;More]</a>
37
+        {% endif %}
38
+      </div>
30 39
     </div>
31 40
 
32 41
     {% if post.tags.size > 0 %}

Loading…
Cancel
Save