Comments

Comments is a components designed to stimulate and facilitate interaction and feedback by members. It consists of a simple form with a textarea that grows on typing and an image upload button by default. Depending on the settings the block can have a maximum amount of characters, an option to insert rich links and the option to tag othrr members. You will see this form in the shoutbox on dashboards (domain, group, profile), for private messages and as the comment form with nodes.

Some key features are that users can…

  • edit and delete their own submissions
  • attach a photo (from camera or system)
  • tag multiple members
  • insert a rich link (with title and image)
  • insert content links
  • not submit an empty form

This module uses several scripts to provide enhanced functionality for the user:

Shoutbox

your image
Thanks for adding the photos Edward. Do you know when the next conference will be held?
Their will be a meet up in London next month. If you want to join the meet up, you can enroll here.
Comment form
  <div class='comment-form-holder'>
    <form class='comment-form'>
      <div class='form-comment-message'>
        <textarea cols='50' id='comment-comment' placeholder='Write a shout...' rows='1'></textarea>
      </div>
      <div class='preview-wrapper'>
        <a class='remove-image element-hidden' href='#' id='remove-image'></a>
        <img alt='your image' class='shoutimage element-hidden' id='preview-image' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='>
      </div>
      <div class='clear'></div>
      <input accept='image/*' class='form-comment-file' data-tip='Attach a photo' type='file'>
      <button class='modal-inline button addlink-btn' href='#addexternallink'>
        <i class='icon-link'></i>
      </button>
      <span id='remain'></span>
      <input class='form-comment-submit' type='submit' value='share'>
    </form>
  </div>

Comment node

  <article class='comment media'>
    <div class='avatar-holder media-figure'>
      <a href='./profile.html' title="View Brendan Woodard's profile">
        <img alt='Dora Tilman' class='lazyload' data-srcset='/photos/60/people2.jpg 1x, /photos/120/people2.jpg 2x' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='>
        <noscript>
          <img alt='Brendan Woodard' src='/photos/60/people2.jpg' srcset='/photos/60/people2.jpg 1x, /photos/120/people2.jpg 2x'>
        </noscript>
      </a>
    </div>
    <div class='comment-holder media-body'>
      <div class='comment-head'>
        <a class='comment-author' href='./profile.html' title="View Brendan Woodard's profile">
          Brendan Woodard
        </a>
        (<a href='./who-is-who.html'>Staff</a>)
      </div>
      <div class='comment-body'>
        Today we have published the
        <a href='./photo-album.html'>photos</a>
        of the conference of marine reserves in the North Sea. Have a look and if you have made some photos yourself you can mail them to
        <a href='./profile.html'>Edward Fischer</a>
        <img alt='' class='lazyload' data-srcset='/photos/fisheries.jpg' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='>
        <noscript>
          <img alt='' src='/photos/fisheries.jpg'>
        </noscript>
      </div>
      <div class='comment-footer'>
        <span class='comment-timestamp'>2 days ago</span>
        <span class='comment-actions'>
          <a class='comment-actionlink modal-inline' href='#reply-comment'>reply</a>
        </span>
      </div>
    </div>
  </article>

Reply

Edit comment

You cannot edit the attachment of a comment

Delete comment

Are you sure want to delete this comment?