Change newsfeed title to image/logo?

[electros]

@blueadam can you tell me please how i can make to look like this ?
And please tell me, who know of course the picture logo must have a specific dimensions like no big then… ?

[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…??