Latest topics
» Quick Reply Bug
by MiyakeDev Today at 01:34

» Adding text to reputation counter
by Ange Tuteur Yesterday at 18:19

» Forumactif Edge Web Page - Translations
by Ange Tuteur Yesterday at 18:15

» Forumactif Edge - Portuguese Translation (Brazilian)
by Ange Tuteur Yesterday at 17:24

» Forumactif Edge - Spanish Translation
by Ange Tuteur Yesterday at 17:24

» How do I add hover examine feature?
by dr.kran Yesterday at 07:18

» [GAME] Count to One Million!
by MiyakeDev Wed 22 Mar 2017, 21:59

» [THEME] Cosmic Sleek RED v1.1 - Phpbb3
by King Tue 21 Mar 2017, 13:39

» Forumactif Edge - Translations
by Ange Tuteur Mon 20 Mar 2017, 21:03

» [GAME] Post a random picture
by Ange Tuteur Mon 20 Mar 2017, 20:18

» Forumactif Edge - Greek Translation
by Ange Tuteur Mon 20 Mar 2017, 20:16

» IconSkouliki
by skouliki Mon 20 Mar 2017, 16:47

» Personal Rank Titles
by Harleen Mon 20 Mar 2017, 13:38

» Forum Actif Edge Skin Suggestion for Improvements
by Ange Tuteur Sun 19 Mar 2017, 22:36

» Colors Tab
by Ange Tuteur Sun 19 Mar 2017, 22:12

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

Harleen

[ View the whole list ]


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

Post Cards

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

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 13: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, 11:29; edited 5 times in total

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 18: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?
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 298
Points : 1501
Reputation : 75
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, 06:02

sure
here
http://miclap.logu2.com/t9-topic
and no need to aplogize
i know your busy coding or life things Smile
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 11: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
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 298
Points : 1501
Reputation : 75
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: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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 13: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
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 298
Points : 1501
Reputation : 75
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:49

yeah this can be good also
Smile
if possible too
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 13: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
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 298
Points : 1501
Reputation : 75
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, 14: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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2277
Points : 4325
Reputation : 271
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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, 02: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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 11: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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2277
Points : 4325
Reputation : 271
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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, 17:10

Thanks @Ange Tuteur .
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 298
Points : 1501
Reputation : 75
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, 04: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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 11: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
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 298
Points : 1501
Reputation : 75
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, 14: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
avatar
Jazeon

Title :
ポジティブな精神的態度
Gender : Unspecified
Posts : 116
Points : 589
Reputation : 29
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, 03:54

This would've been amazing also if it was actually a quote custom.
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1293
Reputation : 19
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, 17: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?
avatar
Guest
Guest
View all awards

PostGuest on Thu 17 Nov 2016, 06: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 ...
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4382
Points : 9031
Reputation : 2186
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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, 13: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.
avatar
Paradiseng

Title :
Gender : Male
Posts : 98
Points : 1293
Reputation : 19
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, 12: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
avatar
Guest
Guest
View all awards

PostGuest on Mon 28 Nov 2016, 07: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
avatar
Guest
Guest
View all awards

PostGuest on Fri 23 Dec 2016, 12:50

bump
avatar
Guest
Guest
View all awards

PostGuest on Wed 04 Jan 2017, 14:38

Bump again ... Embarassed
avatar
Ape

Title :
Gender : Male
Posts : 122
Points : 1211
Reputation : 25
Language : English i think
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostApe on Sun 12 Mar 2017, 16:38

Not sure what is going on but i have just seen this bug on this system Sad
this thread https://www.achatworld.com/t1178p25-iconskouliki-graphics-requests#6559
it says the system could not Find the post but it's clear when you click on the link it's goes to the thread with no problem
as you can see it's saying a Error and its not one

can you help me fix this ?

Thank you.

APE
avatar
JerriLeah7
Administrator
Title :
Scorpion Queen
Gender : Female
Age : 27
Posts : 359
Points : 1010
Reputation : 196
Language : English, Sign Language
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.gatewaytoroleplay.com https://www.facebook.com/JerriLeah https://twitter.com/IceLeah

PostJerriLeah7 on Sun 12 Mar 2017, 22:28

@Ape wrote:Not sure what is going on but i have just seen this bug on this system Sad
this thread https://www.achatworld.com/t1178p25-iconskouliki-graphics-requests#6559
it says the system could not Find the post but it's clear when you click on the link it's goes to the thread with no problem
as you can see it's saying a Error and its not one

can you help me fix this ?

Thank you.

APE

I also experienced this on my forum. I thought it was just a "me" thing, but apparently it isn't. O-o
Thanks for reporting!
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Age : 27
Posts : 102
Points : 274
Reputation : 10
Location : Ohio, USA
Language : English (Native)
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Mon 13 Mar 2017, 04:14

Your posts should be readable by guests. If they are readable by members/groups only, they will display an error there in the post card. The Post Card is not able to "log in" to your forum, so it will display an error instead. However, because you have an account and are logged in, you will see the topic when you click on the link.

For your specific post card there, I clicked it, and it redirected me to the following URL:
Code:
https://www.achatworld.com/login?redirect=%2Ft1178-topic#6559

I'm sure Ange may confirm this, since he created the code, but that's how I analyzed the code, to which I'm sure it has to do with an init error. Because the post card would require some level of authentication to work "cross-site" or "cross-forum" - the error will likely not be resolvable. Smile

--------

~Dr Jay

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

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