diff --git a/README.md b/README.md index eeaa289..c204d69 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ Mosaic Grid =========== -Mosaic Grid is a Views style plugin that allows to display images in a nice responsive justified grid. +Mosaic Grid is a Views style plugin that allows to display images in a nice responsive justified grid. +Best works as a single large full page image gallery but can also be used as a block and for creating multiple galleries on a single page. Here is a short list of features: - Justified responsive grid layout for images. @@ -31,12 +32,26 @@ Issues ------ Bugs and Feature requests should be reported in the Issue Queue: -https://github.com/backdrop-contrib/mosaic_grid/issues +https://github.com/backdrop-contrib/mosaic-grid/issues + +Known Issues +------------ + +At some circumstances a broken grid is generated. In that case try some of the following: +- Clear cache: Home -> Flush all caches +- Enable 'Refit on Resize' in Mosaic Grid formatter settings in case it was disabled. +- Try a different layout. For instance try Boxton Hero instead of Boxton. +- If you are using customized flexible layout then try setting the container style to maximum or full width. +- Try using a different Theme if you can. + +Please report your case with as much details as possible: +https://github.com/backdrop-contrib/mosaic_grid/issues/6 Current Maintainers ------------------- - Pavel (https://github.com/korontari) +- Co-maintainers are welcome. Credits ------- diff --git a/config/mosaic_grid.settings.json b/config/mosaic_grid.settings.json index 559be8b..f642325 100644 --- a/config/mosaic_grid.settings.json +++ b/config/mosaic_grid.settings.json @@ -7,6 +7,7 @@ "caption_opacity": 50, "caption_font_size": 12, "caption_padding": 10, + "show_empty_images": false, "lazyload_enabled": true, "lazyload_edgeY": 0 } \ No newline at end of file diff --git a/css/mosaic_grid.css b/css/mosaic_grid.css index 867dc35..16f8d0f 100644 --- a/css/mosaic_grid.css +++ b/css/mosaic_grid.css @@ -43,6 +43,13 @@ margin: 0; } +.mosaic-grid-empty { + text-align: center; + margin-top: 45%; + width: 100%; + color: red; +} + /* hide captions on small and touch screens */ @media only screen and (max-width: 992px), (any-hover: none) { .mosaic-grid-caption { diff --git a/js/mosaic_grid.js b/js/mosaic_grid.js index 934851f..2140028 100644 --- a/js/mosaic_grid.js +++ b/js/mosaic_grid.js @@ -1,29 +1,31 @@ /** * @file - * Sets options and starts Mosaic Grid script. + * Sets options for lazyLoadXT plugin. */ (function($) { Backdrop.behaviors.mosaic_grid = { attach: function (context, settings) { - $.extend($.lazyLoadXT, { edgeY: settings.mosaic_grid.lazyload_edgeY, + + // Modified onload function that removes loader. + onload: function() { + // Basic functionality that shows image after it is loaded. + $(this).removeClass('lazy-hidden'); + $(this).addClass('lazy-loaded'); + // Seek for item DIV that should be a parent for the image. + var itemDiv = $(this).parent(); + if(!itemDiv.hasClass('mosaic-grid-item')) { + // In case image(IMG) is wrapped in a link(A) we need + // to move one step higher in hierarchy. + itemDiv = itemDiv.parent(); + } + // Delete loader DIV that is a children of the item. + itemDiv.children('.mosaic-grid-loader').remove(); + }, }); - - $('#mosaic-grid-gallery').Mosaic({ - maxRowHeightPolicy: settings.mosaic_grid.max_row_height_policy, - maxRowHeight: Number(settings.mosaic_grid.max_row_height), - innerGap: Number(settings.mosaic_grid.inner_gap), - outerMargin: Number(settings.mosaic_grid.outer_margin), - maxRows: Number(settings.mosaic_grid.max_rows), - refitOnResize: settings.mosaic_grid.refit_on_resize, - refitOnResizeDelay: Number(settings.mosaic_grid.refit_on_resize_delay), - responsiveWidthThreshold: Number(settings.mosaic_grid.responsive_width_threshold), - maxItemsToShowWhenResponsiveThresholdSurpassed: Number(settings.mosaic_grid.max_items_threshold_surpassed), - }); - } }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/mosaic_grid.admin.inc b/mosaic_grid.admin.inc index d018c56..bb76010 100644 --- a/mosaic_grid.admin.inc +++ b/mosaic_grid.admin.inc @@ -110,6 +110,15 @@ function mosaic_grid_admin_form($form, &$form_state) { ), ), ); + + $form['appearance']['show_empty_images'] = array( + '#type' => 'checkbox', + '#title' => t('Show empty images'), + '#description' => t("Enable this to show empty space with warning for images + that have their file missing. By default such images are ignored and + not displayed in the grid."), + '#default_value' => $config->get('show_empty_images'), + ); $form['lazyload'] = array( '#type' => 'fieldset', @@ -168,6 +177,7 @@ function mosaic_grid_admin_form_submit($form, &$form_state) { $config->set('caption_opacity', $form_state['values']['caption_opacity']); $config->set('caption_padding', $form_state['values']['caption_padding']); $config->set('caption_font_size', $form_state['values']['caption_font_size']); + $config->set('show_empty_images', $form_state['values']['show_empty_images']); $config->set('lazyload_enabled', $form_state['values']['lazyload_enabled']); $config->set('lazyload_edgeY', $form_state['values']['lazyload_edgeY']); diff --git a/mosaic_grid.info b/mosaic_grid.info index 38b0c98..66ebc25 100644 --- a/mosaic_grid.info +++ b/mosaic_grid.info @@ -3,6 +3,6 @@ description = Provides views style plugin for building image galleries layed out backdrop = 1.x package = Views type = module -version = 1.x-1.0.0 +version = 1.x-1.0.1 dependencies[] = views configure = admin/config/media/mosaic_grid diff --git a/mosaic_grid.module b/mosaic_grid.module index 103638a..1b5db17 100644 --- a/mosaic_grid.module +++ b/mosaic_grid.module @@ -123,36 +123,46 @@ function template_preprocess_views_view_mosaic_grid(&$vars) { // Process each item(row). for($i = 0; $i < $rows; $i++) { - // Store rendered image field. - $items_rendered[] = $style_plugin->get_field($i, $image_field_name); // Get raw image fields value. $image_field_value = $style_plugin->get_field_value($i, $image_field_name); - // Calcualte image size ratio based on provided width and height. - // It is assumed that image field has a single value. + // Get width and height of an image. + // It is assumed that image field has one value. $width = $image_field_value[0]['width']; $height = $image_field_value[0]['height']; - $items_ratio[$i] = $width / $height; - - // If caption source is set then store captions. - switch($options['caption']) { - case 'alt': - $alt_value = $image_field_value[0]['alt']; - if(isset($alt_value) && $alt_value != '') { - $captions[$i] = '

' . $alt_value . '

'; - } - break; - case 'title': - $title_value = $image_field_value[0]['title']; - if(!empty($title_value)) { - $captions[$i] = '

' . $title_value . '

'; - } - break; - case 'text': - if(isset($text_field_name)){ - // Assign rendered text field as caption. - $captions[$i] = $style_plugin->get_field($i, $text_field_name); - } - break; + // Check that image width and height are not zero. + // Zero height/width may indicate that image file is missing. In that + // case just ignore it. + if($width > 0 && $height > 0) { + // Calcualte and store image size ratio. + $items_ratio[$i] = $width / $height; + // Store rendered image field. + $items_rendered[$i] = $style_plugin->get_field($i, $image_field_name); + + // If caption source is set then store captions. + switch($options['caption']) { + case 'alt': + $alt_value = $image_field_value[0]['alt']; + if(isset($alt_value) && $alt_value != '') { + $captions[$i] = '

' . $alt_value . '

'; + } + break; + case 'title': + $title_value = $image_field_value[0]['title']; + if(!empty($title_value)) { + $captions[$i] = '

' . $title_value . '

'; + } + break; + case 'text': + if(isset($text_field_name)){ + // Assign rendered text field as caption. + $captions[$i] = $style_plugin->get_field($i, $text_field_name); + } + break; + } + } + elseif ($config->get('show_empty_images')) { + $items_ratio[$i] = 1; + $items_rendered[$i] = FALSE; } } } @@ -167,35 +177,51 @@ function template_preprocess_views_view_mosaic_grid(&$vars) { $vars['items_rendered'] = $items_rendered; $vars['items_ratio'] = $items_ratio; $vars['captions'] = $captions; + // Generate unique id for the mosaic grid. + $vars['mosaic_id'] = 'mosaic-' . $view->name . '-' . $view->current_display; + // Store js plugins settings. + $vars['settings'] = array( + 'max_row_height' => $options['max_row_height'], + 'inner_gap' => $options['inner_gap'], + 'outer_margin' => $options['outer_margin'], + 'max_row_height_policy' => $options['max_row_height_policy'], + 'refit_on_resize' => $options['more']['refit_on_resize'], + 'refit_on_resize_delay' => $options['more']['refit_on_resize_delay'], + 'max_rows' => $options['more']['max_rows'], + 'responsive_width_threshold' => $options['more']['responsive_width_threshold'], + 'max_items_threshold_surpassed' => $options['more']['max_items_threshold_surpassed'], + 'show_tail_when_not_enough_items' => $options['more']['show_tail_when_not_enough_items'], + 'caption_style_override' => $config->get('caption_style_override'), + ); + + // Create js settings array. + $js_settings = array ( + 'mosaic_grid' => array( + 'lazyload_edgeY' => $config->get('lazyload_edgeY'), + ), + ); // Get module's directory. $module_dir = backdrop_get_path('module', 'mosaic_grid'); - // Add mosaic and lazy load jQuery libraries. + // Add Mosaic and lazyLoadXt jQuery libraries. backdrop_add_library('mosaic_grid', 'mosaic', FALSE); backdrop_add_library('mosaic_grid', 'lazyloadxt', FALSE); - // Set module's script settings from the style plugin options and module configuration. - $js_settings = array ( - 'mosaic_grid' => array( - 'max_row_height' => $options['max_row_height'], - 'inner_gap' => $options['inner_gap'], - 'outer_margin' => $options['outer_margin'], - 'max_row_height_policy' => $options['max_row_height_policy'], - 'refit_on_resize' => $options['more']['refit_on_resize'], - 'refit_on_resize_delay' => $options['more']['refit_on_resize_delay'], - 'max_rows' => $options['more']['max_rows'], - 'responsive_width_threshold' => $options['more']['responsive_width_threshold'], - 'max_items_threshold_surpassed' => $options['more']['max_items_threshold_surpassed'], - 'show_tail_when_not_enough_items' => $options['more']['show_tail_when_not_enough_items'], - 'lazyload_edgeY' => $config->get('lazyload_edgeY'), - ), - ); + // Add settings and load js to initiate lazyLoad plugin. backdrop_add_js($js_settings, 'setting'); - - // Load module's script and styles. - // Script will launch the plugins with the proper settings. backdrop_add_js($module_dir . '/js/mosaic_grid.js'); + + // Add script that initiates jquery Mosaic plugin to build the grid. + // Inline mode is used to ensure that script is added for every mosaic + // grid instance on a single page. + backdrop_add_js('$(function () { + $("#' . $vars['mosaic_id'] . '").Mosaic(); + });', + 'inline' + ); + + // Load module's script and styles. backdrop_add_css($module_dir . '/css/mosaic_grid.css'); // Check loader style setting. diff --git a/views-view-mosaic-grid.tpl.php b/views-view-mosaic-grid.tpl.php index e4bb985..19f14d8 100644 --- a/views-view-mosaic-grid.tpl.php +++ b/views-view-mosaic-grid.tpl.php @@ -3,9 +3,11 @@ * @file * Template for the Mosaic Grid style. * - * - $items_rendered contains an array of images to display. + * - $items_rendered array of images to display. * - $items_ratio array containing size ratio for each image. - * - $captions array with captions for each image. + * - $captions array with captions for images. + * - $mosaic_id unique id for this mosaic grid instance. + * - $settings array with Mosaic plugin settings. * * @ingroup views_templates */ @@ -15,11 +17,28 @@

-