Latest topics
» How To Install the Code Snippet Button
by SLGray Today at 20:56

» Select Button
by SLGray Today at 20:25

» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

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

None

[ View the whole list ]


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

Post Cards

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

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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

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
Guest
Guest
View all awards

PostGuest on Fri 22 Apr 2016, 13:20

I support this idea of yours, @Ange Tuteur , but I've got so little members on my site, it just would overdo it all. Perhaps if it steps up I'd consider installing it. Anyway, I love to see the time you're investing to keep us all happy and all. You're really good hearted and dedicated to what you do best! I love it. Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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, 15:46

Thanks. Smile

What do you mean by "if it steps up" ? All it does is get info on a message when you post a direct message link, so you get a preview of what's inside so to speak. Wink
Canhraungot
Member
Title : Anh nhớ em Gender : Female
Posts : 20
Points : 329
Reputation : 7
Language : Viet Nam
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCanhraungot on Sun 24 Apr 2016, 07:56

I want to take a picture in the article is displayed on the post card that possible? Very Happy

--------

Người ơi anh yêu em nhiều lắm!!!
jessy

Title :
Gender : Female
Posts : 101
Points : 444
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Sun 24 Apr 2016, 11:08

where you view categories,home?I put a post link?thank you Embarassed
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sun 24 Apr 2016, 11:17

@Canhraungot wrote:I want to take a picture in the article is displayed on the post card that possible? Very Happy
Yes, that's possible. Where inside the card would you want the image to display ?

@jessy wrote:where you view categories,home?I put a post link?thank you Embarassed
I'm sorry, I didn't comprehend.. confused
jessy

Title :
Gender : Female
Posts : 101
Points : 444
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Sun 24 Apr 2016, 11:30

sorry all right , I didn?t comprehended

url = com/t146-test#570 = yes

url = com/t8380-topic = no

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sun 24 Apr 2016, 11:56

Yes, the topic URL must link to a direct message. Direct message links always have a post id on the end of the URL. e.g. #7069

Good :
Code:
http://fmdesign.forumotion.com/t515-post-cards#7069
http://fmdesign.forumotion.com/t515-post-cards#7069

Bad :
Code:
http://fmdesign.forumotion.com/t515-post-cards
http://fmdesign.forumotion.com/t515-post-cards
Canhraungot
Member
Title : Anh nhớ em Gender : Female
Posts : 20
Points : 329
Reputation : 7
Language : Viet Nam
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCanhraungot on Sun 24 Apr 2016, 12:54

@Ange Tuteur wrote:
Yes, that's possible. Where inside the card would you want the image to display ?


I want to change places with images of red crossed in the post
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sun 24 Apr 2016, 14:44

Try replacing your JavaScript with this one :
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 : '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'],
        title : ['.postdetails:has(.sprite-icon_miniposted)', '.topic-title', '.posthead a', '.postbody-head a'],
        avatar : ['.postbody > div img:first', '.content > div img:first', '.entry-content > div:first > div img:first', '.post-entry > div:first img:first'],
      username : ['.name', '.postprofile dt > strong', '.username', '.postprofile dt > strong']
    },
 
    // 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, 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>');

And if you want the image to take up the whole left side, add this CSS to your stylesheet :
Code:
.fa_card_username { display:none !important; }
.fa_card_avatar {
  left:0 !important;
  top:0 !important;
  height:100% !important;
  width:100% !important;
  margin:0 !important;
}
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 20
Posts : 274
Points : 1561
Reputation : 85
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Mon 25 Apr 2016, 10:43

That.. is beyond amazing and creative!
SO GOOD KEEP IT UP.
Also I'd like to apologize for not being able to contribute anything while being in the beta group yet, sorry for little offtopic!
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 25 Apr 2016, 10:54

@Rhino.Freak wrote:That.. is beyond amazing and creative!
SO GOOD KEEP IT UP.
Also I'd like to apologize for not being able to contribute anything while being in the beta group yet, sorry for little offtopic!
Haha thanks ! To be honest, I got the idea for this from the twitter cards. I thought it'd be pretty cool for posts in the forum. Razz

Don't worry about. It's a voluntary group, so whenever you have time it's alright. Thumb left
fascicularia
New Member
Title :
Gender : Unspecified
Posts : 8
Points : 646
Reputation : 3
Language : french and english
Browser : Browser : Opera Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postfascicularia on Sat 30 Apr 2016, 11:06

Simply engineer. Thank you Ange Tuteur Shake
Lorem

Title :
Come from Vietnam
Gender : Male
Age : 18
Posts : 75
Points : 360
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem on Sun 08 May 2016, 08:38

It does not work on my forum
Pls help me @Ange Tuteur
My forum: http://www.forumgiaitri.net/forum
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sun 08 May 2016, 11:33

@Lorem your forum has modified templates, so the script need modifications. Try the following which has been modified for your forum's templates. Doff
Code:
$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t515-post-cards#7069';
 
  var a = $('.post-entry a'),
      version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : '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'],
        title : ['.postdetails:has(.sprite-icon_miniposted)', '.topic-title', '.posthead a', '.postbody-head a'],
        avatar : ['.poster-profile a img', '.postprofile dt img', '.user-basic-info img:first', '.postprofile .avatar img'],
      username : ['.name', '.postprofile dt > strong', '.username', '.postprofile .popmenubutton']
    },
 
    // 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, 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
});
 
 
$('head').append('<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>');
Lorem

Title :
Come from Vietnam
Gender : Male
Age : 18
Posts : 75
Points : 360
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem on Sun 08 May 2016, 23:21

Thank you @Ange Tuteur

--------

Leave this blue neighbourhood
Never knew loving could hurt this good

Troye Sivan ft. Alessia Cara


Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 09 May 2016, 12:30

Anytime. Wink
jessy

Title :
Gender : Female
Posts : 101
Points : 444
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Sat 14 May 2016, 13:45

question:



why guest ? (I am admin)

thanks a lot for everything
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sat 14 May 2016, 14:57

@jessy if you're seeing "Anonymous" as the username, it means that the member's name could not be retrieved. This can be caused by modifications to the templates.
jessy

Title :
Gender : Female
Posts : 101
Points : 444
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Sat 14 May 2016, 15:15



I have to cancel the changes ? thank you
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sat 14 May 2016, 15:16

Those templates shouldn't matter. Did you edit the viewtopic_body template at all ?
jessy

Title :
Gender : Female
Posts : 101
Points : 444
Reputation : 14
Language : italy
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
Awards :
View all awards
View user profile http://ilgiornaledibordo.forumattivo.com/

Postjessy on Sat 14 May 2016, 15:24



viewtopic_body : no

You can create conflict ?

thank you.


Last edited by jessy on Tue 17 May 2016, 14:46; edited 1 time in total
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 Sat 14 May 2016, 20:21

Hmm.. that's peculiar. Could you provide me with a test account for the forum in question ? It'd help me get a clear view of what's going on.

Thanks. Rose
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2312
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 17 May 2016, 12:31

@Ange Tuteur wrote:
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>');

Is it possible to just place the style declarations in the CSS Stylesheet? It would seem easier and more readable if that were done.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
Reputation : 2010
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 17 May 2016, 14:23

@Ace 1 Yes, however it's sometimes better to include it in the script, that way you don't need to mess with CSS when you install / remove the script ; Just one step and everything is installed or uninstalled.

If you ever need to edit the CSS you can make it readable with tools like this :
http://www.cleancss.com/css-beautify/

and then compress it and put it back in the script with tools like this :
https://cssminifier.com/

You can always include the CSS in your stylesheet if you like though, but if JS is disabled it'll just be dead weight because the post cards are only visible with JS enabled. Furthermore, if you switch themes you'll have to put the CSS back into the stylesheet for the plugin. Oh and then there's the character limit for the CSS stylesheet.. There's many reasons why I include the CSS in the script. Razz

Page 1 of 4 1, 2, 3, 4  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