Scroll Image
[scroll_image id=”418″]
[scroll_image id=”419″]
scroll-image.php
PHP
Create scrolling image displays with admin management
<?php
/**
* Plugin Name: Random Scroll Images
* Plugin URI: https://it-breeze.info
* Description: Create scrolling image displays with admin management
* Version: 2.0.3
* Author: Mike Vahldieck
* Author URI: https://it-breeze.info
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
<?php
/**
* Plugin Name: Random Scroll Images
* Plugin URI: https://it-breeze.info
* Description: Create scrolling image displays with admin management
* Version: 2.0.3
* Author: Mike Vahldieck
* Author URI: https://it-breeze.info
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
class RandomScrollImages {
public function __construct() {
add_action('init', array($this, 'init'));
add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
add_action('admin_enqueue_scripts', array($this, 'admin_enqueue_scripts'));
add_shortcode('scroll_image', array($this, 'scroll_image_shortcode'));
}
public function init() {
$this->create_post_type();
}
public function create_post_type() {
register_post_type('scroll_image', array(
'labels' => array(
'name' => 'Scroll Images',
'singular_name' => 'Scroll Image',
'add_new' => 'Add New Scroll Image',
'add_new_item' => 'Add New Scroll Image',
'edit_item' => 'Edit Scroll Image',
'new_item' => 'New Scroll Image',
'view_item' => 'View Scroll Image',
'search_items' => 'Search Scroll Images',
'not_found' => 'No scroll images found',
'not_found_in_trash' => 'No scroll images found in trash'
),
'public' => false,
'show_ui' => true,
'show_in_menu' => true,
'menu_icon' => 'dashicons-images-alt2',
'supports' => array('title'),
'has_archive' => false,
'rewrite' => false
));
add_action('add_meta_boxes', array($this, 'add_meta_boxes'));
add_action('save_post', array($this, 'save_meta_boxes'));
}
public function add_meta_boxes() {
add_meta_box(
'scroll_images_meta',
'Scroll Images Settings',
array($this, 'meta_box_callback'),
'scroll_image',
'normal',
'high'
);
}
public function meta_box_callback($post) {
wp_nonce_field('scroll_images_meta_nonce', 'scroll_images_meta_nonce_field');
$images = get_post_meta($post->ID, '_scroll_images', true);
$frame_width = get_post_meta($post->ID, '_frame_width', true) ?: '400';
$frame_height = get_post_meta($post->ID, '_frame_height', true) ?: '300';
$animation_speed = get_post_meta($post->ID, '_animation_speed', true) ?: '5000';
?>
<table class="form-table">
<tr>
<th scope="row">Frame Dimensions</th>
<td>
<label>Width: <input type="number" name="frame_width" value="<?php echo esc_attr($frame_width); ?>" style="width: 80px;" />px</label>
<label style="margin-left: 20px;">Height: <input type="number" name="frame_height" value="<?php echo esc_attr($frame_height); ?>" style="width: 80px;" />px</label>
</td>
</tr>
<tr>
<th scope="row">Animation Speed</th>
<td>
<input type="number" name="animation_speed" value="<?php echo esc_attr($animation_speed); ?>" style="width: 80px;" />
<span class="description">milliseconds (default: 5000)</span>
</td>
</tr>
<tr>
<th scope="row">Images</th>
<td>
<input type="hidden" id="rs_images" name="scroll_images" value="<?php echo esc_attr($images); ?>" />
<button type="button" id="rs_upload_button" class="button">Add Images</button>
<div id="rs_image_preview" style="margin-top: 10px;">
<?php echo $this->get_image_preview($images); ?>
</div>
</td>
</tr>
</table>
<div style="margin-top: 20px; padding: 15px; background: #f9f9f9; border-left: 4px solid #0073aa;">
<h4>How to use:</h4>
<p>Copy this shortcode to display the scroll image: <code>[scroll_image id="<?php echo $post->ID; ?>"]</code></p>
</div>
<?php
}
private function get_image_preview($image_ids) {
if (empty($image_ids)) {
return '';
}
$ids = explode(',', $image_ids);
$preview_html = '';
foreach ($ids as $id) {
$image = wp_get_attachment_image_src($id, 'thumbnail');
if ($image) {
$preview_html .= '<div class="rs-preview-image" data-id="' . esc_attr($id) . '" style="display: inline-block; margin: 5px; text-align: center;">';
$preview_html .= '<img src="' . esc_url($image[0]) . '" style="max-width: 100px; display: block;" />';
$preview_html .= '<button type="button" class="button rs-remove-image" style="margin-top: 5px;">Remove</button>';
$preview_html .= '</div>';
}
}
return $preview_html;
}
public function save_meta_boxes($post_id) {
if (!isset($_POST['scroll_images_meta_nonce_field']) ||
!wp_verify_nonce($_POST['scroll_images_meta_nonce_field'], 'scroll_images_meta_nonce') ||
defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ||
!current_user_can('edit_post', $post_id)) {
return;
}
if (isset($_POST['scroll_images'])) {
update_post_meta($post_id, '_scroll_images', sanitize_text_field($_POST['scroll_images']));
}
if (isset($_POST['frame_width'])) {
update_post_meta($post_id, '_frame_width', intval($_POST['frame_width']));
}
if (isset($_POST['frame_height'])) {
update_post_meta($post_id, '_frame_height', intval($_POST['frame_height']));
}
if (isset($_POST['animation_speed'])) {
update_post_meta($post_id, '_animation_speed', intval($_POST['animation_speed']));
}
}
public function admin_enqueue_scripts($hook) {
global $post_type;
if ($post_type == 'scroll_image') {
wp_enqueue_media();
wp_enqueue_script('scroll-images-admin', plugin_dir_url(__FILE__) . 'admin-script.js', array('jquery'), '1.0', true);
}
}
public function enqueue_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('scroll-images-frontend', plugin_dir_url(__FILE__) . 'frontend-script.js', array('jquery'), '1.0', true);
wp_enqueue_style('scroll-images-style', plugin_dir_url(__FILE__) . 'style.css', array(), '1.0');
}
public function scroll_image_shortcode($atts) {
$atts = shortcode_atts(array(
'id' => 0
), $atts);
$post_id = intval($atts['id']);
if (!$post_id || get_post_type($post_id) !== 'scroll_image') {
return '<p>Invalid scroll image ID.</p>';
}
$images = get_post_meta($post_id, '_scroll_images', true);
$frame_width = get_post_meta($post_id, '_frame_width', true) ?: '400';
$frame_height = get_post_meta($post_id, '_frame_height', true) ?: '300';
$animation_speed = get_post_meta($post_id, '_animation_speed', true) ?: '5000';
if (empty($images)) {
return '<p>No images found for this scroll image.</p>';
}
$image_ids = explode(',', $images);
$random_image_id = $image_ids[array_rand($image_ids)];
$image_url = wp_get_attachment_image_src($random_image_id, 'full');
if (!$image_url) {
return '<p>Image not found.</p>';
}
$unique_id = 'rs-' . $post_id . '-' . rand(1000, 9999);
ob_start();
?>
<div class="rs-frame" id="<?php echo esc_attr($unique_id); ?>"
style="width: <?php echo esc_attr($frame_width); ?>px; height: <?php echo esc_attr($frame_height); ?>px;"
data-speed="<?php echo esc_attr($animation_speed); ?>">
<img class="rs-image" src="<?php echo esc_url($image_url[0]); ?>" alt="Scrolling Image" />
</div>
<?php
return ob_get_clean();
}
}
// Initialize the plugin
new RandomScrollImages();
?>