News:

Join the Facebook Fan Page.

Main Menu

APImage

Started by anteprimorac, April 18, 2012, 02:46:59 PM

Previous topic - Next topic

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

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

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

.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
<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:
<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:
echo $context['html_headers'];
add after:
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":
[img off=true width=200 height=200]http://image.com/link.jpg[/img]
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

Dzonny

Nice one, keep up the good work :)

anteprimorac

My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

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.

Strong people don't put others down, they lift them up.
A clever person solves a problem. A wise person avoids it.

anteprimorac

Version 0.1.7.1
! Fixed post modify/preview bug

Quote from: Bugo on April 19, 2012, 03:57:49 AM
Can you make a post-load for images?
Fixed in new version(0.1.7.1)

Quote from: Shambles on April 19, 2012, 04:45:52 AM
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







Quote from: Branko. on April 19, 2012, 05:10:07 AM
Congratulations! ;)
Thanks!
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

Branko.

Translation for serbian_latin and serbian_cyrillic (iso/utf8)
serbian_latin
$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
$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>';
Strong people don't put others down, they lift them up.
A clever person solves a problem. A wise person avoids it.

Inti31

#8
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:

[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):

// 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)...
my forum
my testforum


my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

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
Quote
.ap-image {
   background: #000;
   margin: 5px;
   padding: 10px;
}

Quote from: Inti31 on April 19, 2012, 03:43:03 PM
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?
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

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
my forum
my testforum


my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

anteprimorac

Find in index.css:

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

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

Quote from: Inti31 on April 19, 2012, 04:23:26 PM
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
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

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
my forum
my testforum


my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

anteprimorac

Find in index.template.php:

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


remove that!

Find in index.template.php:

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


replace with:


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




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

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?
my forum
my testforum


my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

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
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

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
my forum
my testforum


my mods - which I only made them work for 2.0 Gold:
Topics Filter v3.2 SMF 2.0 Gold
MemberNumber

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 ;)
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

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!
My Mods:
APImage v0.3




Besplatni singlovi, doublovi, listići, ... svih sportova! - BalkanTips

Advertisement: