Im using the following code at functions.php to resize my IFRAMES
function add_youtube_size($youtubehtml) {
if (strpos($youtubehtml, "<iframe" ) !== false) {
$youtubesearch = array( 'width="460"', 'height="310"');
$youtubereplace = array( 'width="600"', 'height="338"');
$youtubehtml = str_replace($youtubesearch, $youtubereplace, $youtubehtml);
return $youtubehtml;
} else {
return $youtubehtml;
}
}
add_filter('the_content', 'add_youtube_size', 10);
But this code only edit the size of iframes with 460 x 310.
There Is any way i can change that line $youtube search = array( 'width="460"', 'height="310"'); to get any possible sizes?
Yes you can change it
$youtubesearch = array( 'width="460"', 'height="310"');
$youtubereplace = array( 'width="600"', 'height="338"');
In those lines change both width and height to what you need but it important that your search video also should available in your written width and height
Related
In my application I utilize TCPDF to create a PDF that pastes an SVG onto it with the $link being a url that is being provided by the user so the SVG on the PDF is clickable like this
// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, $pageLayout, true, 'UTF-8', false);
// remove default header/footer
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// set margins
$pdf->SetMargins(0, 0, 0);
$pdf->SetXY(0, 0);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, 0);
// set image scale factor
$pdf->setImageScale(1);
// add a page
$pdf->AddPage();
$fullPath = "$path".'qr-code/'."$uniqname".'.svg';
// Paste SVG onto page
$pdf->ImageSVG($file=$fullPath, $x=0, $y=0, $w='', $h='', $link=$query, $align='', $palign='', $border=0, $fitonpage=true);
/* Save as File */
$pdf->Output($path.'temp/'.$uniqname.'.pdf', 'F');
I then turn this PDF into a fully black CMYK PDF using Ghostscript
$targetFile = $path.'temp/'.$uniqname.'.pdf';
$iccFile = $this->params->get('ICC_FILE');
$process = new Process(['gs', '-o', $path.'pdf/'.$uniqname.'.pdf', '-sDEVICE=pdfwrite', '-sColorConversionStrategy=Gray', '-dProcessColorModel=/DeviceGray', '-dCompatibilityLevel=1.4', '-dOverrideICC=true', "-sDefaultCMYKProfile=$iccFile", $targetFile]);
$process->run();
if (!$process->isSuccessful()) {
throw new ProcessFailedException($process);
}
And at the end I merge this PDF with another containing a Logo using FDPI like so
// create second PDF document for pasting logo
$pdf = new \setasign\Fpdi\Tcpdf\Fpdi(PDF_PAGE_ORIENTATION, PDF_UNIT, $pageLayout, true, 'UTF-8', false);
// remove default header/footer
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// set margins
$pdf->SetMargins(0, 0, 0);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, 0);
// set image scale factor
$pdf->setImageScale(1);
// add a page
$pdf->AddPage();
/* Import fullHeight page */
$pages = $pdf->setSourceFile( $path.'pdf/'.$uniqname.'.pdf', 'F' );
$page = $pdf->ImportPage( 1 );
$pdf->useTemplate( $page, 0, 0 );
if($logoselect == 'eng')
{
$logos = $pdf->setSourceFile( $path.'img/engadin_online_CMYK.pdf', 'F' );
$logo = $pdf->ImportPage( 1 );
$pdf->useTemplate( $logo, 34.25, 33.75, null, 32.5);
}
if($logoselect == 'gam')
{
$logos = $pdf->setSourceFile( $path.'img/gammetermedia_CMYK.pdf', 'F' );
$logo = $pdf->ImportPage( 1 );
$pdf->useTemplate( $logo, 34.25, 33.75, null, 32.5);
}
// Close and output PDF document
$base = $pdf->Output('qrcode.pdf', 'E');
My problem now is that the link I created on the SVG of the first PDF is not in the last PDF anymore. Is there any way I can preserve this link so that it is still clickable in the last PDF or any other way I can achieve the same result?
As requested heres the initial pdf, the ghostscript output, and the final pdf
I'm using the following code to open the WordPress media uploader in my plugin. The code works fine and returns the selected image.
/* media*/
var mediaUploader;
$('#upload_image_button').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Select Image',
button: {
text: 'Select Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#background_image').val(attachment.url);
console.log(attachment.sizes);
});
mediaUploader.open();
});
However when I look at the console - the custom image sizes (height and width) in the attachment.sizes are wrong, but the image, e.g. An image of 1024 x 1024 reports as 580x580 - but the filename clearly shows 1024x1024.
Any ideas on why this would be the case?
edit:
Here is an image of all of the Image sizes in WordPress including 1 from the theme and one I added as a test.
As you can see the thumbnail , medium and full sizes are correct but large and the 2 added (using add_image_size( 'imagetest', 1200, 630, true ); // Hard Crop Mode) Are incorrect.
Thanks in advance.
In my theme's functions.php I've added this:
function imagething () {
add_theme_support( 'post-thumbnails' );
add_image_size( 'new-custom-size', 1000, 500 );
}
add_action( 'after_setup_theme', 'imagething' );
However, when I go to media, and upload a file, I can't select the new image format.
For make the the size created with add_image_size available in the media uploader select, you need to use the filter image_size_names_choose and add your custom created size to the list of available dimensions, like this:
add_filter( 'image_size_names_choose', 'so46754923_image_size_names_choose' );
function so46754923_image_size_names_choose( $sizes ) {
return array_merge( $sizes, array(
'new-custom-size' => __( 'New Custom Size Name' ),
) );
}
Image size not showing right in the image uploader select
In case the size you chose isn't showing right in the Image Uploader Select, it may be for 2 reasons:
Content_Width set for your theme
add_image_size() crop parameter is set to false, in this case, the uploaded image may not be in the desired size.
Content width defines width for your content (images, oembed, etc...)
Example: Suppose you are using twenty seventeen theme and added a image size like you said
add_image_size( 'new-custom-size', 1000, 500, true ); //in my example I've used crop true, so the image can really be 1000 x 500, in case you don't understand about crop you have to make a research about it.
In the Twenty Seventeen the content_width is set for 525
$GLOBALS['content_width'] = 525;
And the you added the code I provided above ( so46754923_image_size_names_choose() )
You will see New Custom Size - 525 x 263
If you comment the line
$GLOBALS['content_width'] = 525;
You will see New Custom Size - 1000 x 500
I have a funny trouble with CKEditor, it's described as below:
In CKEditor, I create a headline, an iframe or insert an image. It creates a "BORDER" around the content of the headline, iframe or image.
Now, I scroll the wheel of mouse up or down out of editor area, the "BORDER" still appears as below:
How I can remove this "BORDER"?
Please help me.
Thank in advance,
Vu
What you are seeing is IE native feature. Images, floated divs etc. get these resize borders.
IIRC any element which has hasLayout property will gain these resize handles.
In IE 8-10 there is possibility to block object resizing with - disableObjectResizing.
Unfortunately IE11 doesn't provide any handles to work around this problem. This is IE11 bug. There is a hack for IE11 which was not included into core code - https://dev.ckeditor.com/ticket/9317#comment:16.
Depending on method used for creating CKEditor, this hack can be for example implemented as follows:
If classic editor and replace method is used -
var editor = CKEDITOR.replace( 'editor1', {});
editor.on( 'pluginsLoaded', function( evt ){
editor.on( 'contentDom', function( e ){
var editable = editor.editable(),
element = editable.$;
if ( element.addEventListener ) {
// IE up to 10.
element.addEventListener( 'mscontrolselect', function( evt ) {
evt.preventDefault();
} );
} else {
// IE11 and higher.
element.attachEvent( 'oncontrolselect', function( evt ) {
evt.returnValue = false;
} );
}
});
});
If classic or inline editors are created automatically -
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor;
editor.on( 'contentDom', function( e ){
var editable = editor.editable(),
element = editable.$;
if ( element.addEventListener ) {
// IE up to 10.
element.addEventListener( 'mscontrolselect', function( evt ) {
evt.preventDefault();
} );
} else {
// IE11 and higher.
element.attachEvent( 'oncontrolselect', function( evt ) {
evt.returnValue = false;
} );
}
});
});
NOTE: Please also have a look at https://dev.ckeditor.com/ticket/9317#comment:26. There are other scenarios where resizing might get broken. It would be good to check if this hack works for all of them.
I would like to do some custom processing on a certain thumbnail size in Wordpress with ImageMagick beyond the normal Wordpress functionality and am not quite sure how to go about doing this.
So I add my new thumbnail size:
add_image_size( 'new-thumb', 100, 100 );
And then this is where I'm not sure where I should hook into. Before the final copy of the thumbnail is saved within Wordpress I want to do some custom processing on it. Basic psuedo code for what I want is:
The_hook_or_action_that_fires_when_a_thumbnail_is_saved() {
if (<Thumbnail Being Generated> == 'new-thumb') {
$thumb_file = 'the thumbnail image we are about to save';
$thumbfile = 'do some imagemagic stuff here';
}
save_thumbnail;
}
I can handle the imagemagick stuff, but I'm not sure how / where to hook this custom thumbnail processing into.
Any advise would be greatly appreciated!
Thanks #brasofilo for pointing me in the right direction...
I poked around a bit and figured this one out. You can hook into wp_generate_attachment_metadata and do some image manipulation.
The basics of what I was trying to do is resize an image to a specific size ("brands" thumbnail), then expand the canvas for that thumbnail to a static height and width with a white background.
In case anyone has a similar situation I thought I would paste some code. It could be cleaned up to remove the repletion for each image type. The one issue with this code is that if the original image size is less than the desired thumbnail size it will not be generated (which is WordPress functionality).
add_image_size( 'brands', 200, 168 );
add_filter('wp_generate_attachment_metadata','replace_uploaded_image');
function replace_uploaded_image($image_data) {
// if there is no brands image : return
if ( !isset($image_data['sizes']['brands']) )
return $image_data;
//Set our desired static height / width (200px * 168px)
$staticWidth = 200;
$staticHeight = 168;
// paths to the uploaded image and the large image
$upload_dir = wp_upload_dir();
$brands_image_location = $upload_dir['path'] . '/' . $image_data['sizes']['brands']['file'];
// set our temp image file
$brands_image_location_tmp = "$brands_image_location.tmp";
// get the attributes of the source image
list($imageWidth, $imageHeight, $imageType, $imageAttr) = getimagesize($brands_image_location);
// there are different php functions depending on what type of image it is, so check the type
switch($imageType) {
//GIF
case 1:
//Create a 200x168 white canvas
$newimage=imagecreatetruecolor($staticWidth,$staticHeight);
$white=imagecolorallocate($newimage, 255, 255, 255);
imagefill($newimage,0,0,$white);
//Calculate where the image should start so its centered
if($imageWidth == $staticWidth) { $x_pos = 0; } else { $x_pos = round( ($staticWidth - $imageWidth) / 2 ); }
if($imageHeight == $staticHeight) { $y_pos = 0; } else { $y_pos = round( ($staticHeight - $imageHeight) / 2 ); }
//Copy the source image to the new canvas
$src = imagecreatefromgif($brands_image_location);
imagecopy($newimage, $src, $x_pos, $y_pos, 0, 0, $imageWidth, $imageHeight);
imagegif($newimage,$brands_image_location_tmp);
// delete the uploaded image
unlink($brands_image_location);
// rename the temporary brands image
rename($brands_image_location_tmp, $brands_image_location);
// update image metadata and return them
$image_data['sizes']['brands']['width'] = $staticWidth;
$image_data['sizes']['brands']['height'] = $staticHeight;
break;
//JPG
case 2:
//Create a 200x168 white canvas
$newimage=imagecreatetruecolor($staticWidth,$staticHeight);
$white=imagecolorallocate($newimage, 255, 255, 255);
imagefill($newimage,0,0,$white);
//Calculate where the image should start so its centered
if($imageWidth == $staticWidth) { $x_pos = 0; } else { $x_pos = round( ($staticWidth - $imageWidth) / 2 ); }
if($imageHeight == $staticHeight) { $y_pos = 0; } else { $y_pos = round( ($staticHeight - $imageHeight) / 2 ); }
//Copy the source image to the new canvas
$src = imagecreatefromjpeg($brands_image_location);
imagecopy($newimage, $src, $x_pos, $y_pos, 0, 0, $imageWidth, $imageHeight);
imagejpeg($newimage,$brands_image_location_tmp);
// delete the uploaded image
unlink($brands_image_location);
// rename the temporary brands image
rename($brands_image_location_tmp, $brands_image_location);
// update image metadata and return them
$image_data['sizes']['brands']['width'] = $staticWidth;
$image_data['sizes']['brands']['height'] = $staticHeight;
break;
//PNG
case 3:
//Create a 200x168 white canvas
$newimage=imagecreatetruecolor($staticWidth,$staticHeight);
$white=imagecolorallocate($newimage, 255, 255, 255);
imagefill($newimage,0,0,$white);
//Calculate where the image should start so its centered
if($imageWidth == $staticWidth) { $x_pos = 0; } else { $x_pos = round( ($staticWidth - $imageWidth) / 2 ); }
if($imageHeight == $staticHeight) { $y_pos = 0; } else { $y_pos = round( ($staticHeight - $imageHeight) / 2 ); }
//Copy the source image to the new canvas
$src = imagecreatefrompng($brands_image_location);
imagecopy($newimage, $src, $x_pos, $y_pos, 0, 0, $imageWidth, $imageHeight);
imagepng($newimage,$brands_image_location_tmp);
// delete the uploaded image
unlink($brands_image_location);
// rename the temporary brands image
rename($brands_image_location_tmp, $brands_image_location);
// update image metadata and return them
$image_data['sizes']['brands']['width'] = $staticWidth;
$image_data['sizes']['brands']['height'] = $staticHeight;
break;
}
return $image_data;
}
In my library I have the following:
Set custom name for generated thumbnails
Very interesting manipulation of thumb names and crop. Check the original Q&A linked in this one.
Uses:
intermediate_image_sizes_advanced
wp_generate_attachment_metadata
Automatically Use Resized Images Instead Of Originals
Uses:
wp_generate_attachment_metadata
How to automatically add rounded corners to thumbnails?
Uses:
image_make_intermediate_size and L#432
How to Require a Minimum Image Dimension for Uploading?
Uses:
wp_handle_upload_prefilter
Organize uploads by year, month and day
Uses:
wp_handle_upload_prefilter
wp_handle_upload and L#466
upload_dir
I would like to suggesta change, in order to make it work with Thumbnails Regenerate Plugin
$upload_dir = wp_upload_dir();
$brands_image_location = $upload_dir['basedir'].'/'.dirname($image_data['file']) . '/' . $image_data['sizes']['brands']['file'];
$brands_image_location = $brands_image_location.'.tmp';
That's so because wp_upload_dir returns the path for the current year-month but some previously uploaded images could have different path.