Changeset 3209252
- Timestamp:
- 12/17/2024 02:37:24 PM (16 months ago)
- Location:
- picture-tag/trunk
- Files:
-
- 5 added
- 3 edited
-
README.md (modified) (2 diffs)
-
includes (added)
-
includes/helpers.php (added)
-
includes/settings.php (added)
-
includes/shortcode.php (added)
-
includes/template-functions.php (added)
-
picture-tag.php (modified) (2 diffs)
-
readme.txt (modified) (2 diffs)
Legend:
- Unmodified
- Added
- Removed
-
picture-tag/trunk/README.md
r3201192 r3209252 1 1 # Picture Tag 2 2 3 **Version:** 0.23 **Version:** 1.1.0 4 4 **Author:** Artilab 5 5 … … 64 64 ``` 65 65 66 ### Shortcodes 67 68 The plugin provides a shortcode for generating <picture> tags directly in posts, pages, or widgets. 69 70 [arti_picture] 71 72 **Description:** 73 Use this shortcode to render a <picture> tag for images in your WordPress content. 74 75 **Attributes:** 76 1. id (required): 77 The ID of the image attachment in the WordPress Media Library. 78 2. size_1x (optional): 79 Specifies the WordPress image size for 1x resolution. Defaults to large. 80 3. size_2x (optional): 81 Specifies the WordPress image size for 2x resolution. Defaults to full. 82 4. alt (optional): 83 Alternative text for the image (for accessibility and SEO). 84 5. title (optional): 85 The title attribute for the image. 86 6. class (optional): 87 Additional CSS classes for the <img> tag. 88 7. loading (optional): 89 Specifies lazy loading behavior. Defaults to lazy. 90 Options: lazy, eager. 91 8. fetchpriority (optional): 92 Specifies the priority for resource fetching. Common values: high, low. 93 94 **Examples:** 95 *Basic Example:* 96 ```code 97 [arti_picture id="123"] 98 ``` 99 This generates a <picture> tag with the image ID 123 and the default sizes (large for 1x and full for 2x). 100 101 *With Custom Sizes:* 102 [arti_picture id="123" size_1x="medium" size_2x="large"] 103 This specifies custom sizes for 1x and 2x resolutions. 104 105 *With Additional Attributes:* 106 [arti_picture id="123" size_1x="medium" size_2x="large" alt="Sample Image" title="Custom Title" class="custom-class" loading="eager"] 107 This adds custom alt, title, class, and loading attributes to the <img> tag. 108 66 109 ## Filters 67 110 `arti_image_size` -
picture-tag/trunk/picture-tag.php
r3201192 r3209252 3 3 * Plugin Name: Picture Tag 4 4 * Description: Picture Tag with Custom Path Settings 5 * Version: 1. 0.05 * Version: 1.1.0 6 6 * Author: Artilab 7 7 * Author URI: https://artilab.pro/ 8 * License: 9 * License URI: 8 * License: GPL-2.0-or-later 9 * License URI: https://www.gnu.org/licenses/gpl-2.0.html 10 10 */ 11 11 … … 14 14 } 15 15 16 // Add settings page to the WordPress admin 17 function arti_picture_tag_add_settings_page() { 18 add_options_page( 19 'Picture Tag Settings', // Page title 20 'Picture Tag', // Menu title 21 'manage_options', // Capability 22 'arti-picture-tag', // Menu slug 23 'arti_picture_tag_render_settings_page' // Callback function 24 ); 16 define( 'ARTI_PICTURE_TAG_PLUGIN', __FILE__ ); 17 define( 'ARTI_PICTURE_TAG_PLUGIN_DIR', untrailingslashit( dirname( ARTI_PICTURE_TAG_PLUGIN ) ) ); 18 define( 'ARTI_PICTURE_TAG_PLUGIN_VERSION', '1.1.0' ); 19 20 // Include plugin files 21 require_once plugin_dir_path( __FILE__ ) . 'includes/settings.php'; 22 require_once plugin_dir_path( __FILE__ ) . 'includes/helpers.php'; 23 require_once plugin_dir_path( __FILE__ ) . 'includes/template-functions.php'; 24 require_once plugin_dir_path( __FILE__ ) . 'includes/shortcode.php'; 25 26 // Initialize plugin 27 function arti_picture_tag_init() { 28 add_action( 'admin_menu', 'arti_picture_tag_add_settings_page' ); 29 add_action( 'admin_init', 'arti_picture_tag_register_settings' ); 25 30 } 26 add_action( 'admin_menu', 'arti_picture_tag_add_settings_page' ); 27 28 // Register settings fields for WebP and AVIF paths 29 function arti_picture_tag_register_settings() { 30 register_setting( 'arti_picture_tag_settings_group', 'arti_webp_path', array( 31 'type' => 'string', 32 'sanitize_callback' => 'arti_sanitize_path', 33 'default' => '' 34 ) ); 35 register_setting( 'arti_picture_tag_settings_group', 'arti_avif_path', array( 36 'type' => 'string', 37 'sanitize_callback' => 'arti_sanitize_path', 38 'default' => '' 39 ) ); 40 } 41 add_action( 'admin_init', 'arti_picture_tag_register_settings' ); 42 43 // Render the settings page HTML 44 function arti_picture_tag_render_settings_page() { 45 ?> 46 <div class="wrap"> 47 <h1>Picture Tag Settings</h1> 48 <form method="post" action="options.php"> 49 <?php 50 settings_fields( 'arti_picture_tag_settings_group' ); // Security fields for the settings 51 do_settings_sections( 'arti_picture_tag_settings_group' ); // Output necessary sections 52 ?> 53 <table class="form-table"> 54 <tr valign="top"> 55 <th scope="row">WebP Path</th> 56 <td> 57 <input type="text" name="arti_webp_path" 58 value="<?php echo esc_attr( get_option( 'arti_webp_path', '/../webp-express/webp-images/doc-root/wp-content/uploads' ) ); ?>" /> 59 </td> 60 </tr> 61 <tr valign="top"> 62 <th scope="row">AVIF Path</th> 63 <td> 64 <input type="text" name="arti_avif_path" 65 value="<?php echo esc_attr( get_option( 'arti_avif_path', '/../compressx-nextgen/uploads' ) ); ?>" /> 66 </td> 67 </tr> 68 </table> 69 <?php submit_button(); ?> 70 </form> 71 </div> 72 <?php 73 } 74 75 // Check if a file exists at a given URL 76 function arti_check_if_file_exists( $url ) { 77 $response = wp_remote_head( $url ); 78 79 if ( is_wp_error( $response ) ) { 80 return false; 81 } 82 83 $status_code = wp_remote_retrieve_response_code( $response ); 84 85 return $status_code === 200; 86 } 87 88 // Get image HTML by attachment ID, including responsive sizes and attributes 89 function arti_get_image_by_id( $image_id, $sizes = ['1x' => 'large', '2x' => 'full'], $attr = [] ) { 90 if ( ! $image_id ) { 91 return ''; 92 } 93 94 // Apply filters for sizes and attributes 95 $sizes = apply_filters( 'arti_image_size', $sizes, $image_id ); 96 $attr = apply_filters( 'arti_image_attr', $attr, $image_id ); 97 98 // Get alt and title attributes from admin if not provided in the function call 99 $admin_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true ); 100 $admin_title = get_the_title( $image_id ); 101 $attr['alt'] = ! empty( $admin_alt ) ? esc_attr( $admin_alt ) : ( $attr['alt'] ?? '' ); 102 $attr['title'] = ! empty( $admin_title ) ? esc_attr( $admin_title ) : ( $attr['title'] ?? '' ); 103 104 // Trigger action before fetching the image HTML 105 do_action( 'arti_begin_fetch_image_html', $image_id, $sizes ); 106 107 // Generate the image HTML 108 $html = arti_generate_picture_tag( $image_id, $sizes, $attr ); 109 110 // Trigger action after fetching the image HTML 111 do_action( 'arti_end_fetch_image_html', $image_id, $sizes ); 112 113 // Return the generated HTML, allowing for additional filtering 114 return apply_filters( 'arti_image_html', $html, $image_id, $sizes, $attr ); 115 } 116 117 // Echo the image HTML for the given attachment ID 118 119 function arti_the_image( $image_id, $sizes = ['1x' => 'large', '2x' => 'full'], $attr = [] ) { 120 $html = arti_get_image_by_id( $image_id, $sizes, $attr ); 121 122 // Define allowed HTML tags and attributes 123 $allowed_tags = array( 124 'img' => array( 125 'src' => true, 126 'srcset' => true, 127 'sizes' => true, 128 'alt' => true, 129 'title' => true, 130 'class' => true, 131 'width' => true, 132 'height' => true, 133 ), 134 'source' => array( 135 'srcset' => true, 136 'sizes' => true, 137 'type' => true, 138 ), 139 'picture' => array(), 140 ); 141 142 // Output sanitized HTML 143 echo wp_kses( $html, $allowed_tags ); 144 } 145 146 // Generate a responsive <picture> tag with support for WebP and AVIF formats 147 function arti_generate_picture_tag( $image_id, $sizes, $attr ) { 148 $upload_dir = wp_get_upload_dir(); 149 150 // Get the custom paths for WebP and AVIF from settings 151 $webp_base_url = str_replace( $upload_dir['baseurl'], $upload_dir['baseurl'] . get_option( 'arti_webp_path', '/../compressx-nextgen/uploads' ), $upload_dir['baseurl'] ); 152 $avif_base_url = str_replace( $upload_dir['baseurl'], $upload_dir['baseurl'] . get_option( 'arti_avif_path', '/../compressx-nextgen/uploads' ), $upload_dir['baseurl'] ); 153 154 $webp_srcset = []; 155 $avif_srcset = []; 156 $original_srcset = []; 157 158 // Generate srcset for each format (WebP, AVIF, and the original) 159 foreach ( $sizes as $scale => $size ) { 160 $image_src = wp_get_attachment_image_src( $image_id, $size ); 161 if ( $image_src ) { 162 $image_url_size = $image_src[0]; 163 $image_webp_url = str_replace( $upload_dir['baseurl'], $webp_base_url, $image_url_size ) . '.webp'; 164 $image_avif_url = str_replace( $upload_dir['baseurl'], $avif_base_url, $image_url_size ) . '.avif'; 165 166 // Check if WebP version exists 167 if ( arti_check_if_file_exists( $image_webp_url ) ) { 168 $webp_srcset[] = esc_url( $image_webp_url ) . " {$scale}"; 169 } 170 // Check if AVIF version exists 171 if ( arti_check_if_file_exists( $image_avif_url ) ) { 172 $avif_srcset[] = esc_url( $image_avif_url ) . " {$scale}"; 173 } 174 // Add the original image to the srcset 175 $original_srcset[] = esc_url( $image_url_size ) . " {$scale}"; 176 } 177 } 178 179 // Output the <picture> tag with the sources for AVIF, WebP, and the original format 180 ob_start(); ?> 181 <picture> 182 <?php if ( ! empty( $avif_srcset ) ) : ?> 183 <source srcset="<?php echo esc_attr( implode( ', ', $avif_srcset ) ); ?>" type="image/avif" /> 184 <?php endif; ?> 185 <?php if ( ! empty( $webp_srcset ) ) : ?> 186 <source srcset="<?php echo esc_attr( implode( ', ', $webp_srcset ) ); ?>" type="image/webp" /> 187 <?php endif; ?> 188 <source srcset="<?php echo esc_attr( implode( ', ', $original_srcset ) ); ?>" type="image/jpeg" /> 189 190 <?php echo wp_get_attachment_image( $image_id, $sizes['1x'], false, arti_render_custom_attributes( $attr ) ); ?> 191 </picture> 192 <?php 193 return ob_get_clean(); 194 } 195 196 /** 197 * Prepare custom attributes for the <img> tag. 198 * 199 * @param array $attr Array of attributes to add to the <img> tag. 200 * @return array The prepared attributes array. 201 */ 202 function arti_render_custom_attributes( $attr ) { 203 // Validate that $attr is an array 204 if ( ! is_array( $attr ) ) { 205 return []; 206 } 207 208 // Sanitize each attribute value 209 foreach ( $attr as $key => $value ) { 210 $attr[ $key ] = esc_attr( $value ); 211 } 212 213 return $attr; 214 } 215 216 217 218 // Sanitization callback for file paths 219 function arti_sanitize_path( $input ) { 220 // Remove any illegal characters 221 $sanitized = sanitize_text_field( $input ); 222 223 // Ensure the path starts with '/../' 224 if ( strpos( $sanitized, '/../' ) !== 0 ) { 225 return ''; // Invalid path 226 } 227 228 // Ensure there are no illegal characters in the path 229 if ( preg_match( '/[^a-zA-Z0-9\/\.\-_]/', $sanitized ) ) { 230 return ''; // Invalid characters found 231 } 232 233 // Ensure the path ends without a trailing slash 234 return rtrim( $sanitized, '/' ); 235 } 31 add_action( 'plugins_loaded', 'arti_picture_tag_init' ); -
picture-tag/trunk/readme.txt
r3201192 r3209252 5 5 Tested up to: 6.7 6 6 Requires PHP: 7.4 7 Stable tag: 1. 0.07 Stable tag: 1.1.0 8 8 License: GPL-2.0-or-later 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html … … 34 34 Yes, the plugin provides options to configure custom paths and add attributes to images. 35 35 36 = How do I add a screenshot to the media library? = 37 To add a screenshot or image for use with the plugin: 38 1. Go to **Media > Add New** in your WordPress admin dashboard. 39 2. Upload the desired image (e.g., a screenshot). 40 3. Once uploaded, note the **attachment ID** of the image. You can find this in the image URL or by editing the image. 41 4. Use the attachment ID with the shortcode to display the image in `<picture>` format. 42 43 **Example Shortcode:** 44 ```plaintext 45 [arti_picture id="123" size_1x="medium" size_2x="large" alt="Example screenshot" class="screenshot-image"] 46 ``` 47 36 48 == Changelog == 49 50 = 1.1.0 = 51 * Refactoring of the plugin structure to improve the ease of maintenance. 52 * Added ```[arti_picture]``` shortcode to display responsive `<picture>` tags. 53 * Added documentation on the use of shortcodes. 37 54 38 55 = 1.0.0 =
Note: See TracChangeset
for help on using the changeset viewer.