Embed Tumblr BBCode

[dougiefresh]

Link to Mod

EMBED TUMBLR BBCODE v2.10
By Dougiefresh -> Link to Mod

Introduction
This modification adds a BBCode to view Tumblr post.

The BBCode takes these forms:

Code Select Expand


[tumblr]{tumblr URL}[/tumblr]
[tumblr width=x]{tumblr URL}[/tumblr]

where {tumblr URL} is the Tumblr URL that you want to pull the Tumblr post from.

Admin Settings
There are no admin settings to this mod.  To disable, you must uninstall this mod.

Compatibility Notes
This mod was tested on SMF 2.0.10, but should work on SMF 2.1 Beta 1, as well as SMF 2.0 and up.  SMF 1.x is not and will not be supported.

Changelog
The changelog can be viewed at XPtsp.com.

License
Copyright (c) 2015 - 2018, Douglas Orend
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

[Ninja ZX-10RR]

Can't get it to work at all :/

1024: Undefined XML element: regular-body from /Sources/Subs-BBCode-Tumblr.php on line 90

[dougiefresh]

I need a link for testing, please!

[Ninja ZX-10RR]

Not sure what I can give you, I tested it in my live forum directly, didn't try on my test one(s) (yet).

EDIT: installed on my 2nd test site, same issue. PMing access.

[dougiefresh]

Uploaded v2.0 - August 25th, 2015
o Rewrote mod so that JavaScript is used to display the Tumblr posts and images.

[Ninja ZX-10RR]

Thanks! It seems to have done the trick, even if I dislike javascript xD

[Ninja ZX-10RR]

Trying to fix it on mobile, since it adds a scrollbar and breaks the layout on hover :/

I'd add these to css: (the left grey block/padding is useless and annoying, moreover it helps in breaking the layout so I'd kill it in the first place)

Code Select Expand

.border-blockquote .card .bd
{ border-left: none !important; overflow: visible !important; padding-left: 0 !important; }
@media (max-width: 450px)
{ .border-blockquote .card .bd { padding-left: 0 !important; }
.card .provider, .card .provider .author, .card.product .ftr .ftr-title
{ font-size: 0.5em !important}} /*fixes enormous text breaking the template, could adjust the value even more*/
.card .hdr { max-width: 100% !important; } /*should keep the header cool*/

However it doesn't fix it yet, I nearly fixed it entirely in local, but it's a huge PITA, let me see if I can type all the danged steps down. I wonder who is the monkey who coded those embed properties, never seen such a mess @_@
EDIT: hell yeah, I fixed it in local. Give me some time though, got an headache to fix this

[Ninja ZX-10RR]

Got it, that was a little bit of a nightmare

Code Select Expand


/*Sharing block layout fixes*/
.border-blockquote .card .bd
{ border-left: none !important; overflow: visible !important; padding-left: 0 !important; } /*kill that padding and that useless gray border*/
@media (max-width: 450px)
{ .border-blockquote .card .bd { padding-left: 0 !important; } /*kill that padding*/
.card .provider, .card .provider .author, .card.product .ftr .ftr-title
{ font-size: 0.5em !important} /*fixes enormous text breaking the template, could adjust the value even more*/
.embdscl0 { opacity: 1 !important;}} /*mobile phones don't have a pointer, so it should always display no matter what*/
.card .hdr { max-width: 100% !important; } /*should keep the header cool*/
.embdscl0 { position: relative !important; display: none !important; max-width: 100% !important; width: inherit !important; } /*this fixes the cursed sharing code*/
.embdscl0.embd-active { display: inline-block !important; padding-top: 20px !important; } /*and this prevents an ugly floating effect while hovering, plus places it inline and not as if it was an ugly list*/

Do note everything is important to override external Tumblr files Responsiveness is ok as well. Let me know if I got something wrong, because I used my live forum page to edit all of these, to test responsiveness.

[dougiefresh]

@Ninja ZX-10RR: I've got auto-embed capability written into the mod, as well as your CSS modifications (reformatted for appearance).  However, when I hover over a Tumblr link, the Facebook, Twitter, Pinterest and other links appear below the image/post/whatever....  I'm attaching the unpublished v2.1 for you to modify if you can figure that one out....

[Ninja ZX-10RR]

Did that on purpose as there is no easy way to do it the original way, making it responsive, because the toggle on hover thingy loves to screw up the max-width, since the block group is not a child of the major block :/ Gonna have a look and see if I can move it on the side but I highly doubt it, the only way I could find to make it position-fixed on all devices was move it there and still keep the hover effect.

EDIT: LOL there is an error on install because you (mis)typed and claimed BBCode-Instagram.css was going to extract instead of BBCode-Tumblr.css I fixed that myself since it's just an xml thing, but there are 2 major issues with the update. The first is on your side somehow, and basically there are a LOT of problems while saving a previously posted embedded thing as it always claims the body message was left empty O.o And the 2nd one is a major incompatibility with your other Instagram mod css-wise. Looking into it. Nope, the second is something got screwed in the last update of the Instagram one as well, it's unrelated to this one (posting there about it).

EDIT2: Pretty sure there is still something wrong as part of the css is not working anyway, and my browser claims my server answers with 404 to requests of Instagram.css, but I can't figure out why.

[dougiefresh]

I've fixed the package-info.xml, as well as the "empty message" error you got in the posting screen....

Regarding the css error, the SMF package manager probably deleted the BBCode-Instagram.css file because it wasn't in the Embed Tumblr BBCode mod and the instructions were to copy it over.  Package Manager failed to do so, and the end result is a deletion of the file.  To fix the Instagram mod, you'll have to copy over the BBCode-Instagram.css file from that mod into the Themes/default/css folder.

I've attached the new copy of the unpublished v2.1 mod...

[Ninja ZX-10RR]

Well, I have absolutely no idea on what is going on, because things seem to *ignore* my css properties entirely, but they totally work if I use them in inspect element I'm at a loss right now, gonna have a look at it later, maybe some sleep will give me ideas.

[Ninja ZX-10RR]

I figured out at least what causes the problem, it's this blasted file: http://cdn.embedly.com/widgets/platform.js for some reason it overrides any css properties whatsoever even if you use the important tag. The only solution is to edit the file, save it on each forum installation in a customized way, excluding the specific css file (if possible at all). This, however, means more files on the server and that the file is not updated automatically if they ever change it on their end. Can this be fixed? No :/
I'll have a look at that pile of crap that they call "javascript file" and see what I can do, but I hate javascript.

EDIT: What I have found is that the file calls maaaaany other js files, and in one of them there is surely a call to the css one. Figuring out which one, and where, is like looking for a little rabbit in a 10 miles forest.

[dougiefresh]

Ugh....  While Embedly looks good within posts and requires little code, it appears to be problematic for responsive themes....  Let me look into a different way to show the Tumblr posts/videos/etc....

[Ninja ZX-10RR]

It definitely is, because those js are walls-of-code, in the most literal way, and it's incredibly hard to understand which one is the evil calling that overriding css :/ Also, still no idea why it overrides the css, given that the important tags should always be given priority (except of inline important style).
Have a look if you can find another way and I'll be glad to help with responsive and/or css editing/testing

[dougiefresh]

Uploaded v2.1 - August 27th, 2015
o Fixed issue where BBCodes list was completely empty because of mod... (shrug)
o Added ability to auto-embed Tumblr URLs to the mod.



@Everybody: Because of conflict/problem that Ninja ZX-10RR found between the javascript and the responsive css file, the responsive css hasn't been included in this version.  I will be looking for another javascript source to display the Tumblr stuff.....

[Ninja ZX-10RR]

Thanks dougie, there must be a way to force that thingy to work properly :/ I can easily code that css, but I can't do anything if that javascript is so arrogant to override it anyway

[JTVaughn]

So is this currently not working? I installed it but the tumblr post doesn't embed, just stays as a normal URL

[Ninja ZX-10RR]

If you bothered enough to fully read the topic you would have discovered that it works, but it can't be made responsive due to an arrogant javascript on Tumblr side, overriding my responsive code. As for the embed I didn't try last version but it should still work, if you use tumblr tags.

[JTVaughn]

No need to be rude mate, I have read the thread fully, but was unsure of the mod's current status. I installed it myself but embedding wasn't working at all (yes, with the tags used), so not really sure what's wrong with it. Not getting any errors in console.