2i - image hosting
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="https://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
- Formulář doplňte o tag DIV, který bude reprezentovat tlačítko.
- Nelze použít přímo tag INPUT type=BUTTON, docházelo by ke kolizi s původním formulářem.
- Vzhled tagu DIV s tlačítkem je možné libovolně upravit pomoci CSS.
- Tagu formuláře, do kterého se má zapsat navrácený kód, přiřaďte ID (v příkladu výše je to target_2i_textarea).
- Vložte JavaScript, který nahraje API z https://2i.dfklub.cz/2i/j/api2i.js. Můžete vložit přímo do tagu HEAD.
- Vložte JavaScript, který instancuje objekt upload2i s ID tagu tlačítka, ID tagu cílového pole, kódem jazyka a požadovaným formátem odkazu.
- var o2i = new upload2i('button_2i_div', 'target_2i_textarea', 'cs', 'BBCode+thumb')
- Musí být za definicí formuláře, např. na konci stránky před tagem </BODY>.
- Vytvořte na serveru prázdný soubor, např. 2i.html a zapište relativní cestu k němu do cfgBackURLPath.
- 2i.cfgBackURLPath = '2i.html'
- Po uploadu je skrze redirekt na tento soubor předáno ID obrázku z 2i - image hosting.
- Pokud cestu k souboru neuvedete, použije se stránka, ve které je kód vložen, to může kolidovat např. s počítadlem shlédnutí apod.
- Uvedete-li odkaz na neexistující soubor, nebude v prohlížeči Internet Explorer fungovat automatické vkládání kódu do prvku formuláře.
- Vyzkoušejte.
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;
}