I am new to WordPress technology.I want get and show images uploaded to WordPress theme.How can i show those images on my theme.
Can i loop through or any special command for that present in WordPress?
You can retrieve image in loop
the_post_thumbnail_url(); // without parameter -> 'post-thumbnail'
the_post_thumbnail_url( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail_url( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail_url( 'large' ); // Large resolution (default 640px x 640px max)
Wordpress save image separately as attachment and link with post meta
You can get image from wordpress database -
There are four valid sizes built in to the WordPress core.
the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium'); // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large'); // Large resolution (default 640px x 640px max)
the_post_thumbnail('full'); // Original image resolution (unmodified)
for Blog Image you can use -
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img alt="Post Thumbnail" src="<?php echo esc_url($imageUrl[0]); ?>">
<?php endif; ?>
If you want to set image size in code you can use following code in function.php file
<?php add_image_size('product-size-large',300, 500, true);?>
then use this size here
<?php $imageUrl = wp_get_attachment_image_src(get_post_thumbnail_id(),'product-size-large'); ?>
Also, for more options see the Codex.
Related
I am trying to add a custom image size in WordPress like so:
// Add custom image sizes
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' ); // The important part
}
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'home_portrait size', 1000, 1000, false );
}
/* Display Custom Image Sizes */
add_filter('image_size_names_choose','wpshout_custom_sizes');
function wpshout_custom_sizes($sizes){
return array_merge($sizes, array(
'home_portrait' => __('Home Portrait standard'),
));
}
I can see this extra size is generated when I upload an image to the media library as expected but it does not work when I try and implement it in PHP with advanced custom fields.
The custom image size is 1000px by 1000px.
In an attempt to trouble shoot and narrow down the issue, I amended the default WP size of 'medium' to also be 1000px by 1000px.
In the code below, the top image which uses this default 'medium' size renders perfectly on the website using the correct image but the second does not, it just displays the full size image.
I can't work out what is wrong with my custom image code given that it seemingly should be very straight forward.
<!-- THIS WORKS -->
<?php
$top_image = get_field('top_animated_image_1');
?>
<div class="upper-image">
<?php $top_animated_image_1 = get_field( 'top_animated_image_1' ); ?>
<?php $size = 'medium'; ?>
<?php if ( $top_animated_image_1 ) : ?>
<?php echo wp_get_attachment_image( $top_animated_image_1, $size ); ?>
<?php endif; ?>
</div>
<!-- THIS DOES NOT -->
<?php
$lower_image = get_field('lower_animated_image_2');
?>
<div class="lower-image">
<?php $lower_animated_image_2 = get_field( 'lower_animated_image_2' ); ?>
<?php $size = 'home_portrait'; ?>
<?php if ( $lower_animated_image_2 ) : ?>
<?php echo wp_get_attachment_image( $lower_animated_image_2, $size ); ?>
<?php endif; ?>
</div>
I got this working in the end by changing it to
// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );
// Add featured image sizes
add_image_size( 'home_portrait', 1000, 1000, false ); // width, height, crop
// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'home_portrait' => __( 'Home Portrait' ),
) );
though I am still not sure why the first did not work
I am using woo-commerce theme, in homepage image size criteria is around 234×350 when clicked it will be taken to it's specific page having image size of 450x600.. if user needs to see f in detail user can click the respective image and shown into real 1606×2406 dimension. However, woo-commerce shows the original image size in homepage of 1606x2406 leading to the massive page size. Is there any solution to show smaller dimension of the same image?
Here's the code of fetching image:
<?php foreach($metal_chairs as $key=>$metal):
$series =get_field('series',$metal->ID);
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), $full_size );
$full_image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), 'full' );
$product = wc_get_product( $metal->ID );?>
<div class="product-<?php echo $key+1;?> swiper-slide products">
<a href="<?php echo get_the_permalink($metal->ID);?>" alt="">
<img srcset="<?php echo esc_url($image[0]);?>" src="<?php echo esc_url($image[0]);?>" alt="<?php echo esc_attr($metal->post_title);?>" />
</a>
</div>
This call are made by the template itself, not WooCommerce. You need to locate that template file a look at the hook. (This files are usually located at /yourtheme/woocommerce)
You can try changing this
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), $full_size );
for this
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $metal->ID ), 'thumbnail' );
Beyond the 'thumbnail' 'medium' and 'large' sizes? (and as seen applied in this answer: https://stackoverflow.com/a/9131274/4415757)
Image size doesn't seem to be customizable through mailchimp RSS-to-campaign editor, and when I tried to set a width and height inside the tag in the RSS file, it didn't work; maybe a nested quotation marks issue?
Here is how I inserted my post featured image into the custom made RSS file:
<?php while(have_posts()) : the_post(); ?>
<item>
<title><?php the_title_rss(); ?></title>
<link><?php the_permalink_rss(); ?></link>
<?php if(get_the_post_thumbnail()): ?>
<media:content url="<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium'); echo $image[0]; ?>" medium="image" />
<?php endif; ?>
I tried to substitute 'medium' by 'thumbnail' and that seems to be he right parameter to manipulate, but when I tried to substitute it by 'width="600px" height="300px"' for example, I got the original image sizes instead.
Here is the solution I found. It is not about defining the image size in pixels in the RSS file but more like creating a new image size category in wordpress and then calling that size in the RSS media tag.
According to the article http://havecamerawilltravel.com/photographer/wordpress-resize-thumbnails:
I created an extra image size in wordpress, using the function add_image_size in my functions.php file. Example:
<?php
add_image_size( 'rss-thumb', 200, 150, true );
add_image_size( 'search-thumb', 150, 150, true );
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'rss-thumb' => __( 'RSS Thumb' ),
'search-thumb' => __( 'Search Thumb' ),
) );
}?>
Chosen the new image size in the RSS file, inside the tag;
<?php if(get_the_post_thumbnail()): ?>
<media:content url="<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'rss-thumb'); echo $image[0]; ?>" medium="image" />
<?php endif; ?>
Regenerated the thumbnails with the help of a plugin "Force Regenerate Thumbnails", so the existing images would be saved wih the newly created size-category also.
I'm having trouble trying to set the width and height of my post thumbnail.
Here is the link for the image
http://i255.photobucket.com/albums/hh140/testament1234/postthumbnail_zpsbe1027f9.png
As you can see both of the post have different dimensions
I have tried a couple of times in fixing the height and width of my post in fuction.php but no luck. Basically what i want to accomplish is that if i upload an image in the featured image regardless of size it would come out with a height of 250px and a width of 250 px. But whatever i do it seems incorrect.
This is the code that i have encoded
index.php
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
functions.php
//post thumbnail support 3
add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 250, 250 );
Am i missing something? I'm still trying to code in wordpress and PHP language. Basically i'm still a newbie. I really want to accomplish this without having to really on plugins
here is the code :
<?php the_post_thumbnail(array(215,152), array('class' => 'thumbnail')); ?>
array(215,152 you can change its value to your value which is height and width
or
you can use this which used for large images
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
echo '<img src="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" width="250px" height="250px" >';
}
?>
I am creating a child theme in Wordpress using the TwentyTen theme as a parent. I saw under the Pages area in the admin section, there is a 'Featured Image' area, but I don't see where that featured image is shown on the page.
What is the featured image area for? I would ideally like to use that uploader to put an image at a specified location on the page.
In what file for twentyten can I find the code php code for the Featured Image area that is displayed in the pages admin area? I looked all through the functions.php file. I'm guessing it is a function in the core files and it is being called in the functions.php file in the twentyten theme, but I can't seem to see where that is happening. Can someone help me?
The Featured Image is sometimes called the Post Thumbnail. Where this shows up depends on your theme, but for TwentyTen, it replaces the default header image. You can see the code in use in header.php:
<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>