• По ссылке:
  • Скопируйте адрес из ссылки «Скачать» из формы вверху этой страницы. Вставьте его в Менеджере Плагинов вашего сайта во вкладке «Ручная установка» в первое поле. Нажмите кнопку «Установить».
  • Также есть ссылка на zip-архив, zip-архив последней версии.
• Скачанный архив:
  • Предложите архив второму полю той же вкладки. Нажмите кнопку «Установить».
  • Распакуйте из архива папку плагина. Правильное наименование папки плагина - в файле plugin.info.txt после указателя base. Переименуйте папку и загрузите на сервер вашего сайта, если понимаете, как это сделать.

Подробности

Обновите общие настройки в админке (изменить ненужный параметр либо плагином Toucher)

Добавьте [ ] вокруг тега картинки.

[{{Путь-картинки|Подпись}}]

Подпись может быть форматирована

Перезагрузите кэш браузера (В Firefox: держите [shift] когда нажимаете на кнопку перезагрузки страницы)

• 2010/05/30 : Повышение совместимости с последней версией Докувики
• 2010/01/21 : исправление ошибок
• 2009/12/06 : заработали относительные пути!
• 2009/04/23 : добавлено оповещение об ошибке несуществующей картинки
• 2009/02/27 : мелкое обновление
• 2009/01/12 : добавлен конфигуратор и переводы
• 2008/12/29 : небольшое улучшение стиля
• 2008/11/18 : Don't resize images to their original size. (Better compression)
• 2008/11/07 : плагин использует больше функционала Докувики (+ исправление ошибочного пути media)
• 2008/10/07 : новая версия ! (чистка «<div class=«thumbinner»>», добавлен лучший EntryPatern.)

<?php
/**
 * @license    GPL 2 (http://www.gnu.org/licenses/gpl.html)
 * @author     FFTiger <fftiger@wikisquare.com>, myst6re <myst6re@wikisquare.com>
 */
 
if(!defined('DOKU_INC')) define('DOKU_INC',realpath(dirname(__FILE__).'/../../').'/');
if(!defined('DOKU_PLUGIN')) define('DOKU_PLUGIN',DOKU_INC.'lib/plugins/');
require_once(DOKU_PLUGIN.'syntax.php');
 
class syntax_plugin_imagebox extends DokuWiki_Syntax_Plugin {
 
	function getInfo(){
		return array(
			'author' => 'FFTiger / myst6re',
			'email'  => 'myst6re@wikisquare.com',
			'date'   => '2010-05-30',
			'name'   => 'Imagebox Plugin',
			'desc'   => 'Entoure les images avec un cadre de décoration.',
			'url'    => 'http://www.wikisquare.com/',
		);
	}
 
	function getType(){ return 'protected'; }
	function getAllowedTypes() { return array('substition','protected','disabled','formatting'); }
	function getSort(){ return 315; }
	function getPType(){ return 'block'; }
	function connectTo($mode) {	$this->Lexer->addEntryPattern('\[\{\{[^\|\}]+\|*(?=[^\}]*\}\}\])',$mode,'plugin_imagebox'); }
	function postConnect() { $this->Lexer->addExitPattern('\}\}\]','plugin_imagebox'); }
 
	function handle($match, $state, $pos, &$handler){
		switch($state){
			case DOKU_LEXER_ENTER:
				$match=Doku_Handler_Parse_Media(substr($match,3));
				$match['w'] = $match['width'];
				$dispMagnify = ($match['w'] || $match['height']) && $this->getConf('display_magnify')=='If necessary' || $this->getConf('display_magnify')=='Always';
 
				$gimgs = false;
				list($src,$hash) = explode('#',$match['src'],2);
 
				if($match['type']=='internalmedia') {
					global $ID;
					$exists = false;
					resolve_mediaid(getNS($ID), $src, $exists);
 
					if($dispMagnify) {
						$match['detail'] = ml($src,array('id'=>$ID,'cache'=>$match['cache']),($match['linking']=='direct'));
						if($hash) $match['detail'] .= '#'.$hash;
					}
 
					if($exists)	$gimgs = @getImageSize(mediaFN($src));
				}
				else {
					if($dispMagnify) {
						$match['detail'] = ml($src,array('cache'=>'cache'),false);
						if($hash) $match['detail'] .= '#'.$hash;
					}
 
					$gimgs = @getImageSize($src);
				}
 
				$match['exist'] = $gimgs!==false;
 
				if(!$match['w'] && $match['exist']){
					($match['height'])?
					$match['w'] = $match['height']*$gimgs[0]/$gimgs[1]:
					$match['w'] = $gimgs[0];
				}
 
				if(!$match['align'] || $match['align']=='center'&&!$this->getConf('center_align'))
					$match['align'] = 'rien';
			return array($state,$match);
 
			case DOKU_LEXER_UNMATCHED:
			return array($state,$match);
 
			case DOKU_LEXER_EXIT:
			return array($state,$match);
		}
	}
 
	function render($mode, &$renderer, $data){
		if($mode == 'xhtml'){
			list($state,$match) = $data;
 
			switch($state){
				case DOKU_LEXER_ENTER:
					$renderer->doc.= '<div class="thumb2 t'.$match['align'].'" style="width:'.($match['w']?($match['w']+10).'px':'auto').'"><div class="thumbinner">';
					if($match['exist'])
						$renderer->$match['type']($match['src'],$match['title'],'box2',$match['width'],$match['height'],$match['cache'],$match['linking']);
					else
						$renderer->doc.= 'Invalid Link';
					$renderer->doc.= '<div class="thumbcaption">';
					if($match['detail']) {
						$renderer->doc.= '<div class="magnify">';
						$renderer->doc.= '<a class="internal" title="'.$this->getLang('enlarge').'" href="'.$match['detail'].'">';
						$renderer->doc.= '<img width="15" height="11" alt="" src="'.DOKU_BASE.'lib/plugins/imagebox/magnify-clip.png"/>';
						$renderer->doc.= '</a></div>';
					}
				break;
 
				case DOKU_LEXER_UNMATCHED:
					$style=$this->getConf('default_caption_style');
					if($style=='Italic')	$renderer->doc .= '<em>'.$renderer->_xmlEntities($match).'</em>';
					elseif($style=='Bold')	$renderer->doc .= '<strong>'.$renderer->_xmlEntities($match).'</strong>';
					else 					$renderer->doc .= $renderer->_xmlEntities($match);
				break;
 
				case DOKU_LEXER_EXIT:
					$renderer->doc.= '</div></div></div>';
				break;
			}
			return true;
		}
		return false;
	}
}
 
//Setup VIM: ex: et ts=4 enc=utf-8 :

div.thumb2{
margin-bottom:.5em;
width:auto;
}
div.trien{
float:left;
margin:.5em 1.4em .8em 0;
}
div.tleft{
clear:left;
float:left;
margin:.5em 1.4em .8em 0;
}
div.tright{
clear:right;
float:right;
margin:.5em 0 .8em 1.4em;
}
div.tcenter{
clear:both;
margin:.5em auto .8em auto;
}
div.thumb2 .thumbinner{
background-color:#F9F9F9;
border:1px solid #CCC;
font-size:94%;
overflow:hidden;
padding:3px;
}
div.thumb2 .mediabox2{
background:#FFF none repeat scroll 0 0;
margin:0;
border:1px solid #CCC!important;
}
html .thumbcaption{
border:medium none;
font-size:94%;
line-height:1.4em;
padding:3px;
text-align:left;
}
div.thumb2 .magnify{
background:transparent none repeat scroll 0 0;
border:medium none!important;
float:right;
}
div.thumb2 .magnify a,div.thumb2 .magnify img{
background:transparent none repeat scroll 0 0;
border:medium none!important;
display:block;
}
div.thumb2 .interwiki{
background-position:0 center;
padding-left:17px;
}
/* Uncomment these lines to force the edit button show up bellow the imagebox. */
/* div.dokuwiki div.secedit input.button{
 * clear:both !important;
 * }
 */

Brilliant! Kudos to FFTiger & myst6re. — Kudos 2008/??/?? ??:??

Thanks
— myst6re 2008/10/03 16:22

Awesome plugin, but I have one feature request. I would like the ability to set the alt text as well as the caption. Maybe syntax like

[{{:wiki:dokuwiki-128.png|Alt Text here|Caption goes here}}]

Thanks, – Jonathan

It's very nice, but does not work in combination with the odt plugin. images within a box are ignored when exporting. – Mark

I love the plugin and use it all over my wiki. I'm starting to use the DokuTexit plugin to easily generate PDFs from my articles. Unfortunately, imagebox doesn't appear to be compatible. It would be great if the imagebox rendered as a plain image does in DokuTexit (a float with a caption). The Dokutexit people have a stub for adding dokutexit support to other syntax plugins. I'd love to help, but don't know PHP. Any help would be appreciated! – Andy

spinkao: When I use your plugin, I only get the picture in a double frame, but no text is displayed. What could be wrong, please? The command I use looks like this:

[{{figure.jpg|This is my caption }}]

I have the same issue with the December 2009 version: I have a JavaScript error, maybe it is related to this ?
I had to rollback to the older version

I have (hope) correct this bug: in the sintax.php, change this line:

$renderer->doc.= '<div class="thumbcaption" style="display:'.($match['title']==''?'none':'block').'">';

with this

$renderer->doc.= '<div class="thumbcaption" style="display:block">';

— Luigi 2009/12/18

If PHP Gives you an error similar to the following:

Warning: getimagesize(http://www.mysite.us/sub-domain/wiki/_media/morse-code.png) [function.getimagesize]: failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/xxxxxx/public_html/sub-domain/wiki/lib/plugins/imagebox/syntax.php on line 52

you can correct this issue by finding the following lines around line 49 in your ../lib/plugins/imagebox/syntax.php-file:

$match['source'] = str_replace(':','/',$match['src']);
if($match['src']{0} == ':')
$match['source'] = substr($match['source'],1);
$gimgs = getImageSize(DOKU_URL.'_media/'.$match['source']);

and replace them with:

$match['source'] = str_replace('_','/',$match['src']);
if($match['src']{0} == ':')
$match['source'] = substr($match['source'],1);
$gimgs = getImageSize(mediaFN(cleanID($match['source']))); 

— Anonymous 2008/??/?? ??:??

Fixed and improved ! Thank you very much for your help.
— myst6re 2008/11/07 23:05

Great plugin, thanks! I still get the above mentioned error using the 11/18 revision when my images are in a namespace other than root. The problem seems to be in the line:

$gimgs = getImageSize(mediaFN($match['src']));

as the mediaFN function only returns the media path to the root namespace. It seems like a simple fix but I'm not familiar with DokuWiki enough to know the correct function to tack on the extra namespace directory. I'm currently using a workaround where I type the entire namespace path into the image filename field.

— Anonymous 2008/??/?? ??:??

This plugin does not work correctly. As instructed, I used the plugin manager to install this. Installation was successful, but using the code

[{{Image:Image.png|Title}}]

results in the following (with a single box around both text and image, but without box around the text and without the maximize icon on the right of the text):

Title

— Anonymous 2008/??/?? ??:??

Firstly, have you tried Shift+Refresh? And secondly, the maximize icon is not showed when the image is not resized, like Wikipedia.

— FFTiger 2008/12/29 ??:??

I can confirm that the above described functionality is working correctly with the 2008/12/29-release. I had to search for the icon too, so thanks for the explanation…

— Mischa The Evil 2008/12/29 18:05

Version 2009-04-23 Bug: alignment to center does not work. Fix: in file style.css line 19 change

div.tcenter{
to
div.ttcenter{

— MarHaj 23:02 26.05.2009

For me, the alignment to center didn't work, even with the Marhaj's solution. I found a way to repair it:
In the syntax.php, line 35, I replaced:

				$match=Doku_Handler_Parse_Media(substr($match,3));

by:

				$match=Doku_Handler_Parse_Media(substr($match,3,-1));

With the original version, the script takes the syntax «[{{………|» in all case, and verify if the last character is the mark of alignment (space), but it's ever a «|».
In my modification, I delete the «|».

To center a picture, you have to put a space after «[{{» and one other before the «|», that's all!

— Yohann - 10:05 - 06-29-2009

When you have a picture in an imagebox at the last line of a paragraph the edit button does not show up below the imagebox but at the top line of the imagebox. (tested with DokuWiki Release 2009-02-14 and default template) — Ralf 2009/02/23 14:14

Add this code in style.css:

div.dokuwiki div.secedit input.button {
clear:both !important;
}

— myst6re 2009/02/27 18:35

I have installed and refreshed the page and if I use the syntax you specified:

[{{news:imagehere.jpg|caption text}}]

it does not show a box at all, but rather it shows it like below:

Title

Try HARD-refresh (Shift + refresh)
-myst6re

Still doesn't work! -ivan

Limitation: in version available at 6/12/2009 only absolute path for the media-folder are supported.

If $match['src'] would be resolved with resolve_mediaid() even inputs like [{{car.gif|abc}}] (with car.gif is in a parallel media folder) could be displayed.

Fixed
— myst6re 2009/12/06 19:17

$match['title'] is always empty, so the caption gets display:none;. I’ve changed the Parser in the handle function to workaround this:

$match=Doku_Handler_Parse_Media(substr($match.'|',3));

: Yes, this plugin seems to be broken (version 25.12.09) - changing the handle function has to be done in the universal DokuWiki code, not just the plugin folder - so this might brake other functions. - Could someone please fix this bug? (Bernd, 20. Jan 2010)

I fixed my mistake, sorry
— myst6re 2009/21/01 17:15

Thanks, comrade, this was fast, and it works - you are hereby awarded the Order of Glory! (Bernd 23.Jan 2010)

It seems the plugin does not work with linked images.

  [[www.somelink.com|{{www.somelink.com/imageone.jpg}}]]]

But thanks anyway - great idea

You weren't using the right syntax. Here's how it works:

[{{http://exampleimage.jpg|Your caption}}]

The image box is not shown as inline picture, but only as floating box:

  -- item
  .. [{{...}}]
  - ...
  - ...

This will place the second paragraph on the right side of the picture instead of after it (Google Chrome):

Text text text


[{{...}}]


Text text text

Similar problem. If i wrote:

 [{{...|figure1}}]Paragraph 1 right to figure 1
 
 [{{...|figure2}}]Paragraph 2 right to figure 2

and if figure 1 is quite high, it show:

  figure1 paragraph1
  figure1 figure2 paragraph2

instead of

  figure1 paragraph1
  
  figure2 paragraph2

(ribez 2011/04/23)

If used with a img url it displays bos and caption but «Invalid Link» instead of the img.

[]

* Figure numbers based on heading number (if numbered headings installed)

This is ok

 [{{http://upload.wikimedia.org/wikipedia/commons/thumb/1/10/RCA-Studio-II.png/640px-RCA-Studio-II.png|Bild}}]

but not this

 [{{http://upload.wikimedia.org/wikipedia/commons/thumb/1/10/RCA-Studio-II.png/640px-RCA-Studio-II.png|Bild Urheber:}}]

The column kills it with «Invalid Link».

— chris