Recent Tutorials
Who is online?
In total there are 7 users online :: 2 Registered, 0 Hidden and 5 Guests :: 1 Bot

Milouze14, smurfavr

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Post Cards

Page 4 of 4 Previous  1, 2, 3, 4

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 22 Apr 2016, 12:59

First topic message reminder :

What are post cards ? Post cards display a brief summary about a linked post, so you can get an idea of who wrote the message and what they said without actually quoting the post. The cards are created by posting the direct link to a message, so no bbcode is required.


Click to view demo

How does it work ?
It's incredibility easy ! Just copy the direct link to a post -- like the one below -- and paste it into your message. After you post or preview your message the link will automatically be converted into a post card ! No bbcode, no problem !

Direct post link :
Code:
http://demoactif.forumactif.com/t15-demo-post-cards?demo=post_cards#19

Result when posted :
http://demoactif.forumactif.com/t15-demo-post-cards?demo=post_cards#19

You can post the direct link to any post in your forum OR posts from other Forumotion forums, and the links will automatically be converted into post cards. Posts that are not visible however, will display a placeholder card. Wink


Installation

To install this plugin go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Title : Post Cards
Placement : In all the pages
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t515-post-cards#7069';

  var a = $('.postbody a'),
      version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';

  // error notifications
  if (version == 'badapple' || !window.JSON || !window.localStorage) {
    var errString = 'The plugin "fa_post_card" could not be executed because : ';

    if (version == 'badapple') errString += '\nYour forum version is not supported.';
    if (!window.JSON) errString += '\nJSON is not supported by your browser';
    if (!window.localStorage) errString += '\nThe Storage API is not supported by your browser.';

    window.console && console.error ? console.error(errString) : alert(errString);
    return;
  }

  window.fa_post_card = {
    summary_length : 160, // maximum character length for messages in post cards
        cache_time : 1*60*60*1000, // amount of time that cards are cached ( 1 hour )

    // language config
    lang : {
      error : {
          name : 'Error',
          title : 'POST NOT FOUND',
        summary : 'The post you tried to view could not be found or is not accesible to you.'
      },

        no_name : 'Anonymous',
      no_avatar : 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png',
        no_title : 'No Title Available',
      no_summary : 'No Summary Available',
      no_origin : 'No Origin Available',
        tooltip : 'Click to view the full post'
    },

          a : a, // anchor cache
      index : -1, // anchor index
      quota : a.length, // anchor cache total
    version : version, // forum version

    // selectors
    select : {
      content : ['.postbody > div', '.content > div', '.entry-content > div:first > div', '.post-entry > div:first', '.content > div'],
        title : ['.postdetails:has(.sprite-icon_miniposted)', '.topic-title', '.posthead a', '.postbody-head a', '.topic-title'],
        avatar : ['.poster-profile a img', '.postprofile dt img', '.user-basic-info img:first', '.postprofile dt img', '.postprofile .user-avatar img'],
      username : ['.name', '.postprofile dt > strong', '.username', '.postprofile dt > strong', '.postprofile .username']
    },

    // escape HTML tags
    sanitize : function(str) {
      if (str) {
        return str.replace(/<|>/gm, function(M) {
          switch (M) {
            case '<' :
              return '<';

            case '>' :
              return '>';
          }
        });
      } else {
        return '';
      }
    },

    // create the post card
    createCard : function(anchor, post, ver) {
      // variables for the card contents
      var o = {
        username : post ? $(fa_post_card.select.username[ver], post).text() : fa_post_card.lang.error.name,
          avatar : post ? $(fa_post_card.select.avatar[ver], post).attr('src') : fa_post_card.lang.no_avatar,
          title : post ? $(fa_post_card.select.title[ver], post).text() : fa_post_card.lang.error.title,
        summary : post ? $(fa_post_card.select.content[ver], post).text() : fa_post_card.lang.error.summary,
          origin : anchor.innerHTML
      },
      id = o.origin.replace(/.*?#(\d+)$/, '$1'),
      cards = localStorage.fa_post_cards ? JSON.parse(localStorage.fa_post_cards) : {},
      i;

      // escape HTML tags to reduce risk of XSS attacks
      for (i in o) {
        o[i] = fa_post_card.sanitize(o[i]);
      }

      anchor.className += ' fa_post_card';
      anchor.title = fa_post_card.lang.tooltip;

      // card structure
      anchor.innerHTML = '<div class="fa_card_inner">'+
        '<div class="fa_card_left">'+
          '<img class="fa_card_avatar" src="' + ( o.avatar ? o.avatar : fa_post_card.lang.no_avatar ) + '"/>'+
          '<div class="fa_card_username">' + ( o.username ? o.username : fa_post_card.lang.no_name ) + '</div>'+
        '</div>'+

        '<div class="fa_card_right">'+
          '<div class="fa_card_title"><h2>' + ( o.title ? o.title : fa_post_card.lang.no_title ) + '</h2></div>'+
          '<div class="fa_card_summary"><p>' + ( o.summary ? ( o.summary.length > fa_post_card.summary_length ? o.summary.slice(0, fa_post_card.summary_length) + '...' : o.summary ) : fa_post_card.lang.no_summary ) + '</p></div>'+
          '<div class="fa_card_origin">' + ( o.origin ? o.origin.replace(/http:\/\//, '') : fa_post_card.lang.no_origin ) + '</div>'+
        '</div>'+

        '<div class="fa_card_clear"></div>'+
      '</div>';

      // store the card data to the cards object
      if (!cards[anchor.host]) {
        cards[anchor.host] = {};
      }

      cards[anchor.host]['card' + id] = {
        data : anchor.innerHTML,
        expires : +new Date
      };

      localStorage.fa_post_cards = JSON.stringify(cards);
    },

    // get and turn the link into a card
    get : function() {
      var a = fa_post_card.a[++fa_post_card.index],
          cards = localStorage.fa_post_cards ? JSON.parse(localStorage.fa_post_cards) : {},
          reg = /#\d+$/, // match the post hash
          id,
          post;

      // make sure the anchor contains a hash in the href and html content
      if (a && reg.test(a.innerHTML) && reg.test(a.href)) {
        id = a.href.replace(/.*?#(\d+)$/, '$1'); // post id
        post = $('.post--' + id)[0]; // post selector

        // get the card data if it's cached
        if (cards[a.host] && cards[a.host]['card' + id] && cards[a.host]['card' + id].data && cards[a.host]['card' + id].expires > +new Date - fa_post_card.cache_time) {
          a.className += ' fa_post_card';
          a.title = fa_post_card.lang.tooltip;
          a.innerHTML = cards[a.host]['card' + id].data;
        } else {
          // if the post is present on the page we'll get it by the id
          if (post) {
            fa_post_card.createCard(a, post, fa_post_card.version);
          } else {
            // otherwise we need to get the post data via AJAX
            $.get(a.href.replace(reg, '') + '?change_version=prosilver', function(d) {
              var post = $('.post--' + id, d)[0];
              fa_post_card.createCard(a, post, new RegExp(window.location.host).test(a.href) ? fa_post_card.version : 1); // change the version to prosilver so it's possible to get external post cards
            }).error(function() {
              fa_post_card.createCard(a);
            });
          }
        }
      }

      // continue iterating through the anchor array until we've reached the quota
      if (fa_post_card.index < fa_post_card.quota) {
        fa_post_card.get();
      }
    }

  };

  fa_post_card.get(); // start iterating the anchors
});


document.write('<style type="text/css">a.fa_post_card{font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-decoration:none!important;color:#333!important;background:#FFF;border:1px solid #CCC;border-radius:10px;display:block;width:600px;max-width:100%;min-height:100px;overflow:hidden;position:relative;margin:3px 0}.fa_card_inner{margin-left:125px}.fa_card_left{text-align:center;background:#EEE;border-right:1px solid #CCC;position:absolute;top:0;left:0;bottom:0;width:125px}.fa_card_avatar{height:50px;width:50px;position:absolute;top:50%;left:50%;margin:-35px 0 0 -25px}.fa_card_username{font-size:12px;font-weight:700;position:absolute;top:50%;left:0;right:0;margin-top:20px}.fa_card_title h2{color:#333;font-size:14px;font-weight:700;border:none;margin:0}.fa_card_summary p{font-size:12px;margin:0}.fa_card_origin{color:#999}.fa_card_origin,.fa_card_summary p,.fa_card_title h2{padding:3px 10px}.fa_card_origin,.fa_card_title h2,.fa_card_username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa_card_clear{clear:both}</style>');

Save the script and the Post Cards plugin will be installed ! Try posting some direct post links and they will be converted into post cards. Wink

If you want to make any modifications to the script please see the next section. Smile


Modifications

Below are all the modifications you can make to this plugin.

1. Summary Length
Near the top of the script after the error handling is a property named
Code:
summary_length
this property controls the max number of characters allowed in the summaries. By default it is set to 160 characters. Change this value if you want to make the summaries longer or shorter. Wink
Code:
summary_length : 160, // maximum character length for messages in post cards



2. Cache Time
As most cards are retrieved by sending a request to the server, the data needs to be cached to reduce the frequency of these requests. Under the summary_length property you'll see another property named
Code:
cache_time
. By default, the post cards are cached for 1 hour. Change this value if you want the cache time to be longer or shorter.
Code:
cache_time : 1*60*60*1000, // amount of time that cards are cached ( 1 hour )


3. Language
Under the cache time property is a language object -- named
Code:
lang
-- for translations or textual changes. Feel free to change the texts in this object to whatever you want.
Code:
    lang : {
      error : {
          name : 'Error',
          title : 'POST NOT FOUND',
        summary : 'The post you tried to view could not be found or is not accesible to you.'
      },

        no_name : 'Anonymous',
      no_avatar : 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png',
        no_title : 'No Title Available',
      no_summary : 'No Summary Available',
      no_origin : 'No Origin Available',
        tooltip : 'Click to view the full post'
    },


4. The Theme
Lastly is the post card theme. If you want to make edits to the theme find the stylesheet at the bottom of the script :
Code:
document.write('<style type="text/css">a.fa_post_card{font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-decoration:none!important;color:#333!important;background:#FFF;border:1px solid #CCC;border-radius:10px;display:block;width:600px;max-width:100%;min-height:100px;overflow:hidden;position:relative;margin:3px 0}.fa_card_inner{margin-left:125px}.fa_card_left{text-align:center;background:#EEE;border-right:1px solid #CCC;position:absolute;top:0;left:0;bottom:0;width:125px}.fa_card_avatar{height:50px;width:50px;position:absolute;top:50%;left:50%;margin:-35px 0 0 -25px}.fa_card_username{font-size:12px;font-weight:700;position:absolute;top:50%;left:0;right:0;margin-top:20px}.fa_card_title h2{color:#333;font-size:14px;font-weight:700;border:none;margin:0}.fa_card_summary p{font-size:12px;margin:0}.fa_card_origin{color:#999}.fa_card_origin,.fa_card_summary p,.fa_card_title h2{padding:3px 10px}.fa_card_origin,.fa_card_title h2,.fa_card_username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa_card_clear{clear:both}</style>');

You can change the colors, fonts, etc.. here. However, if you have a dark forum and need a dark theme for the post cards, replace the stylesheet above with the one below : (preview)
Code:
document.write('<style type="text/css">a.fa_post_card{font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-decoration:none!important;color:#CCC!important;background:#111;border:1px solid #333;border-radius:10px;display:block;width:600px;max-width:100%;min-height:100px;overflow:hidden;position:relative;margin:3px 0}.fa_card_inner{margin-left:125px}.fa_card_left{text-align:center;background:#222;border-right:1px solid #333;position:absolute;top:0;left:0;bottom:0;width:125px}.fa_card_avatar{height:50px;width:50px;position:absolute;top:50%;left:50%;margin:-35px 0 0 -25px}.fa_card_username{font-size:12px;font-weight:700;position:absolute;top:50%;left:0;right:0;margin-top:20px}.fa_card_title h2{color:#CCC;font-size:14px;font-weight:700;border:none;margin:0}.fa_card_summary p{font-size:12px;margin:0}.fa_card_origin{color:#666}.fa_card_origin,.fa_card_summary p,.fa_card_title h2{padding:3px 10px}.fa_card_origin,.fa_card_title h2,.fa_card_username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa_card_clear{clear:both}</style>');


These are all the modifications that can be made. If you have any questions, comments, or find a bug feel free to leave a reply below. Enjoy ! Coffee


Notice
Tutorial written by Ange Tuteur.
Special thanks to the Beta Testers for testing this plugin.
Reproduction not permitted without consent from the author.


Last edited by Ange Tuteur on Thu 01 Sep 2016, 10:29; edited 5 times in total

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 15 Aug 2016, 17:15

@Michael_vx sorry for the late reply, I made a test with the template you gave me and it seemed to work okay :


If possible, could you provide me a topic on the forum that has links to other posts in it?
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1369
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 16 Aug 2016, 05:02

sure
here
http://miclap.logu2.com/t9-topic
and no need to aplogize
i know your busy coding or life things Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 16 Aug 2016, 10:31

@Michael_vx thanks ! Smile

Sorry to be nitpicky, but the links for topics need to be a direct link to the post, like this :
Code:
http://miclap.logu2.com/t9-topic#33
http://miclap.logu2.com/t9-topic#34
http://miclap.logu2.com/t9-topic#35
http://miclap.logu2.com/t9-topic#36

So that they can be parsed like this :
http://miclap.logu2.com/t9-topic#33
http://miclap.logu2.com/t9-topic#34
http://miclap.logu2.com/t9-topic#35
http://miclap.logu2.com/t9-topic#36
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1369
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 16 Aug 2016, 12:40

seems to be working with that way
but is it possible to work with links out of the forum
for Example something that replace the link with a title of the site
like
http://fmdesign.forumotion.com
will be replaced to
FM Design
with any link same as the post cards way
im not sure if this idea is hard to make or not but i think this can be a nice Script that can beat the VB boards Very Happy
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 16 Aug 2016, 12:47

@Michael_vx so basically when you post a link to a certain page it'll display the title as the link, correct ? For example :

http://fmdesign.forumotion.com/t515p75-post-cards ---> Post Cards - Page 4
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1369
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 16 Aug 2016, 12:49

yeah this can be good also
Smile
if possible too
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 16 Aug 2016, 12:54

Yeah it's possible, I'd just need to reprogram the script or create a new one that's similar. Just gotta make sure the href is equal to the text content so we don't overwrite named links. Wink
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1369
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 16 Aug 2016, 13:13

sure
take the time you need
i might get off now so i hope you Enjoy and give me the good news
i think you already know that im doing this for others who use forumotion forums not me cus im not using forumotion
Very Happy
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2170
Points : 4065
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 01 Sep 2016, 01:03

If the title of the topic is changed after you have posted a post card, does this cause an error?

I posted post cards in this topic:  http://fmdesign.forumotion.com/t96p50-fm-themes#20434
Then I edited the titles today.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 01 Sep 2016, 10:25

@SLGray no it shouldn't, I think it might be because the script isn't optimized for Forumactif Edge. Try replacing your script with this :
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/';

  var a = $('.postbody a'),
      version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';

  // error notifications
  if (version == 'badapple' || !window.JSON || !window.localStorage) {
    var errString = 'The plugin "fa_post_card" could not be executed because : ';

    if (version == 'badapple') errString += '\nYour forum version is not supported.';
    if (!window.JSON) errString += '\nJSON is not supported by your browser';
    if (!window.localStorage) errString += '\nThe Storage API is not supported by your browser.';

    window.console && console.error ? console.error(errString) : alert(errString);
    return;
  }

  window.fa_post_card = {
    summary_length : 160, // maximum character length for messages in post cards
        cache_time : 1*60*60*1000, // amount of time that cards are cached ( 1 hour )

    // language config
    lang : {
      error : {
          name : 'Error',
          title : 'POST NOT FOUND',
        summary : 'The post you tried to view could not be found or is not accesible to you.'
      },

        no_name : 'Anonymous',
      no_avatar : 'http://illiweb.com/fa/invision/pp-blank-thumb-38px.png',
        no_title : 'No Title Available',
      no_summary : 'No Summary Available',
      no_origin : 'No Origin Available',
        tooltip : 'Click to view the full post'
    },

          a : a, // anchor cache
      index : -1, // anchor index
      quota : a.length, // anchor cache total
    version : version, // forum version

    // selectors
    select : {
      content : ['.postbody > div', '.content > div', '.entry-content > div:first > div', '.post-entry > div:first', '.content > div'],
        title : ['.postdetails:has(.sprite-icon_miniposted)', '.topic-title', '.posthead a', '.postbody-head a', '.topic-title'],
        avatar : ['.poster-profile a img', '.postprofile dt img', '.user-basic-info img:first', '.postprofile dt img', '.postprofile .user-avatar img'],
      username : ['.name', '.postprofile dt > strong', '.username', '.postprofile dt > strong', '.postprofile .username']
    },

    // escape HTML tags
    sanitize : function(str) {
      if (str) {
        return str.replace(/<|>/gm, function(M) {
          switch (M) {
            case '<' :
              return '&lt;';

            case '>' :
              return '&gt;';
          }
        });
      } else {
        return '';
      }
    },

    // create the post card
    createCard : function(anchor, post, ver) {
      // variables for the card contents
      var o = {
        username : post ? $(fa_post_card.select.username[ver], post).text() : fa_post_card.lang.error.name,
          avatar : post ? $(fa_post_card.select.avatar[ver], post).attr('src') : fa_post_card.lang.no_avatar,
          title : post ? $(fa_post_card.select.title[ver], post).text() : fa_post_card.lang.error.title,
        summary : post ? $(fa_post_card.select.content[ver], post).text() : fa_post_card.lang.error.summary,
          origin : anchor.innerHTML
      },
      id = o.origin.replace(/.*?#(\d+)$/, '$1'),
      cards = localStorage.fa_post_cards ? JSON.parse(localStorage.fa_post_cards) : {},
      i;

      // escape HTML tags to reduce risk of XSS attacks
      for (i in o) {
        o[i] = fa_post_card.sanitize(o[i]);
      }

      anchor.className += ' fa_post_card';
      anchor.title = fa_post_card.lang.tooltip;

      // card structure
      anchor.innerHTML = '<div class="fa_card_inner">'+
        '<div class="fa_card_left">'+
          '<img class="fa_card_avatar" src="' + ( o.avatar ? o.avatar : fa_post_card.lang.no_avatar ) + '"/>'+
          '<div class="fa_card_username">' + ( o.username ? o.username : fa_post_card.lang.no_name ) + '</div>'+
        '</div>'+

        '<div class="fa_card_right">'+
          '<div class="fa_card_title"><h2>' + ( o.title ? o.title : fa_post_card.lang.no_title ) + '</h2></div>'+
          '<div class="fa_card_summary"><p>' + ( o.summary ? ( o.summary.length > fa_post_card.summary_length ? o.summary.slice(0, fa_post_card.summary_length) + '...' : o.summary ) : fa_post_card.lang.no_summary ) + '</p></div>'+
          '<div class="fa_card_origin">' + ( o.origin ? o.origin.replace(/http:\/\//, '') : fa_post_card.lang.no_origin ) + '</div>'+
        '</div>'+

        '<div class="fa_card_clear"></div>'+
      '</div>';

      // store the card data to the cards object
      if (!cards[anchor.host]) {
        cards[anchor.host] = {};
      }

      cards[anchor.host]['card' + id] = {
        data : anchor.innerHTML,
        expires : +new Date
      };

      localStorage.fa_post_cards = JSON.stringify(cards);
    },

    // get and turn the link into a card
    get : function() {
      var a = fa_post_card.a[++fa_post_card.index],
          cards = localStorage.fa_post_cards ? JSON.parse(localStorage.fa_post_cards) : {},
          reg = /#\d+$/, // match the post hash
          id,
          post;

      // make sure the anchor contains a hash in the href and html content
      if (a && reg.test(a.innerHTML) && reg.test(a.href)) {
        id = a.href.replace(/.*?#(\d+)$/, '$1'); // post id
        post = $('.post--' + id)[0]; // post selector

        // get the card data if it's cached
        if (cards[a.host] && cards[a.host]['card' + id] && cards[a.host]['card' + id].data && cards[a.host]['card' + id].expires > +new Date - fa_post_card.cache_time) {
          a.className += ' fa_post_card';
          a.title = fa_post_card.lang.tooltip;
          a.innerHTML = cards[a.host]['card' + id].data;
        } else {
          // if the post is present on the page we'll get it by the id
          if (post) {
            fa_post_card.createCard(a, post, fa_post_card.version);
          } else {
            // otherwise we need to get the post data via AJAX
            $.get(a.href.replace(reg, '') + '?change_version=prosilver', function(d) {
              var post = $('.post--' + id, d)[0];
              fa_post_card.createCard(a, post, new RegExp(window.location.host).test(a.href) ? fa_post_card.version : 1); // change the version to prosilver so it's possible to get external post cards
            }).error(function() {
              fa_post_card.createCard(a);
            });
          }
        }
      }

      // continue iterating through the anchor array until we've reached the quota
      if (fa_post_card.index < fa_post_card.quota) {
        fa_post_card.get();
      }
    }

  };

  fa_post_card.get(); // start iterating the anchors
});


document.write('<style type="text/css">a.fa_post_card{font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-decoration:none!important;color:#333!important;background:#FFF;border:1px solid #CCC;border-radius:10px;display:block;width:600px;max-width:100%;min-height:100px;overflow:hidden;position:relative;margin:3px 0}.fa_card_inner{margin-left:125px}.fa_card_left{text-align:center;background:#EEE;border-right:1px solid #CCC;position:absolute;top:0;left:0;bottom:0;width:125px}.fa_card_avatar{height:50px;width:50px;position:absolute;top:50%;left:50%;margin:-35px 0 0 -25px}.fa_card_username{font-size:12px;font-weight:700;position:absolute;top:50%;left:0;right:0;margin-top:20px}.fa_card_title h2{color:#333;font-size:14px;font-weight:700;border:none;margin:0}.fa_card_summary p{font-size:12px;margin:0}.fa_card_origin{color:#999}.fa_card_origin,.fa_card_summary p,.fa_card_title h2{padding:3px 10px}.fa_card_origin,.fa_card_title h2,.fa_card_username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa_card_clear{clear:both}</style>');
Might need to clear your cache after. I'll add the updated script to the first post. Wink
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2170
Points : 4065
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 01 Sep 2016, 16:10

Thanks @Ange Tuteur .
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1369
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Fri 02 Sep 2016, 03:11

Embarassed
im not sure if i have the rights to ask
but how is the progress about the question
http://fmdesign.forumotion.com/t515p75-post-cards#18381
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 02 Sep 2016, 10:30

@Michael_vx sorry I almost forgot. Shocked

You can do something like this :
Code:
function iterate_links(array, fn) {
  var next = function() {
    that = array[++i];

    if (that) {
      fn(that, next);
    }
  },

  i = -1,
  that;

  next();
};


// iterate all the postbody links
iterate_links($('.postbody a'), function(that, next) {
  if (that.href == that.innerHTML) {
    $.get(that.href, function(d) {
      that.innerHTML = d.match(/<title>(.*?)<\/title/i)[1];
      next();
    });

  } else {
    next();
  }
});
But it'll be a little heavy.

It'll change links like this :
Code:
http://fmdesign.forumotion.com/t515p75-post-cards
http://fmdesign.forumotion.com/t515-post-cards

into what their page title is :
Code:
Post Cards - Page 4
Post Cards
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1369
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sat 03 Sep 2016, 13:48

ok
ill see if i can do it Smile
thanks
beside we are humans i dont think we will be humans if we never forget things only robots dose not forget things
Jazeon

Title :
アビスウォーカー
Gender : Unspecified
Posts : 101
Points : 456
Reputation : 26
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://foruminion.forumotion.com/

PostJazeon on Mon 05 Sep 2016, 02:54

This would've been amazing also if it was actually a quote custom.
Paradiseng

Title :
Gender : Male
Posts : 95
Points : 1177
Reputation : 17
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Wed 16 Nov 2016, 14:47

Please, i want ask, is it posibble if i could have a code of Post Card that will work beyond forumotion forums. That code that will convert url of any other website that is not forumotion into a post card?
Samantha NL

Title :
CSS Admirer & Gamma Chi
Gender : Female
Age : 28
Posts : 163
Points : 382
Reputation : 19
Location : Hoofddorp, The Netherlands & Greater La La Land
Language : Dutch, US English, a bit of German and UAL (Universal Alien Language)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.friendcodes.nl

PostSamantha NL on Thu 17 Nov 2016, 03:36

@Paradiseng wrote:Please, i want ask, is it posibble if i could have a code of Post Card that will work beyond forumotion forums. That code that will convert url of any other website that is not forumotion into a post card?

I think your request is impossible to create. To get that automated the script would have to know each and every site's selector etc. Like, how would the script able to differentiate between titles, texts and ads for instance?. However, one could create a template that uses the same kind of style. I imagine a script that allows the user to insert a title, the first 160 characters of the article and the URL to the article (opens when clicked in a new tab) and the hover-over code saying 'Click to view more ...' or something like that to make it look more or less the same. I believe it's even possible to add that kind of template / form to one's sceditor ...

--------


Lovely




Satisfy




World
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4088
Points : 8387
Reputation : 2008
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 17 Nov 2016, 10:08

@Paradiseng wrote:Please, i want ask, is it posibble if i could have a code of Post Card that will work beyond forumotion forums. That code that will convert url of any other website that is not forumotion into a post card?
It's possible -- take the twitter website cards for example, which this plugin was inspired by -- perhaps I may think about making something for it in the future.
Paradiseng

Title :
Gender : Male
Posts : 95
Points : 1177
Reputation : 17
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.nigerianpalace.com

PostParadiseng on Sun 20 Nov 2016, 09:47

@Ange Tuteur wrote:
@Paradiseng wrote:Please, i want ask, is it posibble if i could have a code of Post Card that will work beyond forumotion forums. That code that will convert url of any other website that is not forumotion into a post card?
It's possible -- take the twitter website cards for example, which this plugin was inspired by -- perhaps I may think about making something for it in the future.
Alright, That @Ange Tuteur I am looking forward to having something like that Very Happy
Samantha NL

Title :
CSS Admirer & Gamma Chi
Gender : Female
Age : 28
Posts : 163
Points : 382
Reputation : 19
Location : Hoofddorp, The Netherlands & Greater La La Land
Language : Dutch, US English, a bit of German and UAL (Universal Alien Language)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.friendcodes.nl

PostSamantha NL on Mon 28 Nov 2016, 04:23

We're definitely gonna need the external links option for the postcards now, to link back to official articles created by the council and published articles on other sites that concern the community and give members the opportunity to react and leave a reply to them. I'm sure. If you could work something out for us, please do, @Ange Tuteur. It would be of great help to us. TY! Wink

--------


Lovely




Satisfy




World

Page 4 of 4 Previous  1, 2, 3, 4

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum