API

API umožňuje integrovat služby image hostingu 2i - image hosting do stránek, blogů, diskusních for apod. Lze pomocí něj do formuláře přidat tlačítko, které po kliknutí dovolí vybrat soubor z disku, zajistí jeho odeslaní na 2i - image hosting a do určeného prvku formuláře přidá navracený kód pro link na obrázek, případně i pro vložení náhledu.

Příklad implementace

Ukázka HTML (zvýrazněná část je integrace 2i - image hosting)

<form method="post" action="">
  <input type="text" name="title" value="" />
  <textarea name="body" id="target_2i_textarea"></textarea>
  <div class="button2i" id="button_2i_div">vlozit obrazek</div>
  <input type="submit" value="odeslat" />
</form>

<script type="text/javascript" src="http://2i.dfklub.cz/2i/j/api2i.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
  var o2i = new upload2i('button_2i_div', 'target_2i_textarea', 'cs', 'BBCode+thumb');
  o2i.cfgBackURLPath = '2i.html';
/* ]]> */
</script>

Postup základní integrace 2i - image hosting do formuláře

Pokročilá nastavení

Parametry objektu upload2i

object upload2i(string button, string target, string language in (en|cz|cs), string codeType in (id, bbcode, html, xhtml, custom) [, bool crop = false [, bool large = false]])
button
ID tagu DIV, který je jako tlačítko pro upload obrázku
target
ID tagu TEXTAREA, kam je po úspěšném uploadu přidán kód s odkazem na obrázek (případně vč. náhledu)
language
jazyk použitý pro chybové hlášky; výchozí kódování je UTF-8, je-li vaše stránka v jiném kódování, můžete si nadefinovat vlastní texty chybových hlášek, viz. konfigurační parametry
codeType
formát vkládaného kódu
  • id - pouze ID obrázku
  • BBCode - odkaz ve formátu BBCode
  • BBCode+thumb - odkaz ve formátu BBCode s náhledem obrázku
  • HTML - odkaz se otevírá v novém okně
  • HTML+thumb - odkaz s náhledem obrázku
  • XHTML - validní odkaz, otevírá se v novém okně pomocí JavaScriptu
  • XHTML+thumb - vloží odkaz v XHTML s náhledem
  • custom - kód je generován z konfiguračního parametru cfgCustomCode (viz. níže popis parametru)
crop
čtvercový náhled
large
větší náhled (100px vs. 75px)

Konfigurační parametry

cfgBackURLPath
(string) relativní cesta k prázdnému souboru, přes který se vraci ID obrázku, pokud není explicitně nastavena, použije se stránka, na které je formulář umístěn, doporučeno je nastavit na prázdný, ale existujicí, soubor v document_rootu webu, např. 2i.html
cfgCodeType
(string) formát vkládaného kódu
cfgCrop
(bool) čtvercový náhled
cfgCustomCode
(string) vlastní formát vkládaného kódu, před vložením do cílového prvku jsou expandovana makra
  • #thumb# - odkaz náhledu
  • #show# - odkaz obrázku
  • #text# - text odkazu
cfgLarge
(bool) větší náhled (100px vs. 75px)
cfgResetFormAfterUpload
(bool) reset upload formuláře po vložení textu do cíloveho tagu
tBadType
(string) chybová hláška, nepodporovaný typ obrázku
tLinkToImage
(string) text odkazu na obrázek pokud není použit náhled, mapuje se na makro #text# v cfgCustomCode
tUploadError
(string) chybová hláška, při uploadu obrázku se vyskytla chyba

Indikace probíhajícího uploadu, použítí CSS

Vzhled tagu DIV, který slouží jako tlačítko pro vložení obrázku přes 2i - image hosting, je možné libovolně upravovat pomocí CSS. Není však možne do něj ukládat formulářové ovládací prvky (např. INPUT type=BUTTON), kolidovaly by s prvky formulaře a neumožnily by odstartovat výběr souboru.

Při odesílání souboru je k tagu DIV s tlačíkem přidáno classname "uploading2i" a po skončení uploadu (ať úspěšném či s chybou) je opět odstraněno. Lze toho s výhodou využít pro indikaci, že probíhá upload.

Ukázka HTML (zvýrazněná část je zobrazena v průběhu uploadu)

<div class="button2i" id="button_2i_div">Vložit obrázek<span>Nahrává se ...</span></div>

Ukázka CSS

.button2i {
  border: outset 2px #fff;
  font-size: 0.85em;
  height: 20px;
  text-align: center;
  width: 100px;
}
.button2i span {
  background: #efe;
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.uploading2i {
  background: #f00;
}
.uploading2i span {
  display: block;
}