Images and Thumbnails

Quanta includes a nice array of functionalities to let you add and edit images in your applications.

Most of those functions are contained into the image core module.

Notably, you can display and manipulated images just by using and extending the dedicated core qTags.


Displaying images

Images can be displayed anywhere in your templates, using the basic [IMG] qTag, and the image path as a target. A WIDTHxHEIGHT attribute can also be used to define the display size of the image.  

Example:

[IMG|300x200:dodo.jpg]

dodo.jpg


Manipulating images

Quanta allows on-the-fly editing and manipulation of images, using a special qTag called [IMGTHUMB]

The [IMGTHUMB] qTag supports several attributes that will allow to automatically scale, crop, change resolution and compression of a given image. 


Example:

[IMGTHUMB|200x200|method=scale|compression=30:dodo.jpg]

dodo

The image has been scaled and cropped to fit into a 200x200 square. Note the lower quality of the image, due to the higher compression level.


All the manipulated images are considered "temporary", and they are created into a temporary folder. This way, the image is only created one time.

When clearing caches with Doctor, all the "temporary" images are deleted altogether, so they will have to be regenerated.  

TIP: the size set in [IMG] merely scales the image through the browser, without modifying it. The size set in [IMGTHUMB] will actually create a manipulated copy of the image


Selecting a node's thumbnail

A node's thumbnail in Quanta is a single image associated to a Node, that is used to identify that node throughout the application.

I.e. the thumbnail is associated to the node when displaying lists, carousel, blog items, etc.

When editing a node, in the Shadow files manager component, once uploaded one or more images you will see a "set as thumbnail" button. Clicking that button allows you to set the image that will act as a thumbnail for the node.

The [THUMBNAIL] qTag (extending the [IMG] qTag) is used to display a node's thumbnail, already linked to the node.

Example:

[THUMBNAIL|200x200:apple]

apple 

The node's thumbnail is stored into the thumbnail variable, in the node's JSON file.


Under the Hood

The class Image.class.php, extending the standard File class, contains all the functions used for manipulating images.

This class could be further extended to obtain very sophisticated effects.