Customize Feedzy RSS Feeds by CSS

2016年8月12日Web-log・ココログ関連,WordPress

I’m using a plugin – Feedzy RSS Feeds – to display abstracts of my website.

WordPress › FEEDZY RSS Feeds « WordPress Plugins

WordPressで投稿記事内に画像付きでRSSを埋め込む[追記あり]

(In Japanese)

However, Its specification doesn’t match my requirement, so I was using an alternated version of it. The version is developed by me. It accepts some new sort-codes.

Oichinote version of FEEDZY RSS Feeds

The result is as follows.

However, the original plugin was updated, then the alternative version has to be updated also. Otherwise, the customize will be never reflected. Feedzy RSS Feeds isn’t an exception. I thought I should update my alternative version.

I made a miss-operation on WordPress, the customize has gone. Then, the display is no good for me without custimize.

Can you catch the different? The second photo is zoomed up of its center. Oh, my god! I have to update it.

The point of my customize for Feedzy RSS Feeds is embedding CSS to feedzy-rss-feeds-shortcode.php that displays images.

background-size: contain; background-repeat: no-repeat;

If you customize the plugin, then it is as follows.

--- feedzy-rss-feeds-shortcode.php	2016-01-30 18:25:25.000000000 +0900
+++ feedzy-rss-feeds-shortcode.php.revised	2016-01-30 17:55:37.000000000 +0900
@@ -155,7 +155,7 @@
 						
 						$thethumbnail = feedzy_image_encode( $thethumbnail );
 						$contentThumb .= '<span class="default" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image:  url(' . $default . ');" alt="' . $item->get_title() . '"></span>';
-						$contentThumb .= '<span class="fetched" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image:  url(' . $thethumbnail . ');" alt="' . $item->get_title() . '"></span>';
+						$contentThumb .= '<span class="fetched" style="width:' . $sizes['width'] . 'px; height:' . $sizes['height'] . 'px; background-image:  url(' . $thethumbnail . '); background-size: contain; background-repeat: no-repeat;" alt="' . $item->get_title() . '"></span>';
 					
 					} else if ( empty( $thethumbnail ) && $thumb == 'yes' ) {

If I would add the CSS without customizing the plugin, it is happy for me. I found a definition of its class when I analyzed the plugin. I will be able to embed the CSS without customize the plugin.

.feedzy-rss .rss_item .rss_image .fetched {
    background-size: contain;
    background-repeat: no-repeat;
}

.feedzy-rss .rss_item .rss_image .default {
    display: none;
}

Please include this CSS your WordPress such as JetPack’s custom CSS. I got a good view as follows.

[amazonjs asin="B01B48SKDK" locale="JP"]

Japanese Version of this article is below.