Nahrávanie screenshot obrázkov do WordPress médií

Tento snippet umožňuje jednoduché a rýchle nahrávanie obrázkov do mediálnej knižnice WordPressu pomocou vloženia obrázku cez schránku (Ctrl + V). Po vložení obrázku kód automaticky deteguje obrázok, konvertuje ho na formát JPG alebo WebP a nahrá ho do médií WordPressu. Tento spôsob uľahčuje správu obrázkov a šetrí čas, ktorý by bol inak potrebný na manuálne nahrávanie obrázkov.

Jednoducho pridajte kód do súboru functions.php vašej témy alebo cez plugin na vlastné úpravy kódu a začnite využívať túto efektívnu funkciu.

				
					// Pridanie JavaScript kódu na detekciu vloženia obrázkov a tlačidlo na nahratie súborov
function custom_paste_image() {
    ?>
    
    document.addEventListener('DOMContentLoaded', function() {
        // Funkcia na nahranie obrázku pomocou AJAXu
        function uploadImage(base64Image) {
            var formData = new FormData();
            formData.append('action', 'upload_pasted_image');
            formData.append('base64_image', base64Image);

            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Pridanie nahratého obrázku do mediálnej knižnice v reálnom čase
                    var attachment = wp.media.attachment(data.attachment_id);
                    attachment.fetch();
                    wp.media.frame.content.get('view').collection.add(attachment);

                    // Automatická synchronizácia mediálnej knižnice
                    syncMediaLibrary();
                } else {
                    alert('Nastala chyba pri nahrávaní obrázku: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Chyba:', error);
                alert('Nastala chyba pri nahrávaní obrázku.');
            });
        }

        // Funkcia na synchronizáciu mediálnej knižnice
        function syncMediaLibrary() {
            if (typeof wp !== 'undefined' && wp.media && wp.media.frame) {
                var frame = wp.media.frame;
                frame.content.mode('browse');
                frame.content.get().collection.props.set({ ignore: (+new Date()) });
                frame.content.get().collection.fetch();
            }
        }

        // Detekcia vloženia obrázkov (Ctrl + V)
        document.addEventListener('paste', function(event) {
            var items = (event.clipboardData || event.originalEvent.clipboardData).items;
            for (var index in items) {
                var item = items[index];
                if (item.kind === 'file') {
                    var blob = item.getAsFile();
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var base64Image = event.target.result;
                        uploadImage(base64Image);
                    };
                    reader.readAsDataURL(blob);
                }
            }
        });

        // Spracovanie tlačidla "Vybrať súbory"
        document.getElementById('__wp-uploader-id-1').addEventListener('click', function() {
            var fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'image/*';
            fileInput.style.display = 'none';
            document.body.appendChild(fileInput);

            fileInput.addEventListener('change', function(event) {
                var file = event.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var base64Image = event.target.result;
                        uploadImage(base64Image);
                    };
                    reader.readAsDataURL(file);
                }
            });

            fileInput.click();
        });

        // Detekcia vloženia obrázkov v modálnom okne mediálnej knižnice
        jQuery(document).on('paste', '.media-modal', function(event) {
            var items = (event.originalEvent.clipboardData || event.clipboardData).items;
            for (var index in items) {
                var item = items[index];
                if (item.kind === 'file') {
                    var blob = item.getAsFile();
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        var base64Image = event.target.result;
                        uploadImage(base64Image);
                    };
                    reader.readAsDataURL(blob);
                }
            }
        });
    });
    
     $filetype['type'],
                            'post_title'     => sanitize_file_name($filename),
                            'post_content'   => '',
                            'post_status'    => 'inherit'
                        );

                        $attach_id = wp_insert_attachment($attachment, $output_path);
                        require_once(ABSPATH . 'wp-admin/includes/image.php');
                        $attach_data = wp_generate_attachment_metadata($attach_id, $output_path);
                        wp_update_attachment_metadata($attach_id, $attach_data);

                        wp_send_json_success(array('attachment_id' => $attach_id));
                    } else {
                        wp_send_json_error('Chyba pri ukladaní obrázku.');
                    }
                } else {
                    wp_send_json_error('Chyba pri vytváraní obrázku.');
                }
            } else {
                wp_send_json_error('GD knihovna nie je dostupná.');
            }
        } else {
            wp_send_json_error('Neplatné Base64 dáta.');
        }
    } else {
        wp_send_json_error('Žiadne Base64 dáta neboli prijaté.');
    }
}
add_action('wp_ajax_upload_pasted_image', 'upload_pasted_image');

				
			
Autor: Ladislav Dubravský
Cena: Zadarmo
Dátum publikácie: 18 júna, 2024

Potrebujete kód na mieru?

Neváhajte ma kontaktovať. Som tu pre vás, aby som odpovedal na vaše otázky a začal spolupracovať na vašom projekte.