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" >';
}
?>
Related
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.
I'm using Bootstrap3 to create a Wordpress theme, and I am using the responsive columns like so:
<div class="col-md-4">
<div class="panel panel">
<div class="panel-heading"><h1><?php the_title(); ?></h1></div>
<div class="panel-body">
<p><?php the_post_thumbnail(); ?></p>
<p><?php the_content(__('(more...)')); ?></p>
Take a look
</div>
</div>
</div>
What I've noticed though is that the featured images are not scalable. They have set sizes, but you can't define them so that the width is 100% of, in my example, the class panel-body.
I'd like to do this as when the screen size changes, so do the size of the columns, and I'd like the image to scale with them.
Does anyone know a way of doing this, I seem to have become a bit stuck.
Try below code to make image scalable:
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive img-circle'));
?>
You need to add class .img-responsive to make images responsive with bootstrap 3.
For adding the class .img-responsive to your wordpress images you can add the below function in your functions.php file.
<?php
//----------------------------------------------------------/
// responsive images [ 1) add img-responsive class 2) remove dimensions ]
//----------------------------------------------------------/
function bootstrap_responsive_images( $html ){
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<img.*? class="/', $html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
} else {
$html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
}
// remove dimensions from images,, does not need it!
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );
Hope it helps you.
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 using Wordpress for my blog (blog.axelboberg.se), I wish to show an icon just over each title. The icon should be based and display the posts category. I've heard that it's possible to use an if statement, but that gets tricky when using more categories/images?
How do I display an image over each title based on the category? I'm planning to use 3-4 different icons.
Thanks in advance?
In the category.php file add
<?php
$categories = get_the_category();
foreach($categories as $category)
{
if($category->cat_name == "category1")
{
echo '<img src="">';
}
else if ($category->cat_name == "category2")
{
echo '<img src="">';
}
}
?>
just above this line:
<h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>
The above will only print out an image if it is on a specific category
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; ?>