Fork me on GitHub

image handling

An article by Gaspard Bucher

Zena has advanced image handling possibilities. You just upload your image and it is automatically resized to be displayed in the different context where you use it.

image formats

You define image formats globally for your website using a simple interface:

image formats

You can then use these formats to display images either in templates (see img zafu tag) or inside your articles (see inserting images).

popup

The popup setting lets you define an image format to use as JS popup when the user clicks on the images of the given format. For example, if you set std as popup for pv format, all images shown with the pv format will be clickable and the click will trigger a javascript view of the image with size std like this:

popup_gallery

Example of image display using the popup feature.

If your gallery shows the navigation arrows, your users can also use their keyboard to navigate by using left and right keys. Typing any other character closes the gallery.

You can add configuration options to the “popup” setting by appending either a list of elements to display:

std (navigation,link,v_summary)

or a json hash with some more options:

std {"navigation":true, "v_title":"link", "v_summary":"zazen", "d_camera_info":"raw"}

For those who want to customize the look of the gallery popup, you can change the css of #pg_gallery, eventually adding the class of the trigger image: #pg_gallery.pv (look at zena.css).

video

We have a video related to image handling.