Change newsfeed title to image/logo?

[justjim1220]

I know, the scroll part wasn’t in the request, But, I couldn’t help myself… :smiling_face_with_sunglasses:

[cyberphox]

@justjim1220 well now i want it all!

[justjim1220]

Change this section of the newsfeed.js file (copy, paste, overwrite)…

and add a getStyles function to call the newsfeed.css…

Create a newsfeed.css file and put the following in it…

(I think I will post pics instead of code from now on!) :smiling_face_with_sunglasses: :smirking_face: :confused_face:

Enjoy!

[justjim1220]

You’ll have to find the logo for the news feed you are using (Google images)

save it to your newsfeed folder

change the part in the top code (USATodayLogo.jpg) to match your image

[justjim1220]

Now, to figure out how to do it for those who have more than 1 newsfeed!

[blueadam]

I tried to do all those changes to newsfeed.js and created newsfeed.css file but it seems like that I’m doing something wrong beacuse now my whole newsfeed segment disappeared from my MagicMirror :D I took couple of screenshots to show what are the changes that I did.

I replaced that part of the code that is shown in first picture with that one that is in the second picture.

newsfeed.css file is in the third picture and all of the files in the newsfeed folder are shown in the last picture.

Even if it is not working yet I really appreciate all your effort that you have been putting on this :thumbs_up_light_skin_tone:

[A Former User]

@blueadam

description.innerHTML = `<img src="/modules/default/newsfeed/hsLogo.png">` + ...

HTML entity escaping is not so good in this Forum BBS program
@justjim1220 might had typed ' but this BBS program had changed it to " automatically.
Anyway, you can use above code;

[A Former User]

@blueadam
I think this would be what @justjim1220 really typed;

[blueadam]

Yeah, with those changes newsfeed module came back but it still looks exactly the same that it was, so there isn’t that logo that I’m using

EDIT

showDescription was set to false and when I changed it to true all changes started to work but now I have another problem. Now there is the original headline and the new one so there are two headlines at the same time.

EDIT 2.0

Finally it works! I had to change the newsfeed.js code a little bit and had to change some true values to false from config.js. Also, I decided to move the module to bottom_left. After all changes the final result looks like this. I’m about to make second news module right below this one after this one.

[cyberphox]

@justjim1220 I was just about to say that! lol

[justjim1220]

@cyberphox @blueadam @Sean

I see that I didn’t notice the changes that the forums made when I copy/pasted the code.

Apologies!

I also missed a step: Need to add getStyles function to the newsfeed.js Pic for placement

And this is what I tried to post and the forums didn’t like it and cahnged it, This is what you need to get it to work:

I will fix this in my original post.

Again, Apologies!

[justjim1220]

here it is with the New York Times…

[cyberphox]

@justjim1220 figure out multiple feeds and logos yet? LOL

[justjim1220]

@cyberphox

Working on it!!! :smiling_face_with_sunglasses:

[justjim1220]

@cyberphox

Did you get your to work?

Apologies for the mistakes posted by forums.

[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!