279 lines
7.8 KiB
PHP
279 lines
7.8 KiB
PHP
<?php
|
|
/**
|
|
* ==========================
|
|
* 🔐 IGNY8 FILE RULE HEADER
|
|
* ==========================
|
|
* @file : image-gallery.php
|
|
* @location : /assets/shortcodes/image-gallery.php
|
|
* @type : Shortcode
|
|
* @scope : Global
|
|
* @allowed : Shortcode registration, frontend rendering, image display
|
|
* @reusability : Globally Reusable
|
|
* @notes : Image gallery shortcodes for frontend display
|
|
*/
|
|
|
|
// Prevent direct access
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
/**
|
|
* Display specific in-article image by ID
|
|
*
|
|
* Usage: [igny8-image id="desktop-1"]
|
|
*
|
|
* @param array $atts Shortcode attributes
|
|
* @return string HTML output
|
|
*/
|
|
add_shortcode('igny8-image', function($atts) {
|
|
$atts = shortcode_atts(['id' => ''], $atts);
|
|
$post_id = get_the_ID();
|
|
|
|
if (empty($post_id)) {
|
|
return '';
|
|
}
|
|
|
|
$images = get_post_meta($post_id, '_igny8_inarticle_images', true);
|
|
if (!is_array($images)) {
|
|
return '';
|
|
}
|
|
|
|
// Display specific image by ID
|
|
if (!empty($atts['id']) && isset($images[$atts['id']])) {
|
|
$image_data = $images[$atts['id']];
|
|
|
|
// Device detection - only show if device matches
|
|
$is_mobile = wp_is_mobile();
|
|
$is_desktop = !$is_mobile;
|
|
|
|
// Check if image should be displayed based on device
|
|
$should_display = false;
|
|
if (strpos($atts['id'], 'desktop-') === 0 && $is_desktop) {
|
|
$should_display = true;
|
|
} elseif (strpos($atts['id'], 'mobile-') === 0 && $is_mobile) {
|
|
$should_display = true;
|
|
}
|
|
|
|
if (!$should_display) {
|
|
return '';
|
|
}
|
|
|
|
$attachment_id = intval($image_data['attachment_id']);
|
|
|
|
if ($attachment_id > 0) {
|
|
return wp_get_attachment_image($attachment_id, 'large', false, [
|
|
'class' => 'igny8-inarticle-image',
|
|
'data-image-id' => esc_attr($atts['id']),
|
|
'data-device' => esc_attr($image_data['device']),
|
|
'alt' => esc_attr($image_data['label'])
|
|
]);
|
|
}
|
|
}
|
|
|
|
return '';
|
|
});
|
|
|
|
/**
|
|
* Display all in-article images
|
|
*
|
|
* Usage: [igny8-images]
|
|
*
|
|
* @param array $atts Shortcode attributes
|
|
* @return string HTML output
|
|
*/
|
|
add_shortcode('igny8-images', function($atts) {
|
|
$atts = shortcode_atts([
|
|
'device' => '', // Filter by device type (desktop/mobile)
|
|
'size' => 'large', // Image size
|
|
'class' => 'igny8-image-gallery' // CSS class
|
|
], $atts);
|
|
|
|
$post_id = get_the_ID();
|
|
|
|
if (empty($post_id)) {
|
|
return '';
|
|
}
|
|
|
|
$images = get_post_meta($post_id, '_igny8_inarticle_images', true);
|
|
if (!is_array($images) || empty($images)) {
|
|
return '';
|
|
}
|
|
|
|
$output = '<div class="' . esc_attr($atts['class']) . '">';
|
|
$output .= '<p style="background: #f0f0f0; padding: 10px; border-left: 4px solid #0073aa; margin: 10px 0; font-weight: bold;">This is coming from shortcode</p>';
|
|
|
|
foreach ($images as $label => $image_data) {
|
|
// Filter by device if specified
|
|
if (!empty($atts['device']) && $image_data['device'] !== $atts['device']) {
|
|
continue;
|
|
}
|
|
|
|
$attachment_id = intval($image_data['attachment_id']);
|
|
|
|
if ($attachment_id > 0) {
|
|
$output .= wp_get_attachment_image($attachment_id, $atts['size'], false, [
|
|
'class' => 'igny8-inarticle-image',
|
|
'data-image-id' => esc_attr($label),
|
|
'data-device' => esc_attr($image_data['device']),
|
|
'alt' => esc_attr($image_data['label'])
|
|
]);
|
|
}
|
|
}
|
|
|
|
$output .= '</div>';
|
|
|
|
return $output;
|
|
});
|
|
|
|
/**
|
|
* Display desktop images only
|
|
*
|
|
* Usage: [igny8-desktop-images]
|
|
*
|
|
* @param array $atts Shortcode attributes
|
|
* @return string HTML output
|
|
*/
|
|
add_shortcode('igny8-desktop-images', function($atts) {
|
|
$atts = shortcode_atts([
|
|
'size' => 'large',
|
|
'class' => 'igny8-desktop-gallery'
|
|
], $atts);
|
|
|
|
return do_shortcode('[igny8-images device="desktop" size="' . $atts['size'] . '" class="' . $atts['class'] . '"]');
|
|
});
|
|
|
|
/**
|
|
* Display mobile images only
|
|
*
|
|
* Usage: [igny8-mobile-images]
|
|
*
|
|
* @param array $atts Shortcode attributes
|
|
* @return string HTML output
|
|
*/
|
|
add_shortcode('igny8-mobile-images', function($atts) {
|
|
$atts = shortcode_atts([
|
|
'size' => 'large',
|
|
'class' => 'igny8-mobile-gallery'
|
|
], $atts);
|
|
|
|
return do_shortcode('[igny8-images device="mobile" size="' . $atts['size'] . '" class="' . $atts['class'] . '"]');
|
|
});
|
|
|
|
/**
|
|
* Display image count
|
|
*
|
|
* Usage: [igny8-image-count]
|
|
*
|
|
* @param array $atts Shortcode attributes
|
|
* @return string HTML output
|
|
*/
|
|
add_shortcode('igny8-image-count', function($atts) {
|
|
$atts = shortcode_atts(['device' => ''], $atts);
|
|
|
|
$post_id = get_the_ID();
|
|
|
|
if (empty($post_id)) {
|
|
return '0';
|
|
}
|
|
|
|
$images = get_post_meta($post_id, '_igny8_inarticle_images', true);
|
|
if (!is_array($images)) {
|
|
return '0';
|
|
}
|
|
|
|
if (!empty($atts['device'])) {
|
|
$count = 0;
|
|
foreach ($images as $image_data) {
|
|
if ($image_data['device'] === $atts['device']) {
|
|
$count++;
|
|
}
|
|
}
|
|
return (string) $count;
|
|
}
|
|
|
|
return (string) count($images);
|
|
});
|
|
|
|
/**
|
|
* Display image gallery with responsive design
|
|
*
|
|
* Usage: [igny8-responsive-gallery]
|
|
*
|
|
* @param array $atts Shortcode attributes
|
|
* @return string HTML output
|
|
*/
|
|
add_shortcode('igny8-responsive-gallery', function($atts) {
|
|
$atts = shortcode_atts([
|
|
'desktop_size' => 'large',
|
|
'mobile_size' => 'medium',
|
|
'class' => 'igny8-responsive-gallery'
|
|
], $atts);
|
|
|
|
$post_id = get_the_ID();
|
|
|
|
if (empty($post_id)) {
|
|
return '';
|
|
}
|
|
|
|
$images = get_post_meta($post_id, '_igny8_inarticle_images', true);
|
|
if (!is_array($images) || empty($images)) {
|
|
return '';
|
|
}
|
|
|
|
$output = '<div class="' . esc_attr($atts['class']) . '">';
|
|
|
|
// Desktop images
|
|
$desktop_images = array_filter($images, function($img) {
|
|
return $img['device'] === 'desktop';
|
|
});
|
|
|
|
if (!empty($desktop_images)) {
|
|
$output .= '<div class="igny8-desktop-images" style="display: block;">';
|
|
foreach ($desktop_images as $label => $image_data) {
|
|
$attachment_id = intval($image_data['attachment_id']);
|
|
if ($attachment_id > 0) {
|
|
$output .= wp_get_attachment_image($attachment_id, $atts['desktop_size'], false, [
|
|
'class' => 'igny8-desktop-image',
|
|
'data-image-id' => esc_attr($label)
|
|
]);
|
|
}
|
|
}
|
|
$output .= '</div>';
|
|
}
|
|
|
|
// Mobile images
|
|
$mobile_images = array_filter($images, function($img) {
|
|
return $img['device'] === 'mobile';
|
|
});
|
|
|
|
if (!empty($mobile_images)) {
|
|
$output .= '<div class="igny8-mobile-images" style="display: none;">';
|
|
foreach ($mobile_images as $label => $image_data) {
|
|
$attachment_id = intval($image_data['attachment_id']);
|
|
if ($attachment_id > 0) {
|
|
$output .= wp_get_attachment_image($attachment_id, $atts['mobile_size'], false, [
|
|
'class' => 'igny8-mobile-image',
|
|
'data-image-id' => esc_attr($label)
|
|
]);
|
|
}
|
|
}
|
|
$output .= '</div>';
|
|
}
|
|
|
|
$output .= '</div>';
|
|
|
|
// Add responsive CSS
|
|
$output .= '<style>
|
|
@media (max-width: 768px) {
|
|
.igny8-desktop-images { display: none !important; }
|
|
.igny8-mobile-images { display: block !important; }
|
|
}
|
|
@media (min-width: 769px) {
|
|
.igny8-desktop-images { display: block !important; }
|
|
.igny8-mobile-images { display: none !important; }
|
|
}
|
|
</style>';
|
|
|
|
return $output;
|
|
});
|