Include media

Add media resources to your blog entries

add YouTube or Vimeo resources to your journal entries

add Podcasts

add Images or an image gallery

You can simply upload images in the images tab of your journal entry detail and they will be displayed as a image gallery at the bottom of the entry in the full entry view.

prettyPhoto slide show

In order to present them like a slideshow you have to include the following files and code into your blog main template.

Let's use prettyPhoto (you can take any lightbox application) PrettyPhoto website

• add prettyPhoto.js in your site/web/js dir (currently we use 3.1.2) and add the resource to the head of your template
• add prettyPhoto.css into your site/web/css dir and add the resource to the head of your template
• add prettyPhoto images dir to your site/web/images directory
• add a js file with the following code into your site/web/js dir and include it into the head of your template

js file with initialize code

• make sure the name "gallery" is used in the rel attribute of the link in the gallery_item template
• choose your theme
• etc. PrettyPhoto documentation

jQuery(document).ready(function() {
	jQuery("a[rel^='gallery']").each(function() {
		this.href = this.href.replace('&', '&');
	}).prettyPhoto({
		social_tools: false,
		deeplinking: false,
		opacity: 0.60,
		showTitle: true,
		/* 'pp_default' / light_rounded / dark_rounded / light_square / dark_square / facebook */
		theme: 'pp_default',
		overlay_gallery: false,
		allow_resize: true
	});
});

Simple image view

If you do not want to do any slide show and display a or multiple images in a normal way at the bottom of your journal entry, then you just

• define the max_width param in your template and add title or alt tag to the img tag, and you remove the link code
• and or define the size of the images in you style sheet.

<img src="{{url}}?max_width=500" title="your title" alt="your alt tag" />"

Use your own template and js

You can use your own templates by adding the following templates to a directory in your site/templates dir:

• gallery.tmpl (make sure that the identifier "{{items;templateFlag=NO_NEWLINE}}" is part of the new template)
• gallery_item.tmpl (make sure that the identifier "{{url}}, {{description}}" is part of the new template)

Follow the instructions in the prettyPhoto example to add the required resources for your custom made solution