File: /var/www/vhosts/uyarreklam.com.tr/httpdocs/simple-masonry.tar
assets/banner.svg 0000644 00000001012 15154021566 0010033 0 ustar 00 <svg enable-background="new 0 0 120 120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h120v120h-120z" fill="#1880b6"/><g stroke="#324249" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><g fill="#8ed9ef"><path d="m32 60h16v28h-16z"/><path d="m72 50h16v24h-16z"/><path d="m52 74h16v14h-16z"/></g><path d="m32 32h16v24h-16z" fill="#f2f0da"/><path d="m72 32h16v14h-16z" fill="#f2f0da"/><path d="m72 78h16v10h-16z" fill="#f2f0da"/><path d="m52 32h16v38h-16z" fill="#8ed9ef"/></g></svg> assets/icon.svg 0000644 00000001557 15154021566 0007534 0 ustar 00 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m3.44434 13.97168h6.84668c.41406 0 .75-.33594.75-.75v-9.88477c0-.41406-.33594-.75-.75-.75h-6.84668c-.41406 0-.75.33594-.75.75v9.88477c0 .41406.33594.75.75.75zm.75-9.88477h5.34668v8.38477h-5.34668z"/><path d="m2.69434 20.66309c0 .41406.33594.75.75.75h6.84668c.41406 0 .75-.33594.75-.75v-4.1582c0-.41406-.33594-.75-.75-.75h-6.84668c-.41406 0-.75.33594-.75.75zm1.5-3.40821h5.34668v2.6582h-5.34668z"/><path d="m12.95898 20.66309c0 .41406.33594.75.75.75h6.84668c.41406 0 .75-.33594.75-.75v-9.88477c0-.41406-.33594-.75-.75-.75h-6.84668c-.41406 0-.75.33594-.75.75zm1.5-9.13477h5.34668v8.38477h-5.34668z"/><path d="m13.70898 8.24512h6.84668c.41406 0 .75-.33594.75-.75v-4.15821c0-.41406-.33594-.75-.75-.75h-6.84668c-.41406 0-.75.33594-.75.75v4.1582c0 .41406.33594.75.75.75zm.75-4.15821h5.34668v2.6582h-5.34668z"/></svg> js/simple-masonry.js 0000644 00000006027 15154021566 0010507 0 ustar 00 /* globals jQuery, packery, sowb */
var sowb = window.sowb || {};
jQuery( function ( $ ) {
sowb.setupSimpleMasonries = function () {
var $grid = $( '.sow-masonry-grid' );
if ( $grid.data( 'initialized' ) ) {
return $grid;
}
var resizeMasonry = function () {
$grid.each( function () {
var $gridEl = $( this );
var layouts = $gridEl.data( 'layouts' );
var tabletQuery = window.matchMedia( '(max-width: ' + layouts.tablet.breakPoint + 'px)' );
var mobileQuery = window.matchMedia( '(max-width: ' + layouts.mobile.breakPoint + 'px)' );
var layout = layouts.desktop;
if ( mobileQuery.matches ) {
layout = layouts.mobile;
} else if ( tabletQuery.matches ) {
layout = layouts.tablet;
}
var numColumns = layout.numColumns;
$gridEl.css( 'width', 'auto' );
var horizontalGutterSpace = layout.gutter * ( numColumns - 1 );
var columnWidth = ( $gridEl.width() - ( horizontalGutterSpace ) ) / numColumns;
$gridEl.width( ( columnWidth * numColumns ) + horizontalGutterSpace );
$gridEl.imagesLoaded( function () {
$gridEl.find( '> .sow-masonry-grid-item' ).each( function () {
var $$ = $( this );
var colSpan = $$.data( 'colSpan' );
colSpan = Math.max( Math.min( colSpan, layout.numColumns ), 1 );
$$.width( ( columnWidth * colSpan ) + ( layout.gutter * ( colSpan - 1 ) ) );
var rowSpan = $$.data( 'rowSpan' );
rowSpan = Math.max( Math.min( rowSpan, layout.numColumns ), 1 );
//Use rowHeight if non-zero else fall back to matching columnWidth.
var rowHeight = layout.rowHeight || columnWidth;
$$.css( 'height', ( rowHeight * rowSpan ) + ( layout.gutter * ( rowSpan - 1 ) ) + 'px' );
var $img = $$.find( '> img,> a > img' );
// If this image has a title present, increase row height for it.
var heightSet = false;
if ( $$.find( '.image-title' ) ) {
var title_height = parseInt( $$.find( '.image-title' ).outerHeight() );
if ( ! isNaN( title_height ) ) {
rowHeight += title_height;
$$.find( '.sow-masonry-grid-image' ).css( 'height', 'calc( 100% - ' + title_height + 'px)' );
heightSet = true;
}
}
$img.css( 'height', heightSet ? $$.height() - title_height : $$.height() + 'px' );
} );
$gridEl.packery( {
itemSelector: '.sow-masonry-grid-item',
columnWidth: columnWidth,
gutter: layout.gutter,
originLeft: $gridEl.data( 'layout-origin-left' ),
transitionDuration: 0,
} );
// If preloader is present, remove and show masonry
if ( $grid.prev( '.sow-masonry-grid-preloader' ).length ) {
$grid.prev().remove()
$grid.css( 'opacity', 1 );
}
} );
} );
};
$( window ).on( 'load resize panelsStretchRows', resizeMasonry ).trigger( 'resize' );
// Attempt to resize the masonry early.
setTimeout( function () {
resizeMasonry();
}, 100 );
$grid.data( 'initialized', true );
};
sowb.setupSimpleMasonries();
$( sowb ).on( 'setup_widgets', sowb.setupSimpleMasonries );
} );
window.sowb = sowb;
js/simple-masonry.min.js 0000644 00000002756 15154021566 0011276 0 ustar 00 var sowb=window.sowb||{};jQuery((function(i){sowb.setupSimpleMasonries=function(){var t=i(".sow-masonry-grid");if(t.data("initialized"))return t;var a=function(){t.each((function(){var a=i(this),e=a.data("layouts"),o=window.matchMedia("(max-width: "+e.tablet.breakPoint+"px)"),n=window.matchMedia("(max-width: "+e.mobile.breakPoint+"px)"),s=e.desktop;n.matches?s=e.mobile:o.matches&&(s=e.tablet);var r=s.numColumns;a.css("width","auto");var d=s.gutter*(r-1),m=(a.width()-d)/r;a.width(m*r+d),a.imagesLoaded((function(){a.find("> .sow-masonry-grid-item").each((function(){var t=i(this),a=t.data("colSpan");a=Math.max(Math.min(a,s.numColumns),1),t.width(m*a+s.gutter*(a-1));var e=t.data("rowSpan");e=Math.max(Math.min(e,s.numColumns),1);var o=s.rowHeight||m;t.css("height",o*e+s.gutter*(e-1)+"px");var n=t.find("> img,> a > img"),r=!1;if(t.find(".image-title")){var d=parseInt(t.find(".image-title").outerHeight());isNaN(d)||(o+=d,t.find(".sow-masonry-grid-image").css("height","calc( 100% - "+d+"px)"),r=!0)}n.css("height",r?t.height()-d:t.height()+"px")})),a.packery({itemSelector:".sow-masonry-grid-item",columnWidth:m,gutter:s.gutter,originLeft:a.data("layout-origin-left"),transitionDuration:0}),t.prev(".sow-masonry-grid-preloader").length&&(t.prev().remove(),t.css("opacity",1))}))}))};i(window).on("load resize panelsStretchRows",a).trigger("resize"),setTimeout((function(){a()}),100),t.data("initialized",!0)},sowb.setupSimpleMasonries(),i(sowb).on("setup_widgets",sowb.setupSimpleMasonries)})),window.sowb=sowb; simple-masonry.php 0000644 00000042115 15154021566 0010244 0 ustar 00 <?php
/*
Widget Name: Simple Masonry Layout
Description: Display images in an attractive masonry grid with adjustable columns, gutters, and optional captions.
Author: SiteOrigin
Author URI: https://siteorigin.com
Documentation: https://siteorigin.com/widgets-bundle/simple-masonry-widget/
*/
class SiteOrigin_Widget_Simple_Masonry_Widget extends SiteOrigin_Widget {
public function __construct() {
parent::__construct(
'sow-simple-masonry',
__( 'SiteOrigin Simple Masonry', 'so-widgets-bundle' ),
array(
'description' => __( 'Display images in an attractive masonry grid with adjustable columns, gutters, and optional captions.', 'so-widgets-bundle' ),
'help' => 'https://siteorigin.com/widgets-bundle/simple-masonry-widget/',
),
array(),
false,
plugin_dir_path( __FILE__ )
);
}
public function initialize() {
$this->register_frontend_scripts(
array(
array(
'sow-simple-masonry',
siteorigin_widget_get_plugin_dir_url( 'sow-simple-masonry' ) . 'js/simple-masonry' . SOW_BUNDLE_JS_SUFFIX . '.js',
array( 'jquery', 'dessandro-imagesLoaded', 'dessandro-packery' ),
SOW_BUNDLE_VERSION,
),
)
);
}
public function get_widget_form() {
return array(
'widget_title' => array(
'type' => 'text',
'label' => __( 'Title', 'so-widgets-bundle' ),
),
'items' => array(
'type' => 'repeater',
'label' => __( 'Images', 'so-widgets-bundle' ),
'item_label' => array(
'selectorArray' => array(
array(
'selector' => "[id*='title']",
'valueMethod' => 'val',
),
array(
'selector' => '.media-field-wrapper .current .title',
'valueMethod' => 'html',
),
),
),
'fields' => array(
'image' => array(
'type' => 'media',
'label' => __( 'Image', 'so-widgets-bundle' ),
'fallback' => true,
),
'column_span' => array(
'type' => 'slider',
'label' => __( 'Column span', 'so-widgets-bundle' ),
'description' => __( 'Number of columns this item should span. (Limited to number of columns selected in Layout section below.)', 'so-widgets-bundle' ),
'min' => 1,
'max' => 10,
'default' => 1,
),
'row_span' => array(
'type' => 'slider',
'label' => __( 'Row span', 'so-widgets-bundle' ),
'description' => __( 'Number of rows this item should span. (Limited to number of columns selected in Layout section below.)', 'so-widgets-bundle' ),
'min' => 1,
'max' => 10,
'default' => 1,
),
'title' => array(
'type' => 'text',
'label' => __( 'Title', 'so-widgets-bundle' ),
),
'url' => array(
'type' => 'link',
'label' => __( 'Destination URL', 'so-widgets-bundle' ),
),
'new_window' => array(
'type' => 'checkbox',
'default' => false,
'label' => __( 'Open in a new window', 'so-widgets-bundle' ),
),
),
),
'preloader' => array(
'type' => 'section',
'label' => __( 'Preloader', 'so-widgets-bundle' ),
'default' => true,
'hide' => true,
'fields' => array(
'enabled' => array(
'type' => 'checkbox',
'label' => __( 'Enable preloader', 'so-widgets-bundle' ),
),
'color' => array(
'type' => 'color',
'label' => __( 'Preloader icon color', 'so-widgets-bundle' ),
'default' => '#232323',
),
'height' => array(
'type' => 'measurement',
'label' => __( 'Preloader height', 'so-widgets-bundle' ),
'default' => '250px',
'description' => __( 'The size of the preloader prior to the Masonry images showing.', 'so-widgets-bundle' ),
),
),
),
'title' => array(
'type' => 'section',
'label' => __( 'Image Title', 'so-widgets-bundle' ),
'hide' => true,
'fields' => array(
'display' => array(
'type' => 'checkbox',
'label' => __( 'Display Image Title', 'so-widgets-bundle' ),
'state_emitter' => array(
'callback' => 'conditional',
'args' => array(
'title_display[show]: val',
'title_display[hide]: ! val',
),
),
),
'position' => array(
'type' => 'select',
'label' => __( 'Title Position', 'so-widgets-bundle' ),
'default' => 'below',
'options' => array(
'above' => __( 'Above Image', 'so-widgets-bundle' ),
'below' => __( 'Below Image', 'so-widgets-bundle' ),
),
'state_handler' => array(
'title_display[show]' => array( 'show' ),
'title_display[hide]' => array( 'hide' ),
),
),
'alignment' => array(
'type' => 'select',
'label' => __( 'Title Alignment', 'so-widgets-bundle' ),
'default' => 'center',
'options' => array(
'left' => __( 'Left', 'so-widgets-bundle' ),
'center' => __( 'Center', 'so-widgets-bundle' ),
'right' => __( 'Right', 'so-widgets-bundle' ),
),
'state_handler' => array(
'title_display[show]' => array( 'show' ),
'title_display[hide]' => array( 'hide' ),
),
),
'font' => array(
'type' => 'font',
'label' => __( 'Title Font', 'so-widgets-bundle' ),
'state_handler' => array(
'title_display[show]' => array( 'show' ),
'title_display[hide]' => array( 'hide' ),
),
),
'font_size' => array(
'type' => 'measurement',
'label' => __( 'Title Font Size', 'so-widgets-bundle' ),
'default' => '0.9rem',
'state_handler' => array(
'title_display[show]' => array( 'show' ),
'title_display[hide]' => array( 'hide' ),
),
),
'color' => array(
'type' => 'color',
'label' => __( 'Title Color', 'so-widgets-bundle' ),
'state_handler' => array(
'title_display[show]' => array( 'show' ),
'title_display[hide]' => array( 'hide' ),
),
),
'padding' => array(
'type' => 'color',
'label' => __( 'Title Padding', 'so-widgets-bundle' ),
'type' => 'multi-measurement',
'autofill' => true,
'default' => '5px 0px 10px 0px',
'measurements' => array(
'top' => array(
'label' => __( 'Top', 'so-widgets-bundle' ),
),
'right' => array(
'label' => __( 'Right', 'so-widgets-bundle' ),
),
'bottom' => array(
'label' => __( 'Bottom', 'so-widgets-bundle' ),
),
'left' => array(
'label' => __( 'Left', 'so-widgets-bundle' ),
),
),
'state_handler' => array(
'title_display[show]' => array( 'show' ),
'title_display[hide]' => array( 'hide' ),
),
),
),
),
'layout' => array(
'type' => 'section',
'label' => __( 'Layout', 'so-widgets-bundle' ),
'fields' => array(
'origin_left' => array(
'type' => 'select',
'label' => __( 'Origin', 'so-widgets-bundle' ),
'description' => __( 'Controls the horizontal flow of the layout. Items can either start positioned on the left or right.', 'so-widgets-bundle' ),
'default' => 'true',
'options' => array(
'true' => __( 'Left', 'so-widgets-bundle' ),
'false' => __( 'Right', 'so-widgets-bundle' ),
),
),
'desktop' => array(
'type' => 'section',
'label' => __( 'Desktop', 'so-widgets-bundle' ),
'fields' => array(
'columns' => array(
'type' => 'slider',
'label' => __( 'Number of columns', 'so-widgets-bundle' ),
'min' => 1,
'max' => 10,
'default' => 4,
),
'row_height' => array(
'type' => 'number',
'label' => __( 'Row height', 'so-widgets-bundle' ),
'description' => __( 'Leave blank to match calculated column width.', 'so-widgets-bundle' ),
),
'gutter' => array(
'type' => 'number',
'label' => __( 'Gutter', 'so-widgets-bundle' ),
'description' => __( 'Space between masonry items.', 'so-widgets-bundle' ),
),
),
),
'tablet' => array(
'type' => 'section',
'label' => __( 'Tablet', 'so-widgets-bundle' ),
'hide' => true,
'fields' => array(
'break_point' => array(
'type' => 'number',
'lanel' => __( 'Breakpoint', 'so-widgets-bundle' ),
'description' => __( 'Device width, in pixels, at which to collapse into a tablet view.', 'so-widgets-bundle' ),
'default' => 768,
),
'columns' => array(
'type' => 'slider',
'label' => __( 'Number of columns', 'so-widgets-bundle' ),
'min' => 1,
'max' => 10,
'default' => 2,
),
'row_height' => array(
'type' => 'number',
'label' => __( 'Row height', 'so-widgets-bundle' ),
'description' => __( 'Leave blank to match calculated column width.', 'so-widgets-bundle' ),
),
'gutter' => array(
'type' => 'number',
'label' => __( 'Gutter', 'so-widgets-bundle' ),
'description' => __( 'Space between masonry items.', 'so-widgets-bundle' ),
),
),
),
'mobile' => array(
'type' => 'section',
'label' => __( 'Mobile', 'so-widgets-bundle' ),
'hide' => true,
'fields' => array(
'break_point' => array(
'type' => 'number',
'lanel' => __( 'Breakpoint', 'so-widgets-bundle' ),
'description' => __( 'Device width, in pixels, at which to collapse into a mobile view.', 'so-widgets-bundle' ),
'default' => 480,
),
'columns' => array(
'type' => 'slider',
'label' => __( 'Number of columns', 'so-widgets-bundle' ),
'min' => 1,
'max' => 10,
'default' => 1,
),
'row_height' => array(
'type' => 'number',
'label' => __( 'Row height', 'so-widgets-bundle' ),
'description' => __( 'Leave blank to match calculated column width.', 'so-widgets-bundle' ),
),
'gutter' => array(
'type' => 'number',
'label' => __( 'Gutter', 'so-widgets-bundle' ),
'description' => __( 'Space between masonry items.', 'so-widgets-bundle' ),
),
),
),
),
),
);
}
public function get_template_variables( $instance, $args ) {
$items = isset( $instance['items'] ) ? (array) $instance['items'] : array();
foreach ( $items as &$item ) {
$item['link_attributes'] = array();
if ( ! empty( $item['new_window'] ) ) {
$item['link_attributes']['target'] = '_blank';
$item['link_attributes']['rel'] = 'noopener noreferrer';
}
$item['title'] = $this->get_image_title( $item );
}
return array(
'args' => $args,
'items' => $items,
'preloader_enabled' => ! empty( $instance['preloader']['enabled'] ) ? true : false,
'layout_origin_left' => ! empty( $instance['layout']['origin_left'] ) ? $instance['layout']['origin_left'] : 'true',
'layouts' => array(
'desktop' => siteorigin_widgets_underscores_to_camel_case(
array(
'num_columns' => empty( $instance['layout']['desktop']['columns'] ) ? 3 : $instance['layout']['desktop']['columns'],
'row_height' => empty( $instance['layout']['desktop']['row_height'] ) ? 0 : (int) $instance['layout']['desktop']['row_height'],
'gutter' => empty( $instance['layout']['desktop']['gutter'] ) ? 0 : (int) $instance['layout']['desktop']['gutter'],
)
),
'tablet' => siteorigin_widgets_underscores_to_camel_case(
array(
'break_point' => empty( $instance['layout']['tablet']['columns'] ) ? '768px' : $instance['layout']['tablet']['break_point'],
'num_columns' => empty( $instance['layout']['tablet']['columns'] ) ? 2 : $instance['layout']['tablet']['columns'],
'row_height' => empty( $instance['layout']['tablet']['row_height'] ) ? 0 : (int) $instance['layout']['tablet']['row_height'],
'gutter' => empty( $instance['layout']['tablet']['gutter'] ) ? 0 : (int) $instance['layout']['tablet']['gutter'],
)
),
'mobile' => siteorigin_widgets_underscores_to_camel_case(
array(
'break_point' => empty( $instance['layout']['mobile']['columns'] ) ? '480px' : $instance['layout']['mobile']['break_point'],
'num_columns' => empty( $instance['layout']['mobile']['columns'] ) ? 1 : $instance['layout']['mobile']['columns'],
'row_height' => empty( $instance['layout']['mobile']['row_height'] ) ? 0 : (int) $instance['layout']['mobile']['row_height'],
'gutter' => empty( $instance['layout']['mobile']['gutter'] ) ? 0 : (int) $instance['layout']['mobile']['gutter'],
)
),
),
);
}
/**
* Try to figure out an image's title for display.
*
* @return string The title of the image.
*/
private function get_image_title( $image ) {
if ( ! empty( $image['title'] ) ) {
$title = $image['title'];
} elseif ( apply_filters( 'siteorigin_widgets_auto_title', true, 'sow-simple-masonry' ) ) {
$title = wp_get_attachment_caption( $image['image'] );
if ( empty( $title ) ) {
// We do not want to use the default image titles as they're based on the file name without the extension
$file_name = pathinfo( get_post_meta( $image['image'], '_wp_attached_file', true ), PATHINFO_FILENAME );
$title = get_the_title( $image['image'] );
if ( $title == $file_name ) {
return;
}
}
} else {
$title = '';
}
return $title;
}
public function get_less_variables( $instance ) {
$less = array();
if ( ! empty( $instance['preloader'] ) && ! empty( $instance['preloader']['enabled'] ) ) {
$less['preloader_enabled'] = 'true';
$less['preloader_height'] = $instance['preloader']['height'];
$less['preloader_color'] = $instance['preloader']['color'];
}
if ( ! empty( $instance['title'] ) && ! empty( $instance['title']['display'] ) ) {
$less['title_alignment'] = ! empty( $instance['title']['display'] ) ? $instance['title']['alignment'] : '';
$title_font = siteorigin_widget_get_font( $instance['title']['font'] );
$less['title_font'] = $title_font['family'];
if ( ! empty( $title_font['weight'] ) ) {
$less['title_font_weight'] = $title_font['weight_raw'];
$less['title_font_style'] = $title_font['style'];
}
$less['title_font_size'] = ! empty( $instance['title']['font_size'] ) ? $instance['title']['font_size'] : '';
$less['title_color'] = ! empty( $instance['title']['color'] ) ? $instance['title']['color'] : '';
$less['title_padding'] = ! empty( $instance['title']['padding'] ) ? $instance['title']['padding'] : '';
}
return $less;
}
public function modify_instance( $instance ) {
if ( empty( $instance ) || ! is_array( $instance ) ) {
return array();
}
// Ensure the title array exists.
if (
! isset( $instance['title'] ) ||
! is_array( $instance['title'] )
) {
$instance['title'] = array();
}
// If this Simple Masonry was created before the title settings were added, disable it by default.
if (
! empty( $instance['display'] ) ||
! isset( $instance['title']['display'] )
) {
$instance['title']['title_display'] = false;
}
// Migrate Legacy device layout settings to layout seciton.
if ( ! empty( $instance['desktop_layout'] ) ) {
$instance['layout'] = array();
$instance['layout']['desktop'] = array();
$instance['layout']['tablet'] = array();
$instance['layout']['mobile'] = array();
$instance['layout']['origin_left'] = ! empty( $instance['layout_origin_left'] ) ? $instance['layout_origin_left'] : 'true';
$migrate_layout_sections = array(
'desktop' => array(
'columns',
'row_height',
'gutter',
),
'tablet' => array(
'break_point',
'columns',
'row_height',
'gutter',
),
'mobile' => array(
'break_point',
'columns',
'row_height',
'gutter',
),
);
foreach ( $migrate_layout_sections as $setting => $sub_section ) {
foreach ( $sub_section as $layout_setting ) {
if ( isset( $instance[ $setting . '_layout' ][ $layout_setting ] ) ) {
$instance['layout'][ $setting ][ $layout_setting ] = $instance[ $setting . '_layout' ][ $layout_setting ];
}
}
unset( $instance[ $setting . '_layout' ] );
}
}
return $instance;
}
public function get_form_teaser() {
if ( class_exists( 'SiteOrigin_Premium' ) ) {
return false;
}
return array(
sprintf(
__( 'Add a Lightbox to your images with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/lightbox" target="_blank" rel="noopener noreferrer">',
'</a>'
),
sprintf(
__( 'Add a beautiful and customizable text overlay with animations to your images with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/image-overlay" target="_blank" rel="noopener noreferrer">',
'</a>'
),
sprintf(
__( 'Add multiple Simple Masonry frames in one go with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/multiple-media" target="_blank" rel="noopener noreferrer">',
'</a>'
),
sprintf(
__( 'Add an image title tooltip with %sSiteOrigin Premium%s', 'so-widgets-bundle' ),
'<a href="https://siteorigin.com/downloads/premium/?featured_addon=plugin/tooltip" target="_blank" rel="noopener noreferrer">',
'</a>'
),
);
}
}
siteorigin_widget_register( 'sow-simple-masonry', __FILE__, 'SiteOrigin_Widget_Simple_Masonry_Widget' );
styles/default.less 0000644 00000003004 15154021566 0010405 0 ustar 00 @preloader_enabled: false;
@preloader_height: 250px;
@preloader_color: #000;
@title_alignment: default;
@title_color: default;
@title_font: default;
@title_font_size: default;
@title_font_style: default;
@title_font_weight: default;
@title_padding: default;
.sow-masonry-grid-item {
overflow: hidden;
img {
display: block;
max-width: inherit;
object-fit: cover;
width: 100%;
}
.image-title {
color: @title_color;
display: block;
font-family: @title_font;
font-size: @title_font_size;
font-style: @title_font_style;
font-weight: @title_font_weight;
line-height: 1.25;
padding: @title_padding;
text-align: @title_alignment;
}
}
& when ( @preloader_enabled = true ) {
.sow-masonry-grid {
opacity: 0;
}
.sow-masonry-grid-preloader {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: @preloader_height;
div {
box-sizing: border-box;
display: block;
position: absolute;
width: 30px;
height: 30px;
margin: 8px;
border: 2px solid @preloader_color;
border-radius: 50%;
animation: sow-masonry-preloader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: @preloader_color transparent transparent transparent;
&:nth-child(1) {
animation-delay: -0.45s;
}
&:nth-child(2) {
animation-delay: -0.3s;
}
&:nth-child(3) {
animation-delay: -0.15s;
}
}
}
@keyframes sow-masonry-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
tpl/default.php 0000644 00000004747 15154021566 0007521 0 ustar 00 <?php
/**
* @var $args array
* @var $items array
* @var $layouts array
*/
?>
<?php if ( ! empty( $instance['widget_title'] ) ) {
echo $args['before_title'] . wp_kses_post( $instance['widget_title'] ) . $args['after_title'];
} ?>
<?php if ( $preloader_enabled ) { ?>
<div class="sow-masonry-grid-preloader"><div></div><div></div><div></div><div></div></div>
<?php } ?>
<div class="sow-masonry-grid"
data-layouts="<?php echo esc_attr( json_encode( $layouts ) ); ?>" data-layout-origin-left="<?php echo esc_attr( $layout_origin_left ); ?>" <?php echo ! empty( $preloader_enabled ) ? 'style="opacity: 0;"' : ''; ?>>
<?php
if ( ! empty( $items ) ) {
foreach ( $items as $item ) {
$attr = array();
$attr['class'] = 'sow-masonry-grid-image';
$src = wp_get_attachment_image_src( $item['image'], 'full' );
$src = empty( $src ) ? '' : $src[0];
$attr['title'] = empty( $item['title'] ) ? '' : $item['title'];
$url = empty( $item['url'] ) ? '' : $item['url'];
?>
<div class="sow-masonry-grid-item" data-col-span="<?php echo esc_attr( $item['column_span'] ); ?>"
data-row-span="<?php echo esc_attr( $item['row_span'] ); ?>">
<?php if ( ! empty( $url ) ) { ?>
<a href="<?php echo sow_esc_url( $url ); ?>"
<?php foreach ( $item['link_attributes'] as $att => $val ) { ?>
<?php if ( ! empty( $val ) ) { ?>
<?php echo siteorigin_sanitize_attribute_key( $att ) . '="' . esc_attr( $val ) . '" '; ?>
<?php } ?>
<?php } ?>>
<?php } ?>
<?php
if (
! empty( $instance['title'] ) &&
! empty( $item['title'] ) &&
! empty( $instance['title']['display'] ) &&
$instance['title']['position'] == 'above'
) {
?>
<span class="image-title">
<?php echo wp_kses_post( $item['title'] ); ?>
</span>
<?php } ?>
<?php
echo siteorigin_widgets_get_attachment_image(
$item['image'],
'full',
! empty( $item['image_fallback'] ) ? $item['image_fallback'] : '',
siteorigin_loading_optimization_attributes(
$attr,
'masonry_grid',
$instance,
$this
)
);
?>
<?php
if (
! empty( $instance['title'] ) &&
! empty( $item['title'] ) &&
! empty( $instance['title']['display'] ) &&
$instance['title']['position'] == 'below'
) {
?>
<span class="image-title">
<?php echo wp_kses_post( $item['title'] ); ?>
</span>
<?php } ?>
<?php if ( ! empty( $url ) ) { ?>
</a>
<?php } ?>
</div>
<?php
}
}
?>
</div>