Widget options

The gallery widget (PC_gallery_widget) is quite robust and has many options:

• previewType - Type of thumbnail registered in gallery via admin area. Images of that type will be displayed in preview area. May be empty string to use original image, but it is not recommended since image may be 5MB+ and loading it to show preview to the user is way too much. Defaults to 'large'.
• thumbnailType - Type of thumbnail registered in gallery via admin area. Images of that type will be displayed in thumbnails area. Defaults to 'small'.
• previewMode - Affects how image should be resized to fit preview area. Either 'cover' or 'contain'. Defaults to 'contain'.
• thumbnailMode - Affects how thumbnails should be resized to fit thumbnail area. Either 'cover' or 'contain'. Defaults to 'cover'.
• items - Either string to extract images from or an array of image IDs / paths / URLs.
• extractFrom - Currently loaded page field name ('text', 'info', 'info2' or 'info3'). Defaults to 'text'.
• view - Affects how gallery will look like (what template will be used). Currently only 'bottomThumbs' is available, which is default.
• style - Either 'dark' or 'light'. Default is 'dark'.
• startIndex - What image should gallery start from.
• highlighterMarkup - HTML to be inserted into thumbnail highlighter. Defaults to empty string.

Example

This is an example of embedding a gallery that shows images extracted from pc_shop plugin's product resources.

PHP code for product page template ($this is an instance of PC_controller_pc_shop):

$images = array();
if( $this->currentProduct['resources'] ) {
	foreach( $this->currentProduct['resources']->list as $img )
		if( !$img['is_attachment'] )
			$images[] = $img['file_id'];
}
echo $this->site->Get_widget_text('PC_gallery_widget', array(
	'previewMode' => 'contain',
	'thumbnailMode' => 'cover',
	'items' => $images,
	'style' => 'light',
));

SCSS code that may be used in main theme styles to override default gallery styles:

@import "../../../media/widgets/gallery/css/_mixins.scss";

@include pc_gallery_widget_set_sizes(
	100%, 600px,						// width and height of the widget
	30px, 30px,							// arrow button in thumbs/controls area width and height
	50px, 50px,							// arrow button in preview area width and height
	50px, 50px,							// zoom button width and height
	10px,								// distance of arrows in thumbs/controls area from widget edge
	5px,								// distance of arrows in preview area from widget edge
	10px,								// distance of the zoom button from edges
	120px, 90px,						// width and height of thumbnails
	5px,								// space between thumbnails
	5px,								// space between thumbnails and preview area
	5px,								// space between thumbnails and widget edge (bottom)
	10px,								// space between thumbnails and arrow buttons
	0, 0, 0, 0,							// top, right, bottom and left margins of the image in the preview area
	0, 0, 0, 0							// top, right, bottom and left margins of highlighter within a thumbnail
);

@include pc_gallery_widget_set_style(
	light,								// style name
	none, #FFFFFF,						// border and background of the whole gallery area
	none, transparent,					// border and background of preview area
	none, transparent,					// border and background color of preview image
	none, transparent,					// border and background of thumbs/controls area
	none, transparent,					// border and background color of thumbnail
	3px solid #C0C0C0, transparent,		// border and background of highlighter
	inherit,							// left arrow image in preview area (inherit = use default)
	inherit,							// right arrow image in preview area (inherit = use default)
	inherit,							// zoom button image (inherit = use default)
	inherit,							// left arrow image in thumbs area (inherit = same as in preview area)
	inherit								// right arrow image in thumbs area (inherit = same as in preview area)
);