Skip to content

Commit

Permalink
Merge pull request #7 from backdrop-contrib/1.x-1.0.1
Browse files Browse the repository at this point in the history 
1.x 1.0.1
  • Loading branch information
@korontari
korontari committed Oct 10, 2019
2 parents 82b8385 + 0e4c0aa commit 55d6385
Show file tree
Hide file tree
Showing 8 changed files with 167 additions and 71 deletions.
19 changes: 17 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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
-------
Expand Down
1 change: 1 addition & 0 deletions config/mosaic_grid.settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"caption_opacity": 50,
"caption_font_size": 12,
"caption_padding": 10,
"show_empty_images": false,
"lazyload_enabled": true,
"lazyload_edgeY": 0
}
7 changes: 7 additions & 0 deletions css/mosaic_grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
34 changes: 18 additions & 16 deletions js/mosaic_grid.js
View file
Original file line number Diff line number Diff line change
@@ -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);
})(jQuery);
10 changes: 10 additions & 0 deletions mosaic_grid.admin.inc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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']);

Expand Down
2 changes: 1 addition & 1 deletion mosaic_grid.info
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
118 changes: 72 additions & 46 deletions mosaic_grid.module
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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] = '<p>' . $alt_value . '</p>';
}
break;
case 'title':
$title_value = $image_field_value[0]['title'];
if(!empty($title_value)) {
$captions[$i] = '<p>' . $title_value . '</p>';
}
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] = '<p>' . $alt_value . '</p>';
}
break;
case 'title':
$title_value = $image_field_value[0]['title'];
if(!empty($title_value)) {
$captions[$i] = '<p>' . $title_value . '</p>';
}
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;
}
}
}
Expand All @@ -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.
Expand Down
47 changes: 41 additions & 6 deletions views-view-mosaic-grid.tpl.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -15,11 +17,28 @@
<h3><?php print $title; ?></h3>
<?php endif; ?>

<div id="mosaic-grid-gallery">
<div <?php print
// This long string passes settings to Mosaic jquery plugin.
'id="' . $mosaic_id . '" ' .
'data-max-row-height="' . $settings['max_row_height'] . '" ' .
'data-inner-gap="' . $settings['inner_gap'] . '" ' .
'data-outer-margin="' . $settings['outer_margin'] . '" ' .
'data-max-row-height-policy="' . $settings['max_row_height_policy'] . '" ' .
'data-refit-on-resize="' . $settings['refit_on_resize'] . '" ' .
'data-refit-on-resize-delay="' . $settings['refit_on_resize_delay'] . '" ' .
'data-max-rows="' . $settings['max_rows'] . '" ' .
'data-responsive-width-threshold="' . $settings['responsive_width_threshold'] . '" ' .
'data-max-items-to-show-when-responsive-threshold-surpassed="'
. $settings['max_items_threshold_surpassed'] . '" ';
?>>
<?php foreach ($items_rendered as $i => $item): ?>
<div class="mosaic-grid-item" data-aspect-ratio="<?php print $items_ratio[$i] ?>">
<div class="mosaic-grid-loader">&nbsp</div>
<?php print $item; ?>
<?php if($item): ?>
<div class="mosaic-grid-loader">&nbsp</div>
<?php print $item; ?>
<?php else:?>
<div class="mosaic-grid-empty"><?php print t('Image file is missing.');?></div>
<?php endif;?>
<?php if(!empty($captions[$i])): ?>
<div class="mosaic-grid-overlay">
<div class="mosaic-grid-caption">
Expand All @@ -29,4 +48,20 @@
<?php endif;?>
</div>
<?php endforeach; ?>
</div>
</div>

<?php
/*
* The code below is required for views preview to work.
* In preview mode module's scripts are not added so we need to do it manually.
*/
if($view -> editing):
if($settings['caption_style_override']):
backdrop_set_message(t('Mosaic Grid caption style customization is not shown on the preview.'), 'warning');
endif;
?>
<script>
$(window).lazyLoadXT({show: true});
$('#<?php print $mosaic_id ?>').Mosaic();
</script>
<?php endif; ?>

0 comments on commit 55d6385

Please sign in to comment.