بارگذاری تصاویر base64 در وردپرس

گاهی اوقات برخی از وب‌سایت‌ها تصاویر موجود در صفحه را برای سرعت و عملکرد بهتر به صورت DataURI یا به صورت base64 نمایش می‌دهند. در واقع به جای استفاده از آدرس مستقیم تصویر، از مقدار کد شده آن استفاده می‌شود. در این مقاله قصد داریم کدگذاری base64 و نحوه بارگذاری تصاویر base64 در وردپرس را مورد بررسی قرار دهیم.

تصاویر base64 چیست؟

گاهی اوقات هنگام نمایش تصاویر به جای آدرس اصلی، از کدگذاری base64 استفاده می‌کنند. این کدگذاری با data:image/png;base64 شروع می‌شود. استفاده از این کدگذاری به جای آدرس اصلی می‌تواند در سرعت و کارایی سایت تأثیرگذار باشد.

وب‌سایت‌های مختلفی برای تبدیل تصاویر به کدگذاری base64 وجود دارند. یکی از این وب‌سایت‌ها، وب‌سایت base64-image.de می‌باشد که انواع تصویر با فرمت‌های مختلف را پشتیبانی می‌کندو آن‌ها را به base64 تبدیل می‌کند.

تبدیل آدرس تصویر به کدگذاری base64

در صورتی که تمایل دارید آدرس تصاویر موجود در وردپرس را به صورت base64 نمایش دهید، تابع زیر این کار را برای شما انجام خواهد داد. برای دریافت کد base64 هر تصویر، کافی است شناسه آن را به عنوان ورودی به این تابع بدهید.

نکته: به منظور اجرای این کد، می‌توانید آن را در فایل functions.php پوسته فرزند قرار دهید یا از افزونه Code Snippets استفاده نمایید.

function tidaweb_image_url_to_base64( $attach_id )
{
    // get image src -> $image_info[0]
    $image_info = wp_get_attachment_image_src( $attach_id, 'full' );
    $image_file = file_get_contents( $image_info[0] );

    // get filename from url
    $filename = basename( get_attached_file( $attach_id ) );
    $image_file_type = wp_check_filetype( $filename );

    return 'data:image/'.$image_file_type['ext'].';base64,'.base64_encode( $image_file );
}

تبدیل تصاویر base64 در وردپرس

گاهی اوقات ممکن است تصاویری از نوع base64 در وردپرس داشته باشید که توسط یک تابع یا کدی تولید می‌شوند و بخواهید این تصاویر را در رسانه وردپرس بارگذاری نمایید تا آدرس آن تصاویر را به صورت URL ساده داشته باشید.

تابع زیر عملیات آپلود تصاویر base64 در وردپرس را انجام می‌دهد. این تابع کد base64 تصویر مورد نظر و نام فایلی که می‌خواهید در رسانه ذخیره گردد را به عنوان ورودی می‌گیرد و خروجی آن آرایه‌ای شامل شناسه تصویر بارگذاری شده (attach_id) و آدرس تصویر (attach_url) می‌باشد.

function tidaweb_upload_base64_image( $base64_image_data, $base64_file_name )
{
	// check and get path of upload directory
	$upload_dir = wp_upload_dir();
	$upload_path = str_replace( '/', DIRECTORY_SEPARATOR, $upload_dir['path'] ) . DIRECTORY_SEPARATOR;

	$img = $base64_image_data;
	if(strpos($img, 'image/jpg') !== false)
	{
		$file_extension = "jpg";
		$file_type = "image/jpg";	
		$img = str_replace('data:image/jpg;base64,', '', $img);
	}
	elseif(strpos($img, 'image/jpeg') !== false)
	{
		$file_extension = "jpg";
		$file_type = "image/jpg";
		$img = str_replace('data:image/jpeg;base64,', '', $img);
	}
	else
	{
		$file_extension = "png";
		$file_type = "image/png";	
		$img = str_replace('data:image/png;base64,', '', $img);
	}
	$img = str_replace(' ', '+', $img);
	
	$decoded = base64_decode($img) ;

	$file_name = sanitize_file_name( $base64_file_name ). '.' . $file_extension;
	$hashed_filename  = md5( $file_name . microtime() ) . '-' . $file_name;

	// create file on upload directory
	$image_upload = file_put_contents( $upload_path . $hashed_filename, $decoded );

	//HANDLE UPLOADED FILE
	if( !function_exists( 'wp_handle_sideload' ) ) {
		require_once( ABSPATH . 'wp-admin/includes/file.php' );
	}

	// @new file
	$file             = array();
	$file['error']    = '';
	$file['tmp_name'] = $upload_path . $hashed_filename;
	$file['name']     = $hashed_filename;
	$file['type']     = $file_type;
	$file['size']     = filesize( $upload_path . $hashed_filename );
	
	// upload file to server
	// @new use $file instead of $image_upload
	$uploaded_file = wp_handle_sideload( $file, array( 'test_form' => false ) );
	
	if(empty($uploaded_file['error']))
	{
		$filename = $uploaded_file['file'];
		$attachment = array(
			'post_mime_type' => $uploaded_file['type'],
			'post_title' => preg_replace('/\.[^.]+$/', '', sanitize_file_name( $base64_file_name )),
			'post_content' => '',
			'post_status' => 'inherit',
			'guid' => $upload_dir['url'] . '/' . sanitize_file_name( $base64_file_name )
			);
		$attach_id = wp_insert_attachment( $attachment, $filename );
		if(!is_wp_error($attach_id))
		{
			require_once(ABSPATH . 'wp-admin/includes/image.php');
			$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
			wp_update_attachment_metadata( $attach_id, $attach_data );

			return [
				'attach_id' => $attach_id,
				'attach_url' => wp_get_attachment_image_src( $attach_id, 'full' )[0]
			];
		}
		else
		{
			return [
				'error' => __('Error when uploading image.')
			];
		}
	}
	else
	{
		return [
			'error' => $uploaded_file['error']	
		];
	}
}

در مقاله بالا نحوه آپلود تصاویر base64 در وردپرس مورد بررسی قرار گرفت. در صورتی که سؤالی در این زمینه دارید، می‌توانید آن را از بخش دیدگاه‌ها با ما در میان بگذارید. همچنین اگر دنبال توابع کاربردی و ترفندهای وردپرس می‌گردید، ترفند وردپرس را مشاهده کنید.