アーティクルで画像を<img>タグで出力する

  • このエントリーをはてなブックマークに追加
アーティクルでは画像を変数だけではなく<img>タグで出力することが出来ます。

<img>タグで出力することが出来るとclassを付与したり、jsを組み合わせたりと便利です。

変数を使う場合の説明

元々用意されている変数の場合下記の記述になります。

 

[*image(@id,'コード',@コード,幅,高さ,縮小モード,縮小時塗りつぶし色)*]


例(入力項目が"image"の場合):
[*image(@id,'image',@image,100,100,3,'ffffff')*]

タグで出力する方法

<img>タグで出力する方法は実に簡単です。

 

<img src="/_img/ja/article/[*@id*]/@コード/幅_高さ_縮小モード_縮小時塗りつぶし色/">

例(入力項目が"image"の場合):
<img src="/_img/ja/article/[*@id*]/image/100_100_1_000000/">

 

リサイズ機能が不要な場合は該当箇所を消しても出力されます。

<img src="/_img/ja/article/[*@id*]/image/">

まとめ

<img>タグを利用できる事でid、class、alt、の付与はもちろん、

jsを組み合わせて画像をポップアップさせたり、スライドさせたりと、

アーティクルからの入稿でも動きをつけることが可能になります。

 

簡単ですので是非トライしてみて下さい。

トトロ/プロダクト部 フロントエンド・エンジニアチーム

ガーディアンでは生産スケジュールを管理しながら制作を行っています。

チャーハン大好き。

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

那覇よくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 10:00~18:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>