diff --git a/README.md b/README.md index 6ba18f8..0af1c0e 100644 --- a/README.md +++ b/README.md @@ -137,6 +137,7 @@ subtitle | Short description of page or blog post that goes under the title 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). 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. 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`. +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. 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. 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). 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) diff --git a/_config.yml b/_config.yml index 380f9b7..18982a7 100644 --- a/_config.yml +++ b/_config.yml @@ -182,6 +182,13 @@ prose: help: "Enter date of post." placeholder: "yyyy-mm-dd" alterable: true + - name: "image" + field: + element: "text" + label: "Image" + help: "Add a thumbnail image to your post." + placeholder: "Thumbnail" + alterable: true - name: "published" field: element: "checkbox" diff --git a/_includes/nav.html b/_includes/nav.html index d1d0320..c0d37b7 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -37,7 +37,15 @@ - {% if site.avatar and (layout.show-avatar or page.show-avatar) %} + {% if page.image and (layout.show-avatar or page.show-avatar) %} +
+
+ + + +
+
+ {% elsif site.avatar and (layout.show-avatar or page.show-avatar) %}
diff --git a/_posts/2015-01-04-first-post.md b/_posts/2015-01-04-first-post.md index 6f1c6cb..81d55a6 100644 --- a/_posts/2015-01-04-first-post.md +++ b/_posts/2015-01-04-first-post.md @@ -1,6 +1,7 @@ --- layout: post title: First post! +image: /img/hello_world.jpeg tags: [random, exciting-stuff] --- diff --git a/css/main.css b/css/main.css index badf43b..0ba1aaf 100644 --- a/css/main.css +++ b/css/main.css @@ -340,6 +340,28 @@ footer .theme-by { .post-preview .post-entry { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } +.post-entry-container { + display: inline-block; + width: 100%; +} +.post-entry { + width: 100%; +} +.post-image { + float: right; + height: 192px; + width: 192px; + margin-top: -35px; + filter: grayscale(90%); +} +.post-image:hover { + filter: grayscale(0%); +} +.post-image img { + border-radius: 100px; + height: 192px; + width: 192px; +} .post-preview .post-read-more { font-weight: 800; } @@ -382,6 +404,19 @@ footer .theme-by { } } +@media only screen and (max-width: 500px) { + .post-image, .post-image img { + height: 100px; + width: 100px; + } + + .post-image { + width: 100%; + text-align: center; + margin-top: 0; + float: left; + } +} /* --- Post and page headers --- */ .intro-header { diff --git a/img/hello_world.jpeg b/img/hello_world.jpeg new file mode 100644 index 0000000..488f785 Binary files /dev/null and b/img/hello_world.jpeg differ diff --git a/index.html b/index.html index d846f02..9e8da19 100644 --- a/index.html +++ b/index.html @@ -21,12 +21,21 @@ subtitle: This is where I will tell my friends way too much about me Posted on {{ post.date | date: "%B %-d, %Y" }}

-
- {{ post.excerpt | strip_html | xml_escape | truncatewords: site.excerpt_length }} - {% assign excerpt_word_count = post.excerpt | number_of_words %} - {% if post.content != post.excerpt or excerpt_word_count > site.excerpt_length %} - [Read More] +
+ {% if post.image %} +
+ + + +
{% endif %} +
+ {{ post.excerpt | strip_html | xml_escape | truncatewords: site.excerpt_length }} + {% assign excerpt_word_count = post.excerpt | number_of_words %} + {% if post.content != post.excerpt or excerpt_word_count > site.excerpt_length %} + [Read More] + {% endif %} +
{% if post.tags.size > 0 %}