SMF Mod Site

Mod Name:
Created By:
First Created:
March 31, 2012, 07:23:24 PM
Last Modified:
September 11, 2012, 06:14:49 AM
Latest Version:
Compatible With:
1.1.16, 2.0.2
Total Downloads:

Download this mod

apimage.tar.gz (28kB) [2382]
Manual Install Instructions for SMF

Below are some preview images of what the mod looks like when being used




Mod: APImage
Mod version: 0.3.1
Mod demo:
Compatible: SMF 1.1.x and 2.x.x

License: MPL 2.0
This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
If a copy of the MPL was not distributed with this file,
You can obtain one at

Author: Ante Primorac
Author URI:

The orginal code is

img - parameters: alt, width i height
gallery - require children: img

- plugin on/off
- resize the image on the specified size
- klick to zoom
- view in gallery mode
- fullscreen view
- navigation
- key navigation
- slideshow
- watermarks
- turn off mod on a single image
- free advertising, submit your ad here

- English/English UTF-8
- Croatian/Croatian UTF-8
- Portuguese/Portuguese UTF-8 - here - Thanks @Costa

Changes log

Version 0.3.1
! Fixed gallery button description bug in SMF 2.x.x - thx rambomambo
+ Added mod description in css file

Version 0.3
! APImage is turned off in signatures and Tinyportal blocks
+ New design
+ Custom scrollbar in gallery
+ Turn off APImage on a single image
+ Watermarks
+ Slideshow
+ Gallery tag button
+ Free advertising, submit your ad here

! Fixed no defined maximum size bug
+ Improved image resizing algorithm

Version 0.2:
+ Javascript - recoded, object orinted, minimized
+ Better image resizing
+ Navigation and key-navigation
+ Speeded up javascript loading after modify/preview post
* Options:
       + Gallery viewer height
       + Show width and height
! Changed CSS

Version 0.1.8:
+ Added support for SMF 1.1.x
! Fixed loading jQuery bug

! Fixed post modify/preview bug

Version 0.1.7:
! Fixed encoding problem

Version 0.1.6:
+ Added redirection after installation
+ Added default values of mod settings

Version 0.1.5:
! Fixed some bugs

Version 0.1.4:
! Fixed linking bug

Version 0.1.3:
! Fixed small images bug

Version 0.1.2:
! Fixed installation bug

Version 0.1.1:
* First public version :)
! Fixed some bugs

Version 0.1:
* First version, only private ;)


1. Mod isn't working
Clear browser cache(CTRL + R or CTRL + F5) and clear SMF cache (Admin -> Forum Maintenance -> Empty the file cache).
If you have version 1.7.1 or earlier, then check jQuery version (Google Chrome: In Console(CTRL + SHIFT + J) type $().jquery). If you haven't jQuery version 1.7.2 or later, then update jQuery.

2. How to change thumb style?
(Version 0.1.x and 0.2.x) Find in Themes/YOUR THEME/css/index.css or Themes/YOUR THEME/style.css:
Code: [Select]
.apimage {
   background: #000;
   margin: 5px;
   padding: 10px;
and change it!

(Version 0.3.x) Find Themes/YOUR THEME/css/apimage.css and change it!

3. How to remove scrollbar in gallery mode?
(Version 0.1.x and 0.2.x)
Find in Themes/YOUR THEME/css/index.css or Themes/YOUR THEME/style.css:
Code: [Select]
.apimage-gallery .images {
margin-top: 10px;
overflow: auto;
.apimage-gallery .images .list {
width: auto;
white-space: nowrap;
.apimage-gallery .images .apimage {
display: inline-block;
margin: 0 5px;

replace with:
Code: [Select]
.apimage-gallery .images {
margin-top: 5px;
overflow: none;
.apimage-gallery .images .apimage {
float: left;
margin: 5px 5px;

4. How to use APImage in SMF Gallery?
Find in Themes/YOUR THEME/Gallery2.template.php: Lines 915, 916 and 917
Code: [Select]
<tr class="windowbg2">
<td align="center"><img height="' . $context['gallery_pic']['height']  . '" width="' . $context['gallery_pic']['width']  . '" src="' . $modSettings['gallery_url'] . $context['gallery_pic']['filename']  . '" alt="" /></td>

replace with:
Code: [Select]
<tr class="windowbg2">
<td align="center"><div class="apimage loading" data-image="' . $modSettings['gallery_url'] . $context['gallery_pic']['filename']  . '"></div></td>

5. How to parse and show APImage images on Facebook?
Find in Themes/YOUR THEME/index.template.php:
Code: [Select]
echo $context['html_headers'];add after:
Code: [Select]
if(!empty($modSettings['apimage_enabled']) && function_exists($context['get_message'])) {
global $messages_request;
$context['messages_request'] = $messages_request;
while($post = $context['get_message']()) {
$apimages = array();
preg_match_all("/(?<=\<div class\=\"apimage loading\" data\-image\=\")[^\">]*(?=\")/", $post["body"], $apimages);
for($nj=0; $nj < count($apimages[0]); $nj++) {
echo '<meta property="og:image" content="' . $apimages[0][$nj] . '" />';
$messages_request = $context['messages_request'];

6. How to turn off APImage on a single image?
Set "off" parameter to "true":
Code: [Select]
[img off=true width=200 height=200][/img]