279 lines
13 KiB
PHP
279 lines
13 KiB
PHP
<?php
|
||
/**
|
||
* Layout Settings Tab
|
||
*
|
||
* @package Instagram_Gallery_Sync_Pro
|
||
*/
|
||
|
||
// Prevent direct access
|
||
if (!defined('ABSPATH')) {
|
||
exit;
|
||
}
|
||
?>
|
||
|
||
<form method="post" action="options.php" class="igsp-settings-form">
|
||
<?php settings_fields('igsp_layout_settings'); ?>
|
||
|
||
<div class="igsp-section">
|
||
<h2>
|
||
<?php esc_html_e('Layout Type', 'instagram-gallery-sync-pro'); ?>
|
||
</h2>
|
||
|
||
<?php $layout_type = get_option('igsp_layout_type', 'grid'); ?>
|
||
<div class="igsp-layout-selector">
|
||
<label class="igsp-layout-option <?php echo $layout_type === 'grid' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igsp_layout_type" value="grid" <?php checked($layout_type, 'grid'); ?>>
|
||
<div class="igsp-layout-preview igsp-preview-grid">
|
||
<span></span><span></span><span></span>
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
<span class="igsp-layout-name">
|
||
<?php esc_html_e('Grid', 'instagram-gallery-sync-pro'); ?>
|
||
</span>
|
||
</label>
|
||
|
||
<label class="igsp-layout-option <?php echo $layout_type === 'masonry' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igsp_layout_type" value="masonry" <?php checked($layout_type, 'masonry'); ?>>
|
||
<div class="igsp-layout-preview igsp-preview-masonry">
|
||
<span style="height: 40px;"></span><span style="height: 60px;"></span><span
|
||
style="height: 30px;"></span>
|
||
<span style="height: 50px;"></span><span style="height: 35px;"></span><span
|
||
style="height: 55px;"></span>
|
||
</div>
|
||
<span class="igsp-layout-name">
|
||
<?php esc_html_e('Masonry', 'instagram-gallery-sync-pro'); ?>
|
||
</span>
|
||
</label>
|
||
|
||
<label class="igsp-layout-option <?php echo $layout_type === 'justified' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igsp_layout_type" value="justified" <?php checked($layout_type, 'justified'); ?>>
|
||
<div class="igsp-layout-preview igsp-preview-justified">
|
||
<span style="width: 60px;"></span><span style="width: 40px;"></span>
|
||
<span style="width: 35px;"></span><span style="width: 65px;"></span>
|
||
</div>
|
||
<span class="igsp-layout-name">
|
||
<?php esc_html_e('Justified', 'instagram-gallery-sync-pro'); ?>
|
||
</span>
|
||
</label>
|
||
|
||
<label class="igsp-layout-option <?php echo $layout_type === 'slider' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igsp_layout_type" value="slider" <?php checked($layout_type, 'slider'); ?>>
|
||
<div class="igsp-layout-preview igsp-preview-slider">
|
||
<span class="arrow-left">‹</span>
|
||
<span class="slide"></span>
|
||
<span class="arrow-right">›</span>
|
||
</div>
|
||
<span class="igsp-layout-name">
|
||
<?php esc_html_e('Slider', 'instagram-gallery-sync-pro'); ?>
|
||
</span>
|
||
</label>
|
||
|
||
<label class="igsp-layout-option <?php echo $layout_type === 'list' ? 'selected' : ''; ?>">
|
||
<input type="radio" name="igsp_layout_type" value="list" <?php checked($layout_type, 'list'); ?>>
|
||
<div class="igsp-layout-preview igsp-preview-list">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
<span class="igsp-layout-name">
|
||
<?php esc_html_e('List', 'instagram-gallery-sync-pro'); ?>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="igsp-section">
|
||
<h2>
|
||
<?php esc_html_e('Grid Settings', 'instagram-gallery-sync-pro'); ?>
|
||
</h2>
|
||
|
||
<table class="form-table">
|
||
<tr>
|
||
<th scope="row">
|
||
<?php esc_html_e('Columns (Desktop)', 'instagram-gallery-sync-pro'); ?>
|
||
</th>
|
||
<td>
|
||
<div class="igsp-slider-wrapper">
|
||
<input type="range" id="igsp_columns_desktop" name="igsp_columns_desktop" min="1" max="6"
|
||
value="<?php echo esc_attr(get_option('igsp_columns_desktop', 3)); ?>">
|
||
<span class="igsp-slider-value">
|
||
<?php echo esc_html(get_option('igsp_columns_desktop', 3)); ?>
|
||
</span>
|
||
</div>
|
||
<p class="description">
|
||
<?php esc_html_e('Number of columns on desktop (> 1024px)', 'instagram-gallery-sync-pro'); ?>
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<?php esc_html_e('Columns (Tablet)', 'instagram-gallery-sync-pro'); ?>
|
||
</th>
|
||
<td>
|
||
<div class="igsp-slider-wrapper">
|
||
<input type="range" id="igsp_columns_tablet" name="igsp_columns_tablet" min="1" max="4"
|
||
value="<?php echo esc_attr(get_option('igsp_columns_tablet', 2)); ?>">
|
||
<span class="igsp-slider-value">
|
||
<?php echo esc_html(get_option('igsp_columns_tablet', 2)); ?>
|
||
</span>
|
||
</div>
|
||
<p class="description">
|
||
<?php esc_html_e('Number of columns on tablet (768px - 1023px)', 'instagram-gallery-sync-pro'); ?>
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<?php esc_html_e('Columns (Mobile)', 'instagram-gallery-sync-pro'); ?>
|
||
</th>
|
||
<td>
|
||
<div class="igsp-slider-wrapper">
|
||
<input type="range" id="igsp_columns_mobile" name="igsp_columns_mobile" min="1" max="2"
|
||
value="<?php echo esc_attr(get_option('igsp_columns_mobile', 1)); ?>">
|
||
<span class="igsp-slider-value">
|
||
<?php echo esc_html(get_option('igsp_columns_mobile', 1)); ?>
|
||
</span>
|
||
</div>
|
||
<p class="description">
|
||
<?php esc_html_e('Number of columns on mobile (< 767px)', 'instagram-gallery-sync-pro'); ?>
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<?php esc_html_e('Spacing', 'instagram-gallery-sync-pro'); ?>
|
||
</th>
|
||
<td>
|
||
<div class="igsp-slider-wrapper">
|
||
<input type="range" id="igsp_spacing" name="igsp_spacing" min="0" max="50"
|
||
value="<?php echo esc_attr(get_option('igsp_spacing', 10)); ?>">
|
||
<span class="igsp-slider-value">
|
||
<?php echo esc_html(get_option('igsp_spacing', 10)); ?>px
|
||
</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<?php esc_html_e('Outer Padding', 'instagram-gallery-sync-pro'); ?>
|
||
</th>
|
||
<td>
|
||
<div class="igsp-slider-wrapper">
|
||
<input type="range" id="igsp_padding" name="igsp_padding" min="0" max="50"
|
||
value="<?php echo esc_attr(get_option('igsp_padding', 0)); ?>">
|
||
<span class="igsp-slider-value">
|
||
<?php echo esc_html(get_option('igsp_padding', 0)); ?>px
|
||
</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="igsp-section">
|
||
<h2>
|
||
<?php esc_html_e('Image Settings', 'instagram-gallery-sync-pro'); ?>
|
||
</h2>
|
||
|
||
<table class="form-table">
|
||
<tr>
|
||
<th scope="row">
|
||
<label for="igsp_aspect_ratio">
|
||
<?php esc_html_e('Aspect Ratio', 'instagram-gallery-sync-pro'); ?>
|
||
</label>
|
||
</th>
|
||
<td>
|
||
<?php $aspect = get_option('igsp_aspect_ratio', 'square'); ?>
|
||
<select id="igsp_aspect_ratio" name="igsp_aspect_ratio">
|
||
<option value="original" <?php selected($aspect, 'original'); ?>>
|
||
<?php esc_html_e('Original', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="square" <?php selected($aspect, 'square'); ?>>
|
||
<?php esc_html_e('Square (1:1)', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="4-3" <?php selected($aspect, '4-3'); ?>>
|
||
<?php esc_html_e('4:3', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="16-9" <?php selected($aspect, '16-9'); ?>>
|
||
<?php esc_html_e('16:9', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="3-4" <?php selected($aspect, '3-4'); ?>>
|
||
<?php esc_html_e('3:4 (Portrait)', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<label for="igsp_object_fit">
|
||
<?php esc_html_e('Object Fit', 'instagram-gallery-sync-pro'); ?>
|
||
</label>
|
||
</th>
|
||
<td>
|
||
<?php $fit = get_option('igsp_object_fit', 'cover'); ?>
|
||
<select id="igsp_object_fit" name="igsp_object_fit">
|
||
<option value="cover" <?php selected($fit, 'cover'); ?>>
|
||
<?php esc_html_e('Cover (Crop to fill)', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="contain" <?php selected($fit, 'contain'); ?>>
|
||
<?php esc_html_e('Contain (Fit inside)', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<?php esc_html_e('Border Radius', 'instagram-gallery-sync-pro'); ?>
|
||
</th>
|
||
<td>
|
||
<div class="igsp-slider-wrapper">
|
||
<input type="range" id="igsp_border_radius" name="igsp_border_radius" min="0" max="30"
|
||
value="<?php echo esc_attr(get_option('igsp_border_radius', 0)); ?>">
|
||
<span class="igsp-slider-value">
|
||
<?php echo esc_html(get_option('igsp_border_radius', 0)); ?>px
|
||
</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<th scope="row">
|
||
<label for="igsp_hover_effect">
|
||
<?php esc_html_e('Hover Effect', 'instagram-gallery-sync-pro'); ?>
|
||
</label>
|
||
</th>
|
||
<td>
|
||
<?php $hover = get_option('igsp_hover_effect', 'zoom'); ?>
|
||
<select id="igsp_hover_effect" name="igsp_hover_effect">
|
||
<option value="none" <?php selected($hover, 'none'); ?>>
|
||
<?php esc_html_e('None', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="zoom" <?php selected($hover, 'zoom'); ?>>
|
||
<?php esc_html_e('Zoom', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="fade" <?php selected($hover, 'fade'); ?>>
|
||
<?php esc_html_e('Fade + Caption', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="overlay" <?php selected($hover, 'overlay'); ?>>
|
||
<?php esc_html_e('Overlay with Icon', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="grayscale" <?php selected($hover, 'grayscale'); ?>>
|
||
<?php esc_html_e('Grayscale to Color', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
<option value="lift" <?php selected($hover, 'lift'); ?>>
|
||
<?php esc_html_e('Lift (Shadow + Transform)', 'instagram-gallery-sync-pro'); ?>
|
||
</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<?php submit_button(); ?>
|
||
</form>
|