Change newsfeed title to image/logo?

[A Former User]

@electros
See ‘max-width’, and ‘max-height’ or you can use ‘background-position:contain’ as backfroundimage to adjust image size

[electros]

@sean
Thanks I thought it was because the logo image is too big so it does not display it. Now I have solved, the logo is displayed, but I have the same problem as @blueadam, which means I have the newsfeed 2 times the old version and the new version. And I’ve tried many variants, but I can not make the old one disappear.
That’s why I ask @blueadam to tell me how he got rid of the old one.
Thanks

[blueadam]

@electros

I’ll try my best to explain how I managed to get rid of the old one. Also I made all of these changes to code before @justjim1220 posted updated version of the code so I don’t guarantee it will work with those changes but you can give a try.

So, what I noticed is that part of the code in newsfeed.js file that we fixed was the description part. I spent some time staring at mine MagicMirror and I noticed that those news titles won’t show as double. Instead, there is the original one and the second one that we have created which shows the news description, not the title.

First I fixed the code that it will show the title instead of the description. In other words change the word ‘description’ to ‘title’.

Now we have done that there are two titles like you said. To understand why this is happening let’s go through the newsfeed.js code to understand why this is happening.

1. orginal part of the code which prints the title
2. first part of the new code which prints the logo and the timer
3. second part of the new code which prints the scrolling headline.

The scrolling effect is quite cool but unfortunately it won’t fit to my Magic Mirror lay out so I decided to remove that part of the code. For that reason I removed this part of the code.

Next thing we notice that the title is coming before our logo and timer. That is why we have to move new part of the code above the old one.

Now there is just one fault left which is that now there is our new logo + timer and the old text title + timer. To ‘remove’ the old one go to the config.js file and find the newsfeed module. Over there you can change showSourceTitle and showPublishDate values from ‘true’ to ‘false’. After that all should be working perfect.

I hope that helped you even a little.

[justjim1220]

@blueadam

Cool, I have mine to show the title and description so I can at least see what the headline is and a brief description.

Just didn’t include that in the sample.

If you cahnge everything to false except what you are wanting to show, it will fix the double posting of the date. As I had it set to only show the description since everything is under that code snippet.

Still working on having more than one newsfeed with the logo images.
Thanks!

[electros]

@blueadam yes, now everything is fine. thank you

[justjim1220]

@blueadam @cyberphox @electros

MMM-NewsFeedTicker

Yes! I now have the scrolling newsfeed with logo that will change for more than 1 newsfeed!!! :smiling_face_with_sunglasses:

Thanks to @sdetweil and @Sean for helping me along and learning me!

[StrIIker]

@justjim1220

I love this News Ticker. Can I ask how I can change the size of the ticker? My mirror is in Portrait mode and the font feels oversized. I would prefer 40-50% of the current release size which would also allow the full headline to show. Also, can you include an opacity value for the background? I like the maroon but would prefer it to be less intense. I am sure these could be handled via the custom.css but I am a novice with this all. Thank you again for a great module!

[justjim1220]

@striiker

Add this to custom.css, Make the changes you want in it…

.MMM-NewsFeedTicker {
    height: 100px;
    background-color: maroon;
    opacity: 1.0;
}

.MMM-NewsFeedTicker .headline {
    padding-top: 15px;
    font-size: 100%;
}

.MMM-NewsFeedTicker .image {
  height: 100px;
  background-color: #FFF;
}

Let me know if you have any problems with this.

I am glad that you like it! :smiling_face_with_sunglasses:

[cyberphox]

Ok so to remove the old one and install this, let’s review the steps! :)
Anyone…??

[StrIIker]

@cyberphox said in Change newsfeed title to image/logo?:

Ok so to remove the old one and install this, let’s review the steps! :)
Anyone…??

Sure! I assume this is what you want…

Refer to: https://github.com/justjim1220/MMM-NewsFeedTicker for the full install details etc.

Install new news ticker:
Log into your Raspberry Pi as pi and:

cd ~/MagicMirror/modules
git clone https://github.com/justjim1220/MMM-NewsFeedTicker.git

This installs the requisite module into the correct directory.

Remove old news and enable new news
The nice thing with this is that enabling or disabling modules is done simply by adding or deleting entries in the config.js file. The only catch is that it’s touchy with proper syntax so make sure you aren’t missing something simple (like a trailing comma or a misplaced ‘}’ or ‘{’. I suggest backing up your current config.js so that you can revert to it if needed. This is generally a good policy when modifying any config files. To check your config for errors, reference the following article:
https://forum.magicmirror.builders/topic/5399/how-to-check-your-config-for-errors-for-absolute-beginners/2
So, onto making that backup copy…

cd ~/MagicMirror/config
cp config.js config.bak01

Increment the trailing number if you want to retain multiple backup copies. If you make a mistake and want to start over, copy the backup to overwrite the current version of config.js…

cp config.bak01 config.js

Now edit the config file…

nano config.js

To disable the default news reader, delete the following: (you may have additional feeds if you added anything).

{
			"module": "newsfeed",
			"position": "bottom_bar",
			"config": {
				"feeds": [
					{
						"title": "New York Times",
						"url": "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					},
				],
				"showSourceTitle": true,
				"showPublishDate": true
			}
		},

Now to add the new feed, add the following somewhere in the config (maybe where the old new feed was?) You can customize this by adding or removing news sources based upon what interests you.

{
	disabled: false,
	module: "MMM-NewsFeedTicker",
	position: "bottom_bar",
	//classes: "day_scheduler",
	config: {
	    feeds: [
		{
			title: "New York Times",
			url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml",
			encoding: "UTF-8", //ISO-8859-1
			className: "myClass",
			defaultLogo : ""
		},
		{
			title: "USA Today",
			url: "http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories",
			encoding: "UTF-8", //ISO-8859-1
			className: "myClass",
			defaultLogo : ""
		},
		{
			title: "BBC World News",
			url: "http://feeds.bbci.co.uk/news/world/rss.xml#",
			encoding: "UTF-8", //ISO-8859-1
			className: "myClass",
			defaultLogo : ""
		}
    	    ]
	},

Now you can reload the MagicMirror via Ctrl-R (I find that the system automatically reloads the module once it detects a changed config.js). You should see the new news feed at the bottom.