Image thumbnail plugin

Even though Muut doesn't support image posts or image thumbnails, by default, adding image thumbnail support is possible.

Images/memes can often skew a community towards attention seekers rather than discussion. It's for this reason that a community hosted on Muut.com will never support image posts or image thumbnails. This content, instead, appears as a link. (check out our Manifesto!) However, we developed an addon that allows community owners the ability to transform image links into image thumbnails on embedded communities only.


Unofficial Quick Embedding w/Image Thumbnail Plugin

This method is not backwards compatible. It will only work on HTML5 browsers, and is not officially supported.

A quick embed is a fast way for lay administrators get their page running with the Image Thumbnail Plugin. It is, however, important to note this method does not follow "best practices" for web development. Not having access to the code on your website is a good reason to use this method, but if you do have access to your code, the Advanced method is recommended.

<link rel="stylesheet" href="//cdn.muut.com/1/moot.css" />
<link rel="stylesheet" href="//cdn.muut.com/1/plugin/thumb.css" />
<a class="muut" href="https://muut.com/i/community-name">Your Community Title</a>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdn.muut.com/1/moot.min.js"></script>
<script src="//cdn.muut.com/1/plugin/thumb.js"></script>

Line 3 of the embed code <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a> must be edited to link to your Muut community. You can find your community-name on your quick embed settings page. And just replace "Your Community Title" with whatever gives you warm fuzzies.


Official Advanced Embedding w/Image Thumbnail Plugin

The only supported methods for embedding a Muut community with the Image Thumbnail Plugin requires code level access to your website. That means, you will either need to edit the HTML or be able to "inject" or add small snippets of code to both the <head> </head> and <body> </body> sections the page you intend to embed your community on.


Existing Pages

If your website only allows code injections, be sure you can edit the <head> and <body> tags. The CSS or link tags allow the look and feel of muut to remain consistent after the addition of the Image Thumbnail Plugin. The <a> and <script> code blocks insert your Muut community and the plugin, so be sure you place it where you want your community to appear.

Edit your <head> to include the following block:

<head>
<link rel="stylesheet" href="//cdn.muut.com/1/moot.css" />
<link rel="stylesheet" href="//cdn.muut.com/1/plugin/thumb.css" />
</head>

Your <body> tag should be edited to included the following block:

<body>
<a class="muut" href="https://muut.com/i/community-name">Your Community Title</a>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdn.muut.com/1/moot.min.js"></script>
<script src="//cdn.muut.com/1/plugin/thumb.js"></script>
</body>

As with the quick embedding option, you will need to make sure you edit line 3 of the embed code <a class="muut" href="https://muut.com/i/community-name">Your Community Title</a> And as always, your community-name can still be found on your quick embed settings page.

If you already have Muut embedded you'll notice a few changes in this script from the small embed code we give you to start out with. Both lines 4 and 6 contain important additions to this embed code and are essential to make your community work with the Image Thumbnail Plugin. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> must be included before your moot.min.js embed code and thumb.js must be incuded after moot.min.js.


New Page

Embedding your forum with a new page that you have HTML level access to, is wicked easy. just drop this code onto your page. Not tomfoolery necessary.

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>Your Forum Title</title>
   <link rel="stylesheet" href="//cdn.muut.com/1/moot.css" />
   <link rel="stylesheet" href="//cdn.muut.com/1/plugin/thumb.css" />
  </head>
  <body>
   <a class="muut" href="https://muut.com/i/community-name">Your Forum Title</a>
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   <script src="//cdn.muut.com/1/moot.min.js"></script>
   <script src="//cdn.muut.com/1/plugin/thumb.js"></script>
  </body>
 </html>

We know we said no tomfoolery necessary, but we don't even know what that means, so don't forget to edit to include your community-name. Turns out you can still find it at your quick embed settings page.