twitrssme icon indicating copy to clipboard operation
twitrssme copied to clipboard

Emoji and image handling

Open rootless4real opened this issue 6 years ago • 1 comments

edits to show code as code and try to keep URLs from loading images

Presently, twitrssme treats emojis as the images they are and makes them the same size as other images it pulls in from a tweet, rather than keeping it small and in-line with the tweet text, hashtag (yes there are emojis in hashtags now). The emojis do have a class tag for the img:

<img class="Emoji Emoji--forText" src="https://abs.twimg.com/emoji/v2/72x72/27a1.png" draggable="false" alt="➡️" title="Rightwards arrow" aria-label="Emoji: Rightwards arrow">

Images are now being handled in:

<div class="AdaptiveMediaOuterContainer"> <div class="AdaptiveMedia"> <div class="AdaptiveMedia-container"> <div class="AdaptiveMedia-quadPhoto"> <divclass="AdaptiveMedia-threeQuartersWidthPhoto">

`

</div> <div class="AdaptiveMedia-thirdHeightPhoto"> <div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/Dn9MST5U4AE8o8r.jpg" data-element-context="platform_photo_card" style="background-color:rgba(38,28,17,1.0);" data-dominant-color="[38,28,17]"> <img data-aria-label-part="" src="https://pbs.twimg.com/media/Dn9MST5U4AE8o8r.jpg" alt="" style="height: 100%; left: -60px;"> </div>

</div> <div class="AdaptiveMedia-thirdHeightPhoto"> <div class="AdaptiveMedia-photoContainer js-adaptive-photo " data-image-url="https://pbs.twimg.com/media/Dn9MSTUUwAADlW6.jpg" data-element-context="platform_photo_card" style="background-color:rgba(40,33,23,1.0);" data-dominant-color="[40,33,23]"> <img data-aria-label-part="" src="https://pbs.twimg.com/media/Dn9MSTUUwAADlW6.jpg" alt="" style="height: 100%; left: -76px;"> </div>

</div> </div> </div>

</div> </div> `

'

Is there a way for the twitrssme script to properly handle the emojis and the images embedded in the "AdaptiveMedia" containers? - I should probably ask that as - does anyone know how to properly implement this in twitrssme without breaking things?

It would be awesome to carry-over the "AdatpiveMedia" containers, but I'm not sure how that would be accomplished without replicating the CSS from Twitter (why do that?!). So maybe just pulling the first "data-image-url=" or is it better to pull "<img data-aria-label-part="" src="

I would attempt this just for the fun of learning it, but I'm rightly concerned that I would break the entire thing just pulling the correct image. I'm not sure how to deal with the emojis (which are images), but have to be kept at a certain size to fit with the text.

I've included the xml from the twitrssme scrape that matches the twitter code above.
sample_twitrssme_xml_scrape.txt

(ed. I'm not a fan of the material. This impacts HispanicHeritageMonth hashtag and others too. Just seeing if it is something that someone has the know-how to fix.)

Thanks!

rootless4real avatar Sep 26 '18 18:09 rootless4real

I'm REALLY sorry for the lame pictures. I didn't realize that GitHub would pull from the URLs when I pasted the code in there.

rootless4real avatar Sep 26 '18 18:09 rootless4real