233 lines
10 KiB
PHP
233 lines
10 KiB
PHP
<?php
|
|
/**
|
|
* Display 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_display_settings'); ?>
|
|
|
|
<div class="igsp-section">
|
|
<h2>
|
|
<?php esc_html_e('Display Options', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">
|
|
<?php esc_html_e('Number of Images to Display', 'instagram-gallery-sync-pro'); ?>
|
|
</th>
|
|
<td>
|
|
<div class="igsp-slider-wrapper">
|
|
<input type="range" id="igsp_display_limit" name="igsp_display_limit" min="1" max="50"
|
|
value="<?php echo esc_attr(get_option('igsp_display_limit', 12)); ?>">
|
|
<span class="igsp-slider-value">
|
|
<?php echo esc_html(get_option('igsp_display_limit', 12)); ?>
|
|
</span>
|
|
</div>
|
|
<p class="description">
|
|
<?php esc_html_e('Number of images to show in the gallery. Set to 50 for "All".', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_order">
|
|
<?php esc_html_e('Display Order', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<?php $order = get_option('igsp_order', 'newest'); ?>
|
|
<select id="igsp_order" name="igsp_order">
|
|
<option value="newest" <?php selected($order, 'newest'); ?>>
|
|
<?php esc_html_e('Newest First', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="oldest" <?php selected($order, 'oldest'); ?>>
|
|
<?php esc_html_e('Oldest First', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="random" <?php selected($order, 'random'); ?>>
|
|
<?php esc_html_e('Random', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<?php esc_html_e('Show Captions', 'instagram-gallery-sync-pro'); ?>
|
|
</th>
|
|
<td>
|
|
<?php $show_caption = get_option('igsp_show_caption', 'no'); ?>
|
|
<fieldset>
|
|
<label>
|
|
<input type="radio" name="igsp_show_caption" value="yes" <?php checked($show_caption, 'yes'); ?>>
|
|
<?php esc_html_e('Yes', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="igsp_show_caption" value="no" <?php checked($show_caption, 'no'); ?>>
|
|
<?php esc_html_e('No', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</fieldset>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="igsp-conditional" data-depends-on="igsp_show_caption" data-depends-value="yes">
|
|
<th scope="row">
|
|
<label for="igsp_caption_position">
|
|
<?php esc_html_e('Caption Position', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<?php $position = get_option('igsp_caption_position', 'overlay'); ?>
|
|
<select id="igsp_caption_position" name="igsp_caption_position">
|
|
<option value="overlay" <?php selected($position, 'overlay'); ?>>
|
|
<?php esc_html_e('Overlay on Image', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="below" <?php selected($position, 'below'); ?>>
|
|
<?php esc_html_e('Below Image', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<?php esc_html_e('Show "More on Instagram" Button', 'instagram-gallery-sync-pro'); ?>
|
|
</th>
|
|
<td>
|
|
<?php $show_btn = get_option('igsp_show_instagram_btn', 'yes'); ?>
|
|
<fieldset>
|
|
<label>
|
|
<input type="radio" name="igsp_show_instagram_btn" value="yes" <?php checked($show_btn, 'yes'); ?>>
|
|
<?php esc_html_e('Yes', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="igsp_show_instagram_btn" value="no" <?php checked($show_btn, 'no'); ?>>
|
|
<?php esc_html_e('No', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</fieldset>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="igsp-section">
|
|
<h2>
|
|
<?php esc_html_e('Interactivity', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_link_behavior">
|
|
<?php esc_html_e('Link Behavior', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<?php $link = get_option('igsp_link_behavior', 'new_tab'); ?>
|
|
<select id="igsp_link_behavior" name="igsp_link_behavior">
|
|
<option value="new_tab" <?php selected($link, 'new_tab'); ?>>
|
|
<?php esc_html_e('Open in New Tab', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="same_window" <?php selected($link, 'same_window'); ?>>
|
|
<?php esc_html_e('Open in Same Window', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="lightbox" <?php selected($link, 'lightbox'); ?>>
|
|
<?php esc_html_e('Open in Lightbox', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="none" <?php selected($link, 'none'); ?>>
|
|
<?php esc_html_e('No Link', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<?php esc_html_e('Enable Lightbox', 'instagram-gallery-sync-pro'); ?>
|
|
</th>
|
|
<td>
|
|
<?php $lightbox = get_option('igsp_lightbox', 'yes'); ?>
|
|
<fieldset>
|
|
<label>
|
|
<input type="radio" name="igsp_lightbox" value="yes" <?php checked($lightbox, 'yes'); ?>>
|
|
<?php esc_html_e('Yes', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="igsp_lightbox" value="no" <?php checked($lightbox, 'no'); ?>>
|
|
<?php esc_html_e('No', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</fieldset>
|
|
<p class="description">
|
|
<?php esc_html_e('Allow clicking images to view them in a lightbox.', 'instagram-gallery-sync-pro'); ?>
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="igsp-section">
|
|
<h2>
|
|
<?php esc_html_e('Performance', 'instagram-gallery-sync-pro'); ?>
|
|
</h2>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">
|
|
<?php esc_html_e('Lazy Loading', 'instagram-gallery-sync-pro'); ?>
|
|
</th>
|
|
<td>
|
|
<?php $lazy = get_option('igsp_lazy_loading', 'yes'); ?>
|
|
<fieldset>
|
|
<label>
|
|
<input type="radio" name="igsp_lazy_loading" value="yes" <?php checked($lazy, 'yes'); ?>>
|
|
<?php esc_html_e('Yes (Recommended)', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="igsp_lazy_loading" value="no" <?php checked($lazy, 'no'); ?>>
|
|
<?php esc_html_e('No', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</fieldset>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">
|
|
<label for="igsp_loader_type">
|
|
<?php esc_html_e('Loading Animation', 'instagram-gallery-sync-pro'); ?>
|
|
</label>
|
|
</th>
|
|
<td>
|
|
<?php $loader = get_option('igsp_loader_type', 'spinner'); ?>
|
|
<select id="igsp_loader_type" name="igsp_loader_type">
|
|
<option value="spinner" <?php selected($loader, 'spinner'); ?>>
|
|
<?php esc_html_e('Spinner', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="dots" <?php selected($loader, 'dots'); ?>>
|
|
<?php esc_html_e('Dots', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="pulse" <?php selected($loader, 'pulse'); ?>>
|
|
<?php esc_html_e('Pulse', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="skeleton" <?php selected($loader, 'skeleton'); ?>>
|
|
<?php esc_html_e('Skeleton', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
<option value="none" <?php selected($loader, 'none'); ?>>
|
|
<?php esc_html_e('None', 'instagram-gallery-sync-pro'); ?>
|
|
</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<?php submit_button(); ?>
|
|
</form>
|