APImage

[anteprimorac]

Link to Mod

APImage

Info

Mod: APImage
Mod version: 0.3.1
Mod demo: http://smf.anteprimorac.from.hr/index.php?topic=2.0
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 http://mozilla.org/MPL/2.0/.

Author: Ante Primorac
Author URI: http://anteprimorac.from.hr

The orginal code is http://custom.simplemachines.org/mods/index.php?mod=3388

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

Features:
- 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

Languages:
- 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

Version 0.2.0.1:
! 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

Version 0.1.7.1:
! 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

FAQ:

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 Expand


.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 Expand


.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 Expand


.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 Expand

<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>
</tr>

replace with:

Code Select Expand

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

5. How to parse and show APImage images on Facebook?
Find in Themes/YOUR THEME/index.template.php:

Code Select Expand

echo $context['html_headers'];
add after:

Code Select Expand

if(!empty($modSettings['apimage_enabled']) && function_exists($context['get_message'])) {
$context['get_message'](true);
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] . '" />';
}
}
$context['get_message'](true);
$messages_request = $context['messages_request'];
}

6. How to turn off APImage on a single image?
Set "off" parameter to "true":

Code Select Expand

[img off=true width=200 height=200]http://image.com/link.jpg[/img]

[Dzonny]

Nice one, keep up the good work

[anteprimorac]

Nice one, keep up the good work

Thanks!

[Bugo]

Can you make a post-load for images?

[Shambles]

I'm having trouble understanding what exactly this is/does, even after visiting the demo page

Is it just for showing images in full screen, or have I missed something? I'm sure it's just me, but the mod description doesn't elaborate

[Branko.]

Congratulations!

[anteprimorac]

Version 0.1.7.1
! Fixed post modify/preview bug

Can you make a post-load for images?

Fixed in new version(0.1.7.1)

I'm having trouble understanding what exactly this is/does, even after visiting the demo page

Is it just for showing images in full screen, or have I missed something? I'm sure it's just me, but the mod description doesn't elaborate

Congratulations!

Thanks!

[Branko.]

Translation for serbian_latin and serbian_cyrillic (iso/utf8)
serbian_latin

Code Select Expand

$txt['apimage_enabled'] = 'Aktiviraj APImage';
$txt['apimage_max_thumb_width'] = 'Maksimalna širina smanjene slike<br /><span class="smalltext">Ostavi prazno za nedefinisanu širinu.</span>';
$txt['apimage_max_thumb_height'] = 'Maksimalna visina smanjene slike<br /><span class="smalltext">Ostavi prazno za nedefinisanu visinu.</span>';
$txt['apimage_max_gallery_thumb_width'] = 'Maksimalna širina smanjene slike u galeriji<br /><span class="smalltext">Ostavi prazno za nedefiniranu širinu.</span>';
$txt['apimage_max_gallery_thumb_height'] = 'Maksimalna visina smanjene slike u galeriji<br /><span class="smalltext">Ostavi prazno za nedefinisanu visinu.</span>';

serbian_cyrillic

Code Select Expand

$txt['apimage_enabled'] = 'Активирај APImage';
$txt['apimage_max_thumb_width'] = 'Максимална ширина смањене слике<br /><span class="smalltext">Остави празно за недефинисану ширину.</span>';
$txt['apimage_max_thumb_height'] = 'Максимална висина смањене слике<br /><span class="smalltext">Остави празно за недефинисану висину.</span>';
$txt['apimage_max_gallery_thumb_width'] = 'Максимална ширина смањене слике у галерији<br /><span class="smalltext">Остави празно за недефинисану ширину.</span>';
$txt['apimage_max_gallery_thumb_height'] = 'Максимална висина смањене слике у галерији<br /><span class="smalltext">Остави празно за недефинисану висину.</span>';

[Inti31]

first of all - very nice and good work.

i tested it: http://alt.epica-forum.de/index.php?topic=5.0

One thing: these pics are hosted by postimage.org. this is the code is entered in this post:

Code Select Expand


[gallery][img width=400 height=300]http://s19.postimage.org/h2p31t4dv/Epica_01_695.jpg[/img] [img width=400 height=300]http://s19.postimage.org/jlas2hq43/Epica_02_695.jpg[/img] [img width=400 height=300]http://s19.postimage.org/4qm6obgj7/Epica_03_695.jpg[/img][/gallery]

These pictures are scaled bigger than they are. pic info: 800px × 529px (scaled to 910px × 602px) - means: all pictures are scaled to 910 x 602).
I did a test and reduced max width and height to 400x300 (are set in features & options.
Link: yourforumurl.com/index.php?action=admin;area=featuresettings;sa=layout

Where can I set the size of the black frame around the thumbnails? it is too big (my opinion).

german translation (german/german-utf8):

Code Select Expand


// APImage plugin text
$txt['apimage_enabled'] = 'Aktiviere APImage';
$txt['apimage_max_thumb_width'] = 'Max. Breite des Vorschaubildes<br /><span class="smalltext">Leerlassen, um keine max. Breite festzulegen.</span>';
$txt['apimage_max_thumb_height'] = 'Max. H&ouml;he des Vorschaubildes<br /><span class="smalltext">Leerlassen, um keine max. H&ouml;he festzulegen.</span>';
$txt['apimage_max_gallery_thumb_width'] = 'Max. Breite des Vorschaubildes im Galerie-Mode<br /><span class="smalltext">Leerlassen, um keine max. Breite festzulegen.</span>';
$txt['apimage_max_gallery_thumb_height'] = 'Max. H&ouml;he des Vorschaubildes im Galerie-Mode<br /><span class="smalltext">Leerlassen, um keine max. H&ouml;he festzulegen.</span>';


Link to my example to see the oversized pics: http://alt.epica-forum.de/index.php?topic=5.0


by the way, if I use the code without width / height - the result is the same...

cheers Inti31
Addition: is it possible instead of of using the sidebar in gallery mode  to see all pictures that they appear in lines , means thumbs are seperated by lines (10 pics at each line)...

[anteprimorac]

Thanks!

Your jQuery version is too old. Please update it on latest version - http://code.jquery.com/jquery-1.7.2.min.js

To change the frame size you need to modify this code in index.css

.ap-image {
   background: #000;
   margin: 5px;
   padding: 10px;
}

Addition: is it possible instead of of using the sidebar in gallery mode  to see all pictures that they appear in lines , means thumbs are seperated by lines (10 pics at each line)...

what you mean?

[Inti31]

thx for the info i will give it it try tomorrow.

jquery-1.7.2.min.js - I have to save it to /Themes/default/scripts ? just to be sure...

What i mean:

in gallery mode I have to use the scrollbar (not sidebar, sorry) to scroll to pictures if there a more than 10 for example.

example:
now it looks like

pic1 pic2 pic3 ... ... ...                                                         pic x // all pics are in one line

I want to see all pictures whithout using the scrollbar
like
pic 1 pic 2 pic3 ... pic10 - // line1
pic 11 ... pic 20  // line 2

[anteprimorac]

Find in index.css:

Code Select Expand


.ap-image-gallery .images {
margin-top: 10px;
overflow: auto;
}
.ap-image-gallery .images .list {
width: auto;
white-space: nowrap;
}
.ap-image-gallery .images .ap-image {
display: inline-block;
margin: 0 5px;
}


replace with:

Code Select Expand


.ap-image-gallery .images {
margin-top: 5px;
overflow: none;
}
.ap-image-gallery .images .ap-image {
float: left;
margin: 5px 5px;
}


Please send me feedback when you do this!

jquery-1.7.2.min.js - I have to save it to /Themes/default/scripts ? just to be sure...

Copy/paste code from http://code.jquery.com/jquery-1.7.2.min.js into /Themes/default/scripts/jquery.min.js

[Inti31]

okay, thx first

quick answer...

So... - I did anges - now thumbs are shown in lines - nice

http://alt.epica-forum.de/index.php?topic=5.msg

Also (I use firefox) seem to have a script problem now because when clicking on a main pic and it zooms - firefox hangs - have to verify it which script - have to go now.

the main pic is oversized than before---

cheers inti31

[anteprimorac]

Find in index.template.php:

Code Select Expand


<script type="text/javascript" src="http://alt.epica-forum.de/Themes/default/scripts/jquery.min.js"></script>


remove that!

Find in index.template.php:

Code Select Expand


<script type="text/javascript" src="http://alt.epica-forum.de/Themes/default/scripts/jquery-1.3.2.min.js"></script>


replace with:

Code Select Expand


<script type="text/javascript" src="http://alt.epica-forum.de/Themes/default/scripts/jquery.min.js"></script>


[Inti31]

okay, did that

as mentioned yesterday evening I set the allowed resolution to 400x300

Have look to this: http://alt.epica-forum.de/index.php?topic=1.msg5#msg5

if I use img tag -  the width 7 height is set automatically

But now each  pic just in img tag is shown in thumbnail and when I zoom it, the resolution is wrong.
Above is the same pic is hs tag - this is fine

hmmh - thinking of modding your mod so that I just use the gallery mode.... - or maybe a suggestion just to activate the gallery seperately?

[anteprimorac]

You are able to set the maximum width of thumb, not a default.

In this version you aren't able to use the gallery seperately, because gallery uses img tag.


See this(same image but different host) - http://smf.anteprimorac.from.hr/index.php?topic=2.msg20#msg20

[Inti31]

okay guess it is clear.

hmmh... - in normal, the max resolution is set here:
Link: /index.php?action=admin;area=featuresettings;sa=layout

that means, that width height is set automatical if you submit a pic in an  img-tag

When you edit a post where you entered sth. like [ img ] pic.jpg [ /img ], you will see that height/width is written to the code.

Your mod is fine - for huge pics - have a look to the 2 pics you uploaded  (http://smf.anteprimorac.from.hr/index.php?&topic=2.msg20#msg20)- the resolution is worse if you click on the pic to zoom it. . I've to klick on maximize to see the correct resolution.

Also in gallery mode - where is the size of the big picture located? - this one needs the size is set in /index.php?action=admin;area=featuresettings;sa=layout - in my case 400x300

cheers Inti31

[anteprimorac]

I wasn't working on that features, like advanced image resizing. That features will be available in next version - 0.2.

Please be patience

[samurai-lupin]

Hello, this looks like an excellent mod! Could please also do a SMF 1.1 Version of it? Thank you

[anteprimorac]

Thanks,
I'm working on it!