Good Morning,
I am the owner of a Google+ Community, and with G+ going away in a few months, I am moving us over to an SMF forum which I have installed (SMF 2.0.15), configured, and customized, and we are now in limited beta testing to iron out any wrinkles/settings that I may have (probably) overlooked.
So far, the only comment I have received from one of my testers is that there is no "Embedded Link Preview" as is typical on G+ whenever a link is included in a post. I have looked/searched through the Mod Site here to see if anything popped out at me - I found a couple of really old mods, but nothing recent.
Does anyone have any suggestions? Is there possibly configuration setting to do this that I have not found yet? Although this is not a show stopper from MY perspective, it would be nice to implement the functionality on the forum if it is at all possible.
Thanks in advance!
Nancy
There is no configuration and the only mods that exist for this are currently really for embedding videos and audio from specific sites. I don't believe anyone has a general solution for this for SMF.
Quote from: Arantor on January 10, 2019, 11:40:34 AM
There is no configuration and the only mods that exist for this are currently really for embedding videos and audio from specific sites. I don't believe anyone has a general solution for this for SMF.
Thanks for the prompt response :D
Maybe someone will develop something down the road, but for now, I won't go crazy trying to find a solution!
Have a great day!
Nancy
Thus may be something like what you are looking for
https://custom.simplemachines.org/mods/index.php?mod=783
it's for 1.1.2, but should install just fine on 2.0.x by using the "emulate" function.
this one COULD work.... but would probably need some minor modification to install/work correctly on 2.0.x
https://custom.simplemachines.org/mods/index.php?mod=1040
This one will install on 2.0.x, but may not do what you're asking
https://github.com/Spuds/SMF-Descriptive-Links
The first two rely on external services to generate snapshots, which may not be available any more.
true. I did not check to see if the external service worked... just checked if the code could be usable in 2.0.x
Quote from: Kindred on January 11, 2019, 03:34:44 AM
Thus may be something like what you are looking for
https://custom.simplemachines.org/mods/index.php?mod=783
it's for 1.1.2, but should install just fine on 2.0.x by using the "emulate" function.
this one COULD work.... but would probably need some minor modification to install/work correctly on 2.0.x
https://custom.simplemachines.org/mods/index.php?mod=1040
This one will install on 2.0.x, but may not do what you're asking
https://github.com/Spuds/SMF-Descriptive-Links
Thanks! The first two you mention are the ones I was able to find. I have a suspicion that they are no longer supported based on the fact that the two "support" websites yield
This site can't be reached errors so I crossed them off my list.
The mod in GitHub may be promising - will explore that one a bit more when I am home and not at work to see what it does. It may not be exactly what I asked for, but it may be a decent alternative.
Thanks again!
Nancy
with rawgit shutting down this would have to be locallized, but...
https://codepen.io/shaneapen/pen/bdrGRO
where there is a will........ I guess?
I've got to clean it up- mostly CSS, but I want to have the 'pop up' to open where it has the most room, not just under the link... I'd also like to have it pop-up where the pointer is instead of mid-link...
also, i broke the word-wrap in the .forumpost and/or .post and .inner... I'll have to address that too...
I don't like that it also recognizes the quote author's link... I'll have to strip that out... there is no sense in seeing your own page in a preview, right?.... i'm amazed at the number of pages that refuse connection for this, but to make that comment even more absurd: I had to unblock my own page (thanks vbgamer!!!) I should fix it to ignore pages that refuse...
..... gotta lotta work to do on it, and i'll get to it over the next few days or so...
You know why they don't allow it? It's inherently a security risk. Unblocking your site makes your site less secure.
I realize that, Sir... I should make it more clear when i'm being stupid. One my forum, people use a blue font when they're being goofy, and i should practice some form of that instead of expecting people to figure it out for themselves.... all that said, if this was something i thought i'd stick with I
would script in a qualification to ignore pages that are locked down.
at any rate.
here are the issues with this:
- even using the prefetch:none call, once a link is brought in using this function the padlock will break if that page isn't secure.
in it's present form, the script doesn't ignore links to the same page
the script needs to be refined so as not to render page 'jerky'.
here it is, though:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- MiniPreview stuff here, add to index.template 'under the fold' -->
<link href="./jquery.minipreview.css" rel="stylesheet">
<script src="./jquery.minipreview.js"></script>
<script type="text/javascript"> $(function() { $('.hubber a').miniPreview({ prefetch: 'none' });
});
</script>
<!-- end of the index.template add -->
/*
* copy and past this in a new file
* call it ~whatever~...
* then use a php 'include' to call it in your index.template 'below the fold'
* using the script above
* do it how you will, but:
* I found making a new .div after .post and before .inner gave better ability
* to manage the function, and used the name of that .div as the function call
* and the only place the hover function works...
* I called that .div "hubber"
* call it whatever, too, but change the .div (hubber) name in the script above
* if you do.
* also, give thanks to Will Boyd who wrote this
*
* MiniPreview v0.9
* @author Will Boyd
* Shared by Codegena
*/
(function($) {
var PREFIX = 'mini-preview';
// implemented as a jQuery plugin
$.fn.miniPreview = function(options) {
return this.each(function() {
var $this = $(this);
var miniPreview = $this.data(PREFIX);
if (miniPreview) {
miniPreview.destroy();
}
miniPreview = new MiniPreview($this, options);
miniPreview.generate();
$this.data(PREFIX, miniPreview);
});
};
var MiniPreview = function($el, options) {
this.$el = $el;
this.$el.addClass(PREFIX + '-anchor');
this.options = $.extend({}, this.defaultOptions, options);
this.counter = MiniPreview.prototype.sharedCounter++;
};
MiniPreview.prototype = {
sharedCounter: 0,
defaultOptions: {
width: 256,
height: 144,
scale: .25,
prefetch: 'pageload'
},
generate: function() {
this.createElements();
this.setPrefetch();
},
createElements: function() {
var $wrapper = $('<div>', { class: PREFIX + '-wrapper' });
var $loading = $('<div>', { class: PREFIX + '-loading' });
var $frame = $('<iframe>', { class: PREFIX + '-frame' });
var $cover = $('<div>', { class: PREFIX + '-cover' });
$wrapper.appendTo(this.$el).append($loading, $frame, $cover);
// sizing
$wrapper.css({
width: this.options.width + 'px',
height: this.options.height + 'px'
});
// scaling
var inversePercent = 100 / this.options.scale;
$frame.css({
width: inversePercent + '%',
height: inversePercent + '%',
transform: 'scale(' + this.options.scale + ')'
});
// positioning
var fontSize = parseInt(this.$el.css('font-size').replace('px', ''), 10)
var top = (this.$el.height() + fontSize) / 2;
var left = (this.$el.width() - $wrapper.outerWidth()) / 2;
$wrapper.css({
top: top + 'px',
left: left + 'px'
});
},
setPrefetch: function() {
switch (this.options.prefetch) {
case 'pageload':
this.loadPreview();
break;
case 'parenthover':
this.$el.parent().one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
case 'none':
this.$el.one(this.getNamespacedEvent('mouseenter'),
this.loadPreview.bind(this));
break;
default:
throw 'Prefetch setting not recognized: ' + this.options.prefetch;
break;
}
},
loadPreview: function() {
this.$el.find('.' + PREFIX + '-frame')
.attr('src', this.$el.attr('href'))
.on('load', function() {
// some sites don't set their background color
$(this).css('background-color', '#fff');
});
},
getNamespacedEvent: function(event) {
return event + '.' + PREFIX + '_' + this.counter;
},
destroy: function() {
this.$el.removeClass(PREFIX + '-anchor');
this.$el.parent().off(this.getNamespacedEvent('mouseenter'));
this.$el.off(this.getNamespacedEvent('mouseenter'));
this.$el.find('.' + PREFIX + '-wrapper').remove();
}
};
})(jQuery);and the css:
.mini-preview-anchor {
display: inline-block;
position: relative;
white-space: nowrap;
}
.mini-preview-wrapper {
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
overflow: hidden;
z-index: -1;
opacity: 0;
margin-top: -4px;
border: solid 1px #000;
box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
transition: z-index steps(1) .3s, opacity .3s, margin-top .3s;
}
.mini-preview-anchor:hover .mini-preview-wrapper {
z-index: 2;
opacity: 1;
margin-top: 6px;
transition: opacity .3s, margin-top .3s;
}
.mini-preview-loading, .mini-preview-cover {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.mini-preview-loading {
display: table;
height: 100%;
width: 100%;
font-size: 1.25rem;
text-align: center;
color: #f5ead4;
background-color: #59513f;
}
.mini-preview-loading::before {
content: 'Loading...';
display: table-cell;
text-align: center;
vertical-align: middle;
}
.mini-preview-cover {
background-color: rgba(0, 0, 0, 0); /* IE fix */
}
.mini-preview-frame {
border: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
} that should be enough to get the OP off and running. Some tweaking by someone who wants to use it, and it'll work out well.
Does anyone have any experience with the Open Embed (http://custom.simplemachines.org/mods/index.php?mod=4075) mod?
http://custom.simplemachines.org/mods/index.php?mod=4075 (http://custom.simplemachines.org/mods/index.php?mod=4075)
It was last updated in August, 2016 - and the link to a list of live examples is no longer active. It is compatible through 2.0.11... I have 2.0.15 installed - suspect it would work, but also wouldn't be surprised if it didn't.
After reviewing the information/description on the page for the mod, the implementation of the "preview" image appears to be by brute force (i.e., manually inserting the [embed]...[/embed] tags around the URL to be previewed,) but the description doesn't make it clear if they are actually inserted using a formatting button similar to the Insert Hyperlink button. If this is a purely manual process, I suspect it will be a bit more trouble than it is worth and our community won't be using it.
Thoughts?
Nancy