Wordpress , display resized image in theme with PHP - wordpress

I'm coding a shortcode that accept one media ID as an attribute. This shortcode should then display the image at an existing size registered with add_image_size. Problem : my image is not displayed at the correct size.
Explanations :
My media image has been uploaded in the WP library. The original file size is huge (1227x924). The media has the ID 294.
I registered an image size in functions.php :
function my_after_setup_theme(){
add_image_size('my-image-size', 210, 136, true);
}
add_action('after_setup_theme', 'my_after_setup_theme');
I insert my shortcode in one of my pages : [my_shortcode imageid="294"]
My shortcode code is :
function my_shortcode_func($atts)
{
$a = shortcode_atts(array(
'imageid' => 0,
), $atts);
if ($a['imageid'] == 0) {
// default placeholder image
$img = 'img src="http://placehold.it/210x136"/>';
} else {
// get resized (NOT WORKING !)
$img = wp_get_attachment_image($a['imageid'], 'my-image-size');
}
return $img;
}
add_shortcode('my_shortcode', 'my_shortcode_func');
I expect the original image to be resized at the correct size (ie : 210x136) in a new thumbnail file. Instead, the $img displays the original image (1227x924) , displayed at an intermediate size via the width and height attributes of the HTML <img> tag :
What am I doing wrong ?
thanks for help.

Did you register the thumbnail size after uploading the media? If so, you will need to use a plugin to regenerate the thumbnails.
Additionally, I don't believe you need to wrap thumbnail size declarations as you have done, I have the following;
if (function_exists('add_theme_support'))
{
add_theme_support('post-thumbnails'); // Featured image support for posts - you may not need this bit.
add_image_size('large', 700, '', true); // Large Thumbnail - This is the bit you would need
}
So it would be worth checking if your thumbnails are actually be generated to start with, as I have never done it the way you have defined in your question.

Related

WordPress: Always create an image for custom image size, even if the uploaded image is smaller than the custom size

I want to generate an extra image size in WordPress. WP lets you use add_image_size like this:
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'original-img', 2000, 99999 );
If the image has the min. width of 2000px, the image size will be generated.
However if the image is smaller the custom size won't be generated.
Is there any option to create an image for the custom image size everytime, no matter of the uploaded image size? Or maybe its possible to additionally save the original image?
To explain why I am trying to achieve: I need a watermark on my images, but need also the original image (or a very big image) as well without the watermark.
I also tried with the "large" image, but here the same problem. By uploading an image smaller than 1024px, the image size wouldn't be created.
You can hook into wp_generate_attachment_metadata and make a copy of the uploaded image there if it wasn't already created. I've included the code to do this below.
Add this to your functions.php. Each step is commented to explain what its doing, but basically during the upload process:
we check if WP created your custom size
If it was, do nothing
Otherwise create a copy of the image called imagename-WxH.extn (e.g.if the uploaded image was cat.jpg and was 700x520px, our copy will be called cat-700x520px.jpg)
Add the copied image as your custom size original-img
Then you can use your original-img custom size in your code and always have an image.
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'original-img', 2000, 99999 );
// Hook into the upload process
add_filter('wp_generate_attachment_metadata','copy_original_img');
// Check if the original image was added, if not make a copy and add it as original-img
function copy_original_img($image_data) {
// if the original-img was created, we don't need to do anything
if (isset($image_data['sizes']['original-img']))
return;
// 1. make a copy of the uploaded image to use for original-img
$upload_dir = wp_upload_dir();
$uploaded_img = $image_data['file'];
$img_w = $image_data['width'];
$img_h = $image_data['height'];
// construct the filename for the copy in the format: imagename-WxH.extn
$path_parts = pathinfo($uploaded_img);
$new_img = $path_parts['filename']."-".$img_w."x".$img_h.".".$path_parts['extension'];
// make a copy of the image
$img_to_copy = $upload_dir['path'] . '/'.$uploaded_img;
$new_img_path = $upload_dir['path'] . '/'.$new_img;
$success = copy($img_to_copy,$new_img_path);
// 2. If the image was copied successfully, add it into the image_data to be returned:
if ($success){
$image_data['sizes']['original-img']['file'] = $new_img;
$image_data['sizes']['original-img']['width'] = $img_w ; // same as uploaded width
$image_data['sizes']['original-img']['height'] = $img_h; // same as uploaded height
$image_data['sizes']['original-img']['mime-type'] = mime_content_type($new_img_path);
}
return $image_data;
}

Adding watermarks to images using alpha channels in wordpress

I find the code below on php.net and it is working perfectly when i add the images mentioned in code ($stamp & $im)
$stamp = imagecreatefrompng('stamp.png');
$im = imagecreatefromjpeg('photo.jpeg');
but my question is that how to use or implement this code in Wordpress post image fetched using
wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID )
also some one please explain me what is happening here. where to add this code? how to make all wordpress post images watermarked with this code.
// Load the stamp and the photo to apply the watermark to
$stamp = imagecreatefrompng('stamp.png');
$im = imagecreatefromjpeg('photo.jpeg');
// Set the margins for the stamp and get the height/width of the stamp image
$marge_right = 10;
$marge_bottom = 10;
$sx = imagesx($stamp);
$sy = imagesy($stamp);
// Copy the stamp image onto our photo using the margin offsets and the photo
// width to calculate positioning of the stamp.
imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));
// Output and free memory
header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
You could use in below hook:
add_filter('wp_handle_upload_prefilter', 'custom_upload_filter' );
function custom_upload_filter( $file ){
//your code goes here.
return $file;
}
Reference
Hook into Wordpress image upload

Add value to WP Attachment Meta Data

I would like to let Wordpress calculate the aspect ratio & orientation when the media is uploaded instead of doing this in the templates. Then I can call images and ask for image.orientation which will give me 'portrait' or 'landscape' as a value.
Example, how it would look like after uploading an image:
Is this possible or do I have to do this in the frontend?
You can write some code for it. Use http://codex.wordpress.org/Function_Reference/wp_get_attachment_metadata to get the width and the height, and then if $width/$height > 1 => landscape, otherwise its portrait. Store this value in the attachment using: http://codex.wordpress.org/Function_Reference/wp_update_attachment_metadata.
You can use an action for this, such as:
add_action('add_attachment', 'process_images');
Adding the solution as well, following from your code attempt (I HAVENT TESTED THIS):
function attachment_orientation_meta($id){
$attachmentInfo = wp_get_attachment_metadata($id);
$attachmentOrientation = ( $attachmentInfo['height'] > $attachmentInfo['width'] ) ? 'portrait' : 'landscape';
update_post_meta($id, 'orientation', $attachmentOrientation);
}
add_action( 'add_attachment', 'attachment_orientation_meta' );

Wordpress Responsie Theme feature image not showing fully

I hae created a website and i haev set a blog with featured images but the images dont show full it just shows half of it even if i change it in css it still shows half.
can anyone help me please
Where the image is shown in code:
// has_post_thumbnail() - boolean
get_the_post_thumbnail($id, $size, $attr ) // gets any thumbnail
the_post_thumbnail( $size, $attr ) // for use inside the loop
// demand a custom featured image size on upload for a custom post type.
add_image_size( 'review_type', 245, 245, true);
// call that size
the_post_thumbnail( $size, $attr ) // for use inside the loop
When uploaded in the media library you can choose the upload image size. However WP creates 3 images upon upload and fits one of them into your page. The function above can specify which image is used by "small", "medium", "large".

How to display ONE image under teaser mode, while multi images under full content?

I'm building a site with Drupal 7.2, and using several useful modules (Views, Display Suite, and 20+ more).
I've added an image field in a content type (article), and set the 'Field Settings' -> 'number of values' to 5, which means users can upload 5 images for this field.
Under 'Full Content' view mode, I'd like to display all the images, but How DO I display only ONE image under 'Teaser' mode? Is there any modules can do this?
I solved this problem by adding a new template for this field type like field--field_image.tpl.php in my case with the following code:
// Reduce image array to single image in teaser view mode
if ($element['#view_mode'] == 'teaser') {
$items = array(reset($items));
}
print render($items);
Hope this helps.
Edit: Here's the (probably) correct way to do it:
function MYTHEME_process_field(&$vars) {
$element = $vars['element'];
// Field type image
if ($element['#field_type'] == 'image') {
// Reduce number of images in teaser view mode to single image
if ($element['#view_mode'] == 'teaser') {
$item = reset($vars['items']);
$vars['items'] = array($item);
}
}
}
It did not work for me, i had to adjust the code sligthly:
function MYTHEME_process_field(&$vars) {
$element = $vars['element'];
// Reduce number of images in teaser view mode to single image
if ($element['#view_mode'] == 'node_teaser' && $element['#field_type'] == 'image') {
$vars['items'] = array($vars['items'][0]);
}
}
One option without having to change code is to use the module Field Multiple Limit. With this module you can choose how many items to show in which view for fields that allow for multiple entries.
Then on the teaser view of the field you can choose how many items to show or to skip.
Just saw this is already answered in Drupal Stack Exchange
function MYTHEME_process_field(&$vars) {
$element = $vars['element'];
// Reduce number of images in teaser view mode to single image
if ($element['#view_mode'] == 'teaser' && $element['#field_type'] == 'image') {
$vars['items'] = array($vars['items'][0]);
}
}
I've changed node_teaser to teaser and it worked for me. Drupal v 7.19
P.S. Do not forget to flush a cache.

Resources