There are many PHP solutions and WP plugins, they all come with additional options that I don't want/need, i.e. how the converted files are served, where they are stored, etc.
I need none of all that and am after pure simple code using GD. I don't want to use a plugin, thank you.
When should the encode happen ? At any time you know it is a good point in the hook routine, could be this https://make.wordpress.org/core/2019/11/05/use-of-the-wp_update_attachment_metadata-filter-as-upload-is-complete-hook/ but if you know better or have another solution then use that and possibly let me know why you choose another hook. I would i.e. also be happy with firing a cron job once new images are uploaded if that is better. Also I don't need to have metadata of the converted images in the WP db, fine with having the original .jpeg files and their metadata in the Media Library, the .webp files are just there to be used inside the picture element.
Where should the converted files be stored? wp-content/uploads/ default folder structure, .webp files should be next to .jpeg files all in there.
GD image engine should be used for the conversion. https://developer.wordpress.org/reference/classes/wp_image_editor_gd/ Lately I find imagick just crashes or takes ages to do anything. In WP 5.2 things still worked just fine with imagick but there must have been changes introduced that make using imagick in later versions of WP useless. I find GD to me quite stable and fast, it does not matter it creates lossy WebP versions. The methods for the GD image engine from WP do not seem to include conversion/encoding https://developer.wordpress.org/reference/classes/wp_image_editor_gd/#methods so I am also happy with any methods using in the GD module https://www.php.net/manual/en/book.image.php concerning encoding to WebP.
To get rid of all the extra unneeded image sizes and options WP introduced over time I have these functions/filters in functions.php.
function namespace_disable_image_sizes($sizes)
{
unset($sizes['thumbnail']); // disable thumbnail size
unset($sizes['medium']); // disable medium size
unset($sizes['large']); // disable large size
unset($sizes['medium_large']); // disable medium-large size
unset($sizes['1536x1536']); // disable 2x medium-large size
unset($sizes['2048x2048']); // disable 2x large size
return $sizes;
}
add_action('intermediate_image_sizes_advanced', 'namespace_disable_image_sizes');
// disable scaled image size
add_filter('big_image_size_threshold', '__return_false');
// disable rotated image size
add_filter('wp_image_maybe_exif_rotate', '__return_false');
// disable other image sizes
function namespace_disable_other_image_sizes()
{
remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size()
remove_image_size('another-size'); // disable any other added image sizes
}
add_action('init', 'namespace_disable_other_image_sizes');
High resolution and large dimension images are to be converted, see attached image as example, image types can be jpeg, png, etc.
The sizes in place are more or less these with possible variations.
add_image_size('4096w', 4096, 0);
add_image_size('3200w', 3200, 0);
add_image_size('2560w', 2560, 0);
add_image_size('1920w', 1920, 0);
add_image_size('1600w', 1600, 0);
add_image_size('1280w', 1280, 0);
add_image_size('1140w', 1140, 0);
add_image_size('1024w', 1024, 0);
add_image_size('960w', 960, 0);
add_image_size('800w', 800, 0);
add_image_size('768w', 768, 0);
add_image_size('640w', 640, 0);
add_image_size('425w', 425, 0);
add_image_size('320w', 320, 0);
add_image_size('240w', 240, 0);
I use the picture element with more or less the following setup, so I have the browser decide what is needed and hence don't want/need server side .htaccess rules or backend configs. https://dev.opera.com/articles/responsive-images/
<picture>
<source
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.webp 200w,
opera-400.webp 400w,
opera-800.webp 800w,
opera-1200.webp 1200w,
opera-1600.webp 1600w,
opera-2000.webp 2000w"
type="image/webp">
<img
src="opera-400.jpg" alt="The Oslo Opera House"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="opera-200.jpg 200w,
opera-400.jpg 400w,
opera-800.jpg 800w,
opera-1200.jpg 1200w,
opera-1600.jpg 1600w,
opera-2000.jpg 2000w">
</picture>
What have I tried?
a) https://wordpress.stackexchange.com/questions/256351/hook-after-image-is-uploaded-and-image-sizes-generated/256352
b) https://wordpress.stackexchange.com/questions/38582/hook-to-get-image-filename-when-it-is-uploaded
c) WordPress - Blur Image on Upload
d) Convert Images into WebP
e) I have read through and understood https://kinsta.com/blog/wordpress-hooks/#filters-example-2-insert-content-after-a-post - however what I am missing is a way to see/know what data I am working with, i.e.
add_filter('wp_generate_attachment_metadata', 'gd_webp_encode', 10, 3);
function gd_webp_encode($metadata, $attachment_id, $context){
ob_start();
echo $attachment_id;
echo $metadata;
ob_end_clean();
return $metadata;
}
will show me nothing, same with trying to log to console or to a file in the plugin folder. Without knowing/seeing the data and what variable names hold what data I am just doing trial and error and guessing, no coding. So given above code, how would it first of all be possible to see/know what variables hold what data at that point in time and make that readable somewhere, i.e. in a log file in the plugin folder?
Bottom line, given above setup, help me understand what variables hold what data i.e. after upload in a hook and include code where I can make a WebP version of all the sizes and the original created using the GD image engine.
Both plugins work well (create webp images in uploads directory), but I am wondering how to call the webp images with wp functions (get_the_post_thumbnail_url or wp_get_attachment_url).
In media, you cannot see webp images, so you cannot select them.
To know what data you work with inside a filter or action and to see what variable names hold what values a helper function like below can be used.
function debug( $info ) {
$message = null;
if ( is_string( $info ) || is_int( $info ) || is_float( $info ) ) {
$message = $info;
} else {
$message = var_export( $info, true );
}
if ( $fh = fopen( ABSPATH . '/gdwebpconvert.log', 'a' ) ) {
fputs( $fh, date( 'Y-m-d H:i:s' ) . " $message\n" );
fclose( $fh );
}
}
This will create a gdwebpconvert.log file in the root directory of your WordPress installation and any string, integer, float or array you put into debug($value_xyz); will be logged to that file with a date and time. On Linux you can then just go to the directory that holds the file and do tail -f gdwebpconvert.log and the latest entry to that file will be shown in the terminal.
As an alternative you can use WordPress's own debugging feature by adding these lines to wp-config.php.
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', true);
This will lead to info being output to the debug.log file, also in the root directory of your WordPress installation, though it will also add tons more data in there all the time. So I prefer the above little helper function to get just the value I currently want to see without having to search the debug.log file for what I am looking for.
As for the conversion, as soon as I could see what data I am working with I wrote a class that converts the uploaded image and all its created sizes after the upload is done to the WebP format. Go ahead an uncomment the debug() statements to follow along. Given this https://github.com/Imagick/imagick/issues/358 and the issues I described with Imagick since WordPress 5.2 this presents a simple solution to just create WebP versions of your files on the server that you can then use in any way you like without automatic .htaccess or other features added.
Feel free to do with this what you want and need. ;)
<?php
/**
* Plugin Name: GD WebP Converter
* Plugin URI: https://stackoverflow.com/a/67234000
* Description: After uploading an image it will be converted to WebP format using the GD image engine. <a target="_blank" href="https://developer.wordpress.org/reference/classes/wp_image_editor_gd/">WP GD Image Engine</a> If the file is deleted form the Media Library the created WebP conversions will also be deleted.
* Version: 1.0.0
* Requires at least: 5.5
* Requires PHP: 7.2
* Author: lowtechsun
* Author URI: https://stackoverflow.com/users/1010918/lowtechsun
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
//=================================================
// Security: Abort if this file is called directly
//=================================================
if ( ! defined( 'ABSPATH' ) ) {
die;
}
function debug( $info ) {
$message = null;
if ( is_string( $info ) || is_int( $info ) || is_float( $info ) ) {
$message = $info;
} else {
$message = var_export( $info, true );
}
if ( $fh = fopen( ABSPATH . '/gdwebpconvert.log', 'a' ) ) {
fputs( $fh, date( 'Y-m-d H:i:s' ) . " $message\n" );
fclose( $fh );
}
}
add_filter( 'wp_generate_attachment_metadata', 'gd_webp_converter', 10, 2 );
function gd_webp_converter( $metadata, $attachment_id ) {
$gd_webp_converter = new GDWebPConverter( $attachment_id );
$gd_webp_converter->check_file_exists( $attachment_id );
$gd_webp_converter->check_mime_type();
$gd_webp_converter->create_array_of_sizes_to_be_converted( $metadata );
$gd_webp_converter->convert_array_of_sizes();
return $metadata;
}
class GDWebPConverter {
private $file_path;
private $file_dirname;
private $file_ext;
private $file_name_no_ext;
private $array_of_sizes_to_be_converted = array();
private $array_of_sizes_to_be_deleted = array();
public function __construct( $attachment_id ) {
$this->file_path = get_attached_file( $attachment_id );
debug( $this->file_path );
// https://stackoverflow.com/questions/2183486/php-get-file-name-without-file-extension/19040276
$this->file_dirname = pathinfo( $this->file_path, PATHINFO_DIRNAME );
debug( $this->file_dirname );
$this->file_ext = strtolower( pathinfo( $this->file_path, PATHINFO_EXTENSION ) );
debug( $this->file_ext );
$this->file_name_no_ext = pathinfo( $this->file_path, PATHINFO_FILENAME );
debug( $this->file_name_no_ext );
}
public function check_file_exists( $attachment_id ) {
$file = get_attached_file( $attachment_id );
if ( ! file_exists( $file ) ) {
$message = 'The uploaded file does not exist on the server. Encoding not possible.';
debug( $message );
throw new Exception( 'The uploaded file does exist on the server. Encoding not possible.', 1 );
}
}
public function check_mime_type() {
// https://www.php.net/manual/en/function.finfo-file.php
$finfo = finfo_open( FILEINFO_MIME_TYPE );
$this->file_mime_type = finfo_file( $finfo, $this->file_path );
finfo_close( $finfo );
// debug( $this->file_mime_type );
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
$this->allowed_mime_type = array( 'image/jpeg', 'image/png' );
if ( ! in_array( $this->file_mime_type, $this->allowed_mime_type, true ) ) {
$message = 'MIME type of file not supported';
// debug( $message );
throw new Exception( 'MIME type of file not supported', 1 );
}
}
public function create_array_of_sizes_to_be_converted( $metadata ) {
// push original file to the array
array_push( $this->array_of_sizes_to_be_converted, $this->file_path );
// debug( $this->array_of_sizes_to_be_converted );
// push all created sizes of the file to the array
foreach ( $metadata['sizes'] as $value ) {
// debug( $value['file'] );
array_push( $this->array_of_sizes_to_be_converted, $this->file_dirname . '/' . $value['file'] );
}
// // debug( $this->array_of_sizes_to_be_converted );
}
public function convert_array_of_sizes() {
debug( $this->array_of_sizes_to_be_converted );
switch ( $this->file_ext ) {
case 'jpeg':
case 'jpg':
foreach ( $this->array_of_sizes_to_be_converted as $key => $value ) {
$image = imagecreatefromjpeg( $value );
if ( 0 === $key ) {
imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp', 80 );
} else {
$current_size = getimagesize( $value );
// debug( $current_size );
imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '-' . $current_size[0] . 'x' . $current_size[1] . '.webp', 80 );
}
imagedestroy( $image );
}
break;
case 'png':
foreach ( $this->array_of_sizes_to_be_converted as $key => $value ) {
$image = imagecreatefrompng( $value );
imagepalettetotruecolor( $image );
imagealphablending( $image, true );
imagesavealpha( $image, true );
if ( 0 === $key ) {
imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp', 80 );
} else {
$current_size = getimagesize( $value );
// debug( $current_size );
imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '-' . $current_size[0] . 'x' . $current_size[1] . '.webp', 80 );
}
imagedestroy( $image );
}
break;
// animated GIF to WebP not supported by GD - imagecreatefromgif
// case 'gif':
// foreach ( $this->array_of_sizes_to_be_converted as $key => $value ) {
// $image = imagecreatefromgif( $value );
// if ( 0 === $key ) {
// imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp', 80 );
// } else {
// $current_size = getimagesize( $value );
// // debug( $current_size );
// imagewebp( $image, $this->file_dirname . '/' . $this->file_name_no_ext . '-' . $current_size[0] . 'x' . $current_size[1] . '.webp', 80 );
// }
// imagedestroy( $image );
// }
// break;
default:
return false;
}
}
public function create_array_of_sizes_to_be_deleted( $attachment_id ) {
// debug( $attachment_id );
$this->attachment_metadata_of_file_to_be_deleted = wp_get_attachment_metadata( $attachment_id );
// debug( $this->attachment_metadata_of_file_to_be_deleted );
// push original file to the array
array_push( $this->array_of_sizes_to_be_deleted, $this->file_dirname . '/' . $this->file_name_no_ext . '.webp' );
// debug( $this->array_of_sizes_to_be_converted );
// push all created sizes of the file to the array
foreach ( $this->attachment_metadata_of_file_to_be_deleted['sizes'] as $value ) {
// debug( $value );
$this->value_file_name_no_ext = pathinfo( $value['file'], PATHINFO_FILENAME );
// debug( $this->value_file_name_no_ext );
array_push( $this->array_of_sizes_to_be_deleted, $this->file_dirname . '/' . $this->value_file_name_no_ext . '.webp' );
}
// debug( $this->array_of_sizes_to_be_deleted );
}
public function delete_array_of_sizes() {
debug( $this->array_of_sizes_to_be_deleted );
foreach ( $this->array_of_sizes_to_be_deleted as $key => $value ) {
// debug( $value );
unlink( $value );
}
}
}
add_action( 'delete_attachment', 'delete_webp_conversions', 10 );
function delete_webp_conversions( $attachment_id ) {
$delete_webp_conversions = new GDWebPConverter( $attachment_id );
$delete_webp_conversions->create_array_of_sizes_to_be_deleted( $attachment_id );
$delete_webp_conversions->delete_array_of_sizes();
}
In the end I also added a method that, once you opt to delete a file by clicking `Delete Permanently" in the Media Library it will delete all the created WebP versions of the file. If you delete a post this will not happen as per default behavior of WordPress as you never know if you might need the file in another post.
Make sure that you default to the GD image editor if you want to make good use of this class. => https://support.pagely.com/hc/en-us/articles/115000052451
<?php
/**
* Plugin Name: Use GD For Image Processing
* Plugin URI: https://support.pagely.com/hc/en-us/articles/115000052451
* Description: Sets GD to the default image processor.
* Version: 1.0.0
* Requires at least: 5.5
* Requires PHP: 7.2
* Author: JeffMatson, Pagely
* Author URI: https://pagely.com
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
add_filter( 'wp_image_editors', 'pagely_default_to_gd' );
function pagely_default_to_gd() {
return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
}
Thx, Jan!
here I have a shortcode that coontains input file type which I want to load a php file on .blur function.
// Where the input file is embedded
<input class="vh-radio-toggle" id="toggle8" type="radio" name="toggle" />
<label class="accordion-label" for="toggle8">I have an inspiration neon sign.</label>
<section id="content8">
<label for="avatar">Send your inspirational custom neon logo image here:</label>
<?php echo do_shortcode('[neon-inspire]');?>
</section>
Here is the input file html. I just made it in shortcode.
function misha_uploader_callback(){
return '<input type="file" accept="image/png, image/jpeg" name="profilepicture" size="25" />
<input type="text" name="neon_inspi" value="' . echo $neonInspi; .'">';
}
Here's my jquery ajax function.
jQuery("#neon-inspi").blur(function() {
var url = "http://localhost/neonew/wp-content/themes/twentytwenty/process_upload.php";
jQuery.post(url, {} , function(data) {
// The data here represents the answer from the server
console.log("Data Loaded: " + data);
});
});
Here's my process_upload.php. I want to load this php file by the .blur function . And I want to get the
$neonInspi value to return to my input field below the input file html
<?php
// WordPress environment
require( dirname(__FILE__) . '/../../../wp-load.php' );
$wordpress_upload_dir = wp_upload_dir();
// $wordpress_upload_dir['path'] is the full server path to wp-content/uploads/2017/05, for multisite works good as well
// $wordpress_upload_dir['url'] the absolute URL to the same folder, actually we do not need it, just to show the link to file
$i = 1; // number of tries when the file with the same name is already exists
$profilepicture = $_FILES['profilepicture'];
$new_file_path = $wordpress_upload_dir['path'] . '/' . $profilepicture['name'];
$new_file_mime = mime_content_type( $profilepicture['tmp_name'] );
if( empty( $profilepicture ) )
die( 'File is not selected.' );
if( $profilepicture['error'] )
die( $profilepicture['error'] );
if( $profilepicture['size'] > wp_max_upload_size() )
die( 'It is too large than expected.' );
if( !in_array( $new_file_mime, get_allowed_mime_types() ) )
die( 'WordPress doesn\'t allow this type of uploads.' );
while( file_exists( $new_file_path ) ) {
$i++;
$new_file_path = $wordpress_upload_dir['path'] . '/' . $i . '_' . $profilepicture['name'];
}
// looks like everything is OK
if( move_uploaded_file( $profilepicture['tmp_name'], $new_file_path ) ) {
$upload_id = wp_insert_attachment( array(
'guid' => $new_file_path,
'post_mime_type' => $new_file_mime,
'post_title' => preg_replace( '/\.[^.]+$/', '', $profilepicture['name'] ),
'post_content' => '',
'post_status' => 'inherit'
), $new_file_path );
// wp_generate_attachment_metadata() won't work if you do not include this file
require_once( ABSPATH . 'wp-admin/includes/image.php' );
// Generate and save the attachment metas into the database
wp_update_attachment_metadata( $upload_id, wp_generate_attachment_metadata( $upload_id, $new_file_path ) );
// Show the uploaded file in browser
// wp_redirect( $wordpress_upload_dir['url'] . '/' . basename( $new_file_path ) );
$neonInspi = $wordpress_upload_dir['url'] . '/' . basename( $new_file_path ) ;
}
How do I generate an html file (with specific styling) from a Gravity Form submission using PHP? Right now, I'm using Gravity Form with Gravity PDF to generate PDFs, but I also need these pdfs to be generated as html files. I was told that I could use a gf hook called gform_notification. Here is what I have so far:
add_filter( 'gform_notification_30', 'add_attachment_html', 10, 3 ); //target form id 2, change to your form id
function write_html($filename, $entry){
$filename = fopen( 'file_'.'rand(0, 999999)'.'.html', "w");
$text = $entry;
$path = '/public_html/wp-content/uploads/HTML/';
fwrite($path.$filename, $text);
fclose($filename); }
function add_attachment_html( $notification, $form, $entry ) {
//There is no concept of user notifications anymore, so we will need to target notifications based on other criteria,
//such as name or subject
if( $notification['name'] == 'HTML' ) {
//get upload root for WordPress
$upload = wp_upload_dir();
$upload_path = $upload['basedir'];
//add file, use full path , example -- $attachment = "C:\\xampp\\htdocs\\wpdev\\wp-content\\uploads\\test.txt"
$attachment = $upload_path . $filename;
GFCommon::log_debug( __METHOD__ . '(): file to be attached: ' . $attachment );
if ( file_exists( $attachment ) ) {
$notification['attachments'] = rgar( $notification, 'attachments', array() );
$notification['attachments'][] = $attachment;
GFCommon::log_debug( __METHOD__ . '(): file added to attachments list: ' . print_r( $notification['attachments'], 1 ) );
} else {
GFCommon::log_debug( __METHOD__ . '(): not attaching; file does not exist.' );
}
}
//return altered notification object
return $notification;
}
I'm brand new to coding so please bear with me. My biggest issue is generating the new HTML file. I think I can figure out how to attach it to the notification email (function add_attachment_html) once I get that part done.
I have this upload file system in wordpress and everything is working fine but the file wont go into the folder. Here's what i have right now:
if ( ! function_exists( 'wp_handle_upload' ) ) {
require_once( ABSPATH . 'wp-admin/includes/file.php' );
}
// Change your upload directory
function my_upload_dir(){
return PLUGIN_DIR . '/uploads/';
}
// Register our path override.
add_filter( 'upload_dir', 'my_upload_dir' );
// Set where to get the file from
$uploadedfile = $_FILES["attach"];
$upload_overrides = array( 'test_form' => false );
// Do the file move
$movefile = wp_handle_upload($uploadedfile, $upload_overrides);
// Set everything back to normal.
remove_filter( 'upload_dir', 'my_upload_dir' );
// Return an error if it couldn't be done
if (!$movefile || isset( $movefile['error'])) {
echo $movefile['error'];
}
its seems to be working fine (no errors) but the image wont show in the folder.
any help would be appreciated.
I think This code is working Fine.
$date=strtotime(date('Y-m-d H:i:s'));
$pro_image_name = $date.$_FILES['your Input type File Name']['name'];
$allowed = array('gif','png','jpg');
$ext = pathinfo($pro_image_name, PATHINFO_EXTENSION);
$root_path = get_template_directory();
if(!in_array($ext,$allowed) ) { ?>
<span style="font-size:22px; color:red;">Uploaded File Not Supported</span>
<?php } else {
move_uploaded_file($_FILES['updateimg']['tmp_name'],$root_path."/images/".$pro_image_name);
$image_get_path = site_url()."/wp-content/themes/prathak/images/".$pro_image_name;
update_user_meta(get_current_user_id() , 'userpic' , $image_get_path );
}
Good Luck
Working with wordpress 4.2.2, when I use this code in child theme function.php to change the attachments upload directory according to each post type :
function wpse_16722_type_upload_dir( $args ) {
// Get the current post_id
$id = ( isset( $_REQUEST['post_id'] ) ? $_REQUEST['post_id'] : '' );
if( $id ) {
// Set the new path depends on current post_type
$newdir = '/' . get_post_type( $id );
$args['path'] = str_replace( $args['subdir'], '', $args['path'] ); //remove default subdir
$args['url'] = str_replace( $args['subdir'], '', $args['url'] );
$args['subdir'] = $newdir;
$args['path'] .= $newdir;
$args['url'] .= $newdir;
return $args;
}
}
add_filter( 'upload_dir', 'wpse_16722_type_upload_dir' );
I get a blank page!!
there is no empty rows in the function.php and the problem appears only after adding this code. I really need it to organize my upload folder, but without a blank page.
is there any solution?
As pointed out above, you need to see the error reporting. Add to the top of wp-config.php:
php error_reporting(E_ALL); ini_set('display_errors', 1);
If that's not working, find define('WP_DEBUG', false); and set the value to true
This might also help, add to the top of wp-config to pipe errors to err.log at your document root:
#ini_set( 'log_errors', 'On' );
#ini_set( 'display_errors', 'Off' );
#ini_set( 'error_log', $_SERVER['DOCUMENT_ROOT'] . '/err.log' );