Skip to content

Commit 1f7358b

Browse files
marekdedicmarekdedic
committed
Added masonry column sizing
1 parent 5eb1418 commit 1f7358b

File tree

3 files changed

+76
-4
lines changed

3 files changed

+76
-4
lines changed

‎plugin/class-options.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<?php
22
namespace Sgdg;
33

4+
require_once 'frontend/class-integerselectoroption.php';
45
require_once 'frontend/class-integeroption.php';
56
require_once 'frontend/class-booleanoption.php';
67
require_once 'frontend/class-stringcodeoption.php';
@@ -32,7 +33,7 @@ public static function init() {
3233
self::$client_id = new \Sgdg\Frontend\StringCodeOption( 'client_id', '', 'auth', esc_html__( 'Client ID', 'skaut-google-drive-gallery' ) );
3334
self::$client_secret = new \Sgdg\Frontend\StringCodeOption( 'client_secret', '', 'auth', esc_html__( 'Client secret', 'skaut-google-drive-gallery' ) );
3435
self::$root_path = new \Sgdg\Frontend\RootPathOption( 'root_path', [ 'root' ], 'root_selection', '' );
35-
self::$thumbnail_size = new \Sgdg\Frontend\IntegerOption( 'thumbnail_size', 250, 'options', esc_html__( 'Thumbnail size', 'skaut-google-drive-gallery' ) );
36+
self::$thumbnail_size = new \Sgdg\Frontend\IntegerSelectorOption( 'thumbnail_size', 250, 'px', 'options', esc_html__( 'Thumbnail size', 'skaut-google-drive-gallery' ) );
3637
self::$thumbnail_spacing = new \Sgdg\Frontend\IntegerOption( 'thumbnail_spacing', 10, 'options', esc_html__( 'Thumbnail spacing', 'skaut-google-drive-gallery' ) );
3738
self::$preview_size = new \Sgdg\Frontend\IntegerOption( 'preview_size', 1920, 'options', esc_html__( 'Preview size', 'skaut-google-drive-gallery' ) );
3839
self::$preview_speed = new \Sgdg\Frontend\IntegerOption( 'preview_speed', 250, 'options', esc_html__( 'Preview animation speed (ms)', 'skaut-google-drive-gallery' ) );

‎plugin/frontend/class-integerselectoroption.php‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<?php
2+
namespace Sgdg\Frontend;
3+
4+
require_once 'class-integeroption.php';
5+
6+
class IntegerSelectorOption extends Option {
7+
public function __construct( $name, $default_value, $default_unit, $section, $title ) {
8+
parent::__construct( $name, [
9+
'value' => $default_value,
10+
'unit' => $default_unit,
11+
], $section, $title );
12+
}
13+
14+
public function register() {
15+
register_setting( 'sgdg', $this->name . '_value', [ // TODO: Upgrade hook: https://codex.wordpress.org/Plugin_API/Action_Reference/upgrader_process_complete
16+
'type' => 'integer',
17+
'sanitize_callback' => [ $this, 'sanitize' ],
18+
]);
19+
register_setting( 'sgdg', $this->name . '_unit', [
20+
'type' => 'string',
21+
'sanitize_callback' => [ $this, 'sanitize_unit' ],
22+
]);
23+
}
24+
25+
public function sanitize( $value ) {
26+
if ( is_numeric( $value ) ) {
27+
return intval( $value );
28+
}
29+
return $this->default_value['value'];
30+
}
31+
32+
public function sanitize_unit( $value ) {
33+
if ( 'px' === $value ) {
34+
return 'px';
35+
}
36+
if ( 'cols' === $value ) {
37+
return 'cols';
38+
}
39+
return $this->default_value['unit'];
40+
}
41+
42+
public function html() {
43+
echo( '<input type="text" name="' . esc_attr( $this->name ) . '_value" value="' . esc_attr( $this->getValue() ) . '" class="regular-text">' );
44+
echo( '<select name="' . esc_attr($this->name) . '_unit">' );
45+
echo( '<option value="px"' . ( $this->getUnit() === 'px' ? ' selected' : '' ) . '>px</option>' );
46+
echo( '<option value="cols"' . ( $this->getUnit() === 'cols' ? ' selected' : '' ) . '>' . esc_html__( 'columns', 'skaut-google-drive-gallery' ) . '</option>' );
47+
echo( '</select>' );
48+
}
49+
50+
public function getValue( $default_value = null ) {
51+
return get_option( $this->name . '_value', ( isset( $default_value ) ? $default_value : $this->default_value['value'] ) );
52+
}
53+
54+
public function getUnit( $default_value = null ) {
55+
return get_option( $this->name . '_unit', ( isset( $default_value ) ? $default_value : $this->default_value['unit'] ) );
56+
}
57+
58+
public function getSize( $default_value = null ) {
59+
if ( $this->getUnit( $default_value['unit'] ) === 'cols' ) {
60+
return floor( 1920 / get_option( $this->name . '_value', ( isset( $default_value ) ? $default_value : $this->default_value['value'] ) ) );
61+
}
62+
return get_option( $this->name . '_value', ( isset( $default_value ) ? $default_value : $this->default_value['value'] ) );
63+
}
64+
65+
public function get( $default_value = null ) {
66+
if ( $this->getUnit( $default_value['unit'] ) === 'cols' ) {
67+
return floor( 95 / $this->getValue( $default_value['value'] ) ) . '%';
68+
}
69+
return $this->getValue( $default_value['value'] ) . $this->getUnit( $default_value['unit'] );
70+
}
71+
}

‎plugin/frontend/shortcode.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function render( $atts = [] ) {
3636
'preview_activity' => \Sgdg\Options::$preview_activity_indicator->get(),
3737
]);
3838
wp_enqueue_style( 'sgdg_gallery_css' );
39-
wp_add_inline_style( 'sgdg_gallery_css', '.sgdg-grid-item { margin-bottom: ' . intval( \Sgdg\Options::$thumbnail_spacing->get() - 7 ) . 'px; width: ' . \Sgdg\Options::$thumbnail_size->get() . 'px; }' );
39+
wp_add_inline_style( 'sgdg_gallery_css', '.sgdg-grid-item { margin-bottom: ' . intval( \Sgdg\Options::$thumbnail_spacing->get() - 7 ) . 'px; width: ' . \Sgdg\Options::$thumbnail_size->get() . '; }' . ( \Sgdg\Options::$thumbnail_size->getUnit() === 'cols' ? ' @media screen and (max-width: 700px) { .sgdg-grid-item { width: 90%; }}' : '' ) );
4040

4141
try {
4242
$client = \Sgdg\Frontend\GoogleAPILib\get_drive_client();
@@ -186,7 +186,7 @@ function random_dir_image( $client, $dir ) {
186186
return '<svg class="sgdg-dir-icon" x="0px" y="0px" focusable="false" viewBox="0 0 24 20" fill="#8f8f8f"><path d="M10 2H4c-1.1 0-1.99.9-1.99 2L2 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>';
187187
}
188188
$file = $images[ array_rand( $images ) ];
189-
return '<img class="sgdg-grid-img" src="' . substr( $file->getThumbnailLink(), 0, -4 ) . 'w' . \Sgdg\Options::$thumbnail_size->get() . '">';
189+
return '<img class="sgdg-grid-img" src="' . substr( $file->getThumbnailLink(), 0, -4 ) . 'w' . \Sgdg\Options::$thumbnail_size->getSize() . '">';
190190
}
191191

192192
function dir_counts( $client, $dir ) {
@@ -239,7 +239,7 @@ function render_images( $client, $dir ) {
239239
];
240240
$response = $client->files->listFiles( $params );
241241
foreach ( $response->getFiles() as $file ) {
242-
$ret .= '<div class="sgdg-grid-item"><a class="sgdg-grid-a" data-imagelightbox="a" href="' . substr( $file->getThumbnailLink(), 0, -3 ) . \Sgdg\Options::$preview_size->get() . '"><img class="sgdg-grid-img" src="' . substr( $file->getThumbnailLink(), 0, -4 ) . 'w' . \Sgdg\Options::$thumbnail_size->get() . '"></a></div>';
242+
$ret .= '<div class="sgdg-grid-item"><a class="sgdg-grid-a" data-imagelightbox="a" href="' . substr( $file->getThumbnailLink(), 0, -3 ) . \Sgdg\Options::$preview_size->get() . '"><img class="sgdg-grid-img" src="' . substr( $file->getThumbnailLink(), 0, -4 ) . 'w' . \Sgdg\Options::$thumbnail_size->getSize() . '"></a></div>';
243243
}
244244
$page_token = $response->getNextPageToken();
245245
} while ( null !== $page_token );

0 commit comments

Comments
 (0)