rcmdnk's blog

20150208_recentposts_200_200

OctopressではデフォルトでRecent Postsの表示が出来る様になってますが、 これをちょっといじって画像付きにしました。

Sponsored Links

source/_includes/asides/recent_posts.html

サイドバーの表示用のパーツは source/_includes/asides/recent_posts.htmlにあります。 これを_config.ymlの中でdefault_asides等に加えると表示できます。

デフォルトだとrecent_posts指定された数だけタイトルがリンク付きでリストされます。

画像付きにしてみる

以前、 OctopressのIndexページの変更 の所でやったように、各ページにはogimageという値を付けてるので、 それを取ってきて付けるだけです。

Liquidで変数をTagに渡す方法 の所で変数をLiquidのimgタグにも渡せる様にしたのでそれを使います。

最初、これを直接使うように、recent_posts.htmlの中で、

recent_posts.html
1
2
3
4
5
6
7
8
9
10
<section>
  <h1>Recent Posts</h1>
  <ul id="recent_posts">
    {% for post in site.posts limit: site.recent_posts %}
      <li class="post">
        <a href="{{ root_url }}{{ post.url }}">{%img val:post.ogimage%}</a>
      </li>
    {% endfor %}
  </ul>
</section>

みたいに(これは画像だけのリストになりますが)直接書いてみると、 何故か一番最近のポストの画像が全ての箇所で表示されてしまいます。

ここの所ちょっと理解してないのですが、これを

1
2
3
4
-<li class="post">
-  <a href="{{ root_url }}{{ post.url }}">{%img val:post.ogimage%}</a>
+{% include asides/recent_post.html%}
-</li>

の様に更に他のファイルをインクルードするようにして、

source/_includes/asides/recent_post.html
1
2
3
<li class="post">
  <a href="{{ root_url }}{{ post.url }}">{%img val:post.ogimage%}</a>
</li>

みたいな上の内容をコピーしたものを用意してあげると今度は上手く行きます。

Jykillとかで中の変数とかがどのタイミングでどうセットされるのかが よく分かってないのですがどうも結構面倒な感じです。

最初の直接書く場合でもそこでHTMLを直接書いてしまえば上手く行くのですが、 なぜかimg_tagのプラグインの中では変数が暫く保存される様な現象が起こっています。

ともかく、1つファイルをインクルードすれば上手く行くので 上の様にsource/_includes/asides/recent_post.htmlに書くポストの内容を書きます。

最終的なのはこんな感じ:

source/_includes/asides/recent_posts.html
1
2
3
4
5
6
7
8
<section>
  <h1><a href="{{site.url}}/blog/archives/">Recent Posts</a></h1>
  <ul id="recent_posts">
    {% for post in site.posts limit: site.recent_posts %}
    {% include asides/recent_post.html%}
    {% endfor %}
  </ul>
</section>
source/_includes/asides/recent_post.html
1
2
3
4
5
6
7
8
9
<li class="post index_click_box">
  <div class="group">
    {% if post.ogimage and post.no_ogimage != true %}
    <div class="title-smallthumb">
      <a href="{{ root_url }}{{ post.url }}">{%img test val:post.ogimage%}</a>
    </div>
    <a class="click_box_link" href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a>
  </div>
</li>

ここでは OctopressのIndexページの変更 で作ったindex_click_boxを作って画像とタイトル全体をリンクにしています。

さらに、画像のサイズをCSSを使って

sass/plugins/_plugins.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.square-smallthumb {
  width: 120px;
  height: 90px;
}
.title-smallthumb {
  @extend .square-smallthumb;
  margin: 0 1em 0 0;
  @include shadow-box;
  float: left;
  text-align: left;
  overflow: hidden;
  img {
    min-width: 100%;
    min-height: 100%;
  }
}

こんな感じで設定しています。 (squareではないけれど元々square-thumbというのを使ってたのでその流れでそのままに)

ここの部分にも NailThumb を使おうかと思いましたが簡単に上の様にサイズ調整するだけで良いかな、と。

とこれのついでにIndexページの方も同じようにCSSだけで調整するようにして NailThumbは外しました。

Sponsored Links
Sponsored Links

« JTが飲料事業撤退ということで夏みかんゼリーを箱買した はてなブックマークの人気リストを画像付きにしてみる »