On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Latest version of Quip 2.3.3 on Revo 2.3.5.pl:

    Has anyone implement a markdown feature for the comment textarea in quip form? I looked at a few but the integration looked convoluted at best.

    I'd like to change the icon for anonymous posters to a png image on my server. I looked for more detail on the quip setting for
    gravatarIcon
    but there is basically no explanation on how to change this. Has anyone figured this out?

    TIA

    This question has been answered by donshakespeare. See the first response.

    • After looking at the option on the gavatar site (http://en.gravatar.com/site/implement/images/), I realized that the options are quite limited but do explain the potential values for the gravatarIcon setting. Not to be discouraged, I have come up with a solution for replacing the anonymous gravatar image using a quick jquery solution. This seems possible because the src of the anonymous gravatar seems to be consistent (at least I hope it is). Anyway if this solution were to fail, it would simply display the default anyway. What I did:


      1. Looked at the source code of the comments to determine the full path to the anonymous gravatars (this is what wew will search for and replace)
      2. Created a different png file that I wanted to use instead and sized it and uploaded it to assets. In my case I'm using an S3 repository so that is what's listed below.
      3. Added the below script to my document ready function to make sure the page was loaded before this runs otherwise it won't work.

      $( document ).ready(function() {
                      ...
      		// replace crappy anonymous gravatars
      		var oldGravURL = "http://www.gravatar.com/avatar/bce74cfa75d744dd993a3150dc277268?s=80&d=mm"; //from step 1 above. Your's will probably end in "d=identicon" as that is the default
      		var newGravURL = "http://content.cmhworks.com/img/anonymous.png"; //from step 2 above. Attached below if you want to use at 80px x 80px. 
      		var anonGravs = $('img[src$="' + oldGravURL + '"]'); //grabs all anonymous gravatars matching the oldGravURL
                      // loop through each and replace src
      		$.each(anonGravs, function(){
      			//console.log($(this).attr('src'));  //uncomment to see the old url in the console
      			$(this).attr('src', newGravURL);
      	    });
                      ...
      });
      


      I'm also in the process of reformatting the comments and forms in bootstrap 3 and "in-lining" the comment form (which is working). I took the in-lining idea from http://forums.modx.com/thread/96540/using-only-one-form-in-modx-quip-comments---like-wordpress but made some changes and am using bootstrap collapse instead of the ddaccordian script which doesn't seems to like jquery 2.x much. Much thanks to Nwadibia-Designs for the demo and code which got me started. It's almost done if you want to see the above in action. Some things to do so don't be harsh;) I'll be happy to share if anyone is interested when I am done.

      http://c2065.paas2.tx.modxcloud.com/blogs/2014/06/25/pushing-the-limits-of-engagement/
      • Quote from: harveyev at Jul 08, 2015, 01:24 AM
        After looking at the option on the gavatar site (http://en.gravatar.com/site/implement/images/), I realized that the options are quite limited but do explain the potential values for the gravatarIcon setting.

        Well color me a time-waster. After re-reading the gravatar link above, all you need to do is urlencode the url to the default image you want to use and enter that in the gravatarIcon setting. In my case,
        http%3A%2F%2Fcontent.cmhworks.com%2Fimg%2Fanonymous.png


        Anyway, the previous solution didn't work as the actual filename provided by gravatar is a hash value that does change.Just cuz u can jquery doesn't mean u should;)

        Still looking for a markdown for the quip comments tho...
        • I don't know your current progress at this time...
          But, you don't need that jQuery or Quip's gravatar, create your own awesome snippet.

          [[!myGravatar? &size=`100` &quipEmail=`[[+email]]` &default=`http%3A%2F%2Fcontent.cmhworks.com%2Fimg%2Fanonymous.png`]]

          Fix the gravatar call in http://rtfm.modx.com/extras/revo/quip/quip.quip/quip.quip.tplcomment :
          <li class="[[+cls]]" id="[[+idprefix]][[+id]]" [[+depth_margin:notempty=`style="padding-left: [[+depth_margin]]px"`]]>
          <div id="[[+idprefix]][[+id]]-div" class="quip-comment-body [[+alt]]">
              <div class="quip-comment-right">
                  [[+gravatarUrl:notempty=`<img src="[[+gravatarUrl]]" class="quip-avatar" alt="" />`]]
              </div>...

          Change to
          <li class="[[+cls]]" id="[[+idprefix]][[+id]]" [[+depth_margin:notempty=`style="padding-left: [[+depth_margin]]px"`]]>
          <div id="[[+idprefix]][[+id]]-div" class="quip-comment-body [[+alt]]">
              <div class="quip-comment-right">
                 [[!myGravatar? &size=`100` &quipEmail=`[[+email]]` &default=`http%3A%2F%2Fcontent.cmhworks.com%2Fimg%2Fanonymous.png`]]
              </div>...

          myGravatar
          <?php
          $modxEmail = $quipEmail;
          $modxEmail = md5(strtolower(trim($modxEmail)));
          $modxGrav = "http://www.gravatar.com/avatar/" . $modxEmail . "?s=" . $size . "&d=" . $default;
          $modxGravatar = '<img class="myGravatar" src="' . $modxGrav . '" alt="Gravatar.com Image" /></a>';
          return $modxGravatar;

          GravatarIcon for anonymous users?
          You mean anonymous, as in, non-members, or as in people without Gravatar-enabled emails?
          A member can post with a different quip [[+email]] - only the one that appears in the form will be honoured
          An anonymous user can post with a gravatar-enabled quip [[+email]] or use a member's email, if they know it
            TinymceWrapper: Complete back/frontend content solution.
            Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
            5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
          • discuss.answer
            As for markdown for Quip comments.

            Idea is to provide a Markdown experience for the user, but convert to HTML onSubmit, since Markdown code, as far as I know is useless to Quip's(allowed tags).

            You can specify which Markdown code is allowed, of course you shall have set the HTML equivalent in your Quip config.
            Use JS to find and replace, just before submitting.

            Or present one Markdown textarea, different from the Quip's which you can hide or use as preview.
            As the user types in the 2nd textarea, it transforms on the fly, onkeyup, to pure html source on Quip's textarea
            E.g https://markdown-it.github.io/
            https://markdown-it.github.io/

            Or, use the awesome TinyMCE 4.2's text which does all this for you. Load TinyMCE CDN on demand, so as not to slow your site an inch.
            And since you are now using only one form for Quip, you are in great luck.

            Paste this code in the fiddle to fiddle with it
            http://fiddle.tinymce.com/
            <script type="text/javascript">
            tinymce.init({
                selector: "textarea",
                plugins: "textpattern",
                textpattern_patterns: [
                     {start: '*', end: '*', format: 'italic'},
                     {start: '**', end: '**', format: 'bold'},
                     {start: '#', format: 'h1'},
                     {start: '##', format: 'h2'},
                     {start: '###', format: 'h3'},
                     {start: '####', format: 'h4'},
                     {start: '#####', format: 'h5'},
                     {start: '######', format: 'h6'},
                     {start: '1. ', cmd: 'InsertOrderedList'},
                     {start: '* ', cmd: 'InsertUnorderedList'},
                     {start: '- ', cmd: 'InsertUnorderedList'}
                ]
            });
            </script>
            <form method="post" action="dump.php">
                <textarea name="content">Press enter after using a Markdown code</textarea>
            </form>
            

            And of course you can force TinyMCE 4.2 to never add or subtract from your allowed pre-specified HTML tags.
            Use parameters valid_elements etc
              TinymceWrapper: Complete back/frontend content solution.
              Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
              5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
            • Quote from: donshakespeare at Jul 08, 2015, 03:53 AM
              I don't know your current progress at this time...
              But, you don't need that jQuery or Quip's gravatar, create your own awesome snippet.


              Thanks! All I did was change the default according to gravatars instructions:

              If you'd prefer to use your own default image (perhaps your logo, a funny face, whatever), then you can easily do so by supplying the URL to an image in the d= or default= parameter. The URL should be URL-encoded to ensure that it carries across correctly, for example:

              <img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?d=http%3A%2F%2Fexample.com%2Fimages%2Favatar.jpg" />

              Full instructions are athttps://en.gravatar.com/site/implement/images/
              • Quote from: donshakespeare at Jul 08, 2015, 04:12 AM
                As for markdown for Quip comments.

                Idea is to provide a Markdown experience for the user, but convert to HTML onSubmit, since Markdown code, as far as I know is useless to Quip's(allowed tags).

                You can specify which Markdown code is allowed, of course you shall have set the HTML equivalent in your Quip config.
                Use JS to find and replace, just before submitting.

                Or present one Markdown textarea, different from the Quip's which you can hide or use as preview.
                As the user types in the 2nd textarea, it transforms on the fly, onkeyup, to pure html source on Quip's textarea
                E.g https://markdown-it.github.io/
                https://markdown-it.github.io/

                Or, use the awesome TinyMCE 4.2's text which does all this for you. Load TinyMCE CDN on demand, so as not to slow your site an inch.
                And since you are now using only one form for Quip, you are in great luck.

                Paste this code in the fiddle to fiddle with it
                http://fiddle.tinymce.com/
                <script type="text/javascript">
                tinymce.init({
                    selector: "textarea",
                    plugins: "textpattern",
                    textpattern_patterns: [
                         {start: '*', end: '*', format: 'italic'},
                         {start: '**', end: '**', format: 'bold'},
                         {start: '#', format: 'h1'},
                         {start: '##', format: 'h2'},
                         {start: '###', format: 'h3'},
                         {start: '####', format: 'h4'},
                         {start: '#####', format: 'h5'},
                         {start: '######', format: 'h6'},
                         {start: '1. ', cmd: 'InsertOrderedList'},
                         {start: '* ', cmd: 'InsertUnorderedList'},
                         {start: '- ', cmd: 'InsertUnorderedList'}
                    ]
                });
                </script>
                <form method="post" action="dump.php">
                    <textarea name="content">Press enter after using a Markdown code</textarea>
                </form>
                

                And of course you can force TinyMCE 4.2 to never add or subtract from your allowed pre-specified HTML tags.
                Use parameters valid_elements etc

                I worked for some time with TinyMCE today and found it really didn't play well with a few of my components. Also looked at Markdown-it the other day, anf just decided to bail on the whole markddown thing. Anyway, everything else is up and going on my prod site http://cmhworks.com/blogs/2015/07/09/responsive-modx-quip/. Recaptcha2 is also gtg. Went with a js based dealio with client side validation.

                Thanks for your help.