読者です 読者をやめる 読者になる 読者になる

Code Lab

CakePHP/Python/Swiftを勉強中... 好きなことで生きて行く!

関連記事を表示するjsが間違ってました...

以前に紹介した関連記事を表示させるやつでミスが発覚...直してみた

shota-natuta.hatenablog.com

この記事で紹介したコードに見落としがありました。

それが、画像の部分。

f:id:natuta:20170205021420p:plain

右側の画像がずっと同じものが表示されてしまっていました。
ので修正。

$(function() {

	var num = 5; // 記事表数
	var category = $('.entry-categories.categories a:first-child').text(); //カテゴリー名を取得
	var categoriUrl = "http://" + location.host + "/feed/category/" + category; //カテゴリーfeed取得

	// feedから記事を取得
	$.get(categoriUrl, function (data) {
		$(data).find("entry").each(function (i) {
			if (i < num) {
		        var el = $(this);

		    	var title = el.find('title').text(); //ブログタイトル
		    	var articleLink = el.find('link').attr('href'); //ブログタイトル
		    	var overview = el.find('summary').text(); //ブログ概要
		    	var html = '<div class="embed-wrapper"><div class="embed-wrapper-inner"><div class="embed-content with-thumb"><div class="thumb-wrapper"><a href="' + articleLink + '" class="thumb" style="background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/natuta/20170204/20170204012227.png);background-size: cover;background-position: center center;"></a></div><div class="entry-body"><h2 class="entry-title"><a href="' + articleLink + '">' + title + '</a></h2><div class="entry-content">' + overview + '</div></div></div></div></div>';

		    	$('#related_article').append(html);
			} else {
				return false;
			}
		});
	});
});

このソースコード

var imgSrc = el.find('link[type="image/png"]').attr('href');

を追加。

そして、htmlの部分のbackgroundに取ってきた画像に差し替えます。

var html = '<div class="embed-wrapper"><div class="embed-wrapper-inner"><div class="embed-content with-thumb"><div class="thumb-wrapper"><a href="' + articleLink + '" class="thumb" style="background: url(' + imgSrc + ');background-size: cover;background-position: center center;"></a></div><div class="entry-body"><h2 class="entry-title"><a href="' + articleLink + '">' + title + '</a></h2><div class="entry-content">' + overview + '</div></div></div></div></div>';

僕のブログの場合、画像はだいたいpngを使っているのでいいのですが、jpgを使った場合はどうなるのか試してないです。
たぶん、自動的に生成されているものなので統一はされてそうですが...

では、すでに使ってくださっている方には申し訳ありませんが
修正の反映の方、よろしくお願いいたします。

参考にしてくださった方

この方の記事をみて、使われてる!やった!と思ってよくみてみたら自分のサムネイルがはまっていたので気づきました。
申し訳ないです...
workspacememory.hatenablog.com