My theme generate my img portfolio with this code :
<img width="222" height="440" src="#" class="attachment-portfolio" alt="#">
I found this code :
<div class="carousel-inner">
<?php foreach($attachments as $attachment) {
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_big = wp_get_attachment_image( $attachment->ID, 'portfolio' ); ?>
<div class="item">
<?php echo $image_big ?>
</div>
<?php } ?>
I'm not good in PHP but i understand that the image size is generate from "$image_big" ?
I found also this in my function.php
add_image_size('big',9999,400);
I try to change the width and height in the add_image_size but nothing happend on the website ! It's still width="222" height="440"
I would like the image to be 100% or around 800px width (if it's impossible to get % unit). What to do ?
Related
Trying to include a specific page on the frontpage of a WordPress Theme.
The overal HTML structure should be similar to this:
<div>
<h1>Om</h1>
<p>Content comes here</p>
</div>
<div style="background-image: url(...)">
</div>
At the moment it echos the content of the page successfully.
Here is how that part works with PHP:
<div class="omtekst col-md-6 half-content-wrapper">
<h1 class="semibold">Om</h1>
<?php
$my_id = 7;
$post_id_7 = get_post($my_id);
$content = $post_id_7->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;
?>
</div>
As mentioned earlier I want to include the thumbnail below this. This is where I am having problems.
However, I have started on the PHP to show how I am thinking. The thumbnail should be $image or similar.
<div class="ombilde col-md-6" style="background-image: url('<?php echo $image; ?>')">
Do you have a working solution for this?
Edit
My custom thumb which is not used with this image:
add_action( 'after_setup_theme', 'mytheme_custom_thumbnail_size' );
function mytheme_custom_thumbnail_size(){
add_image_size( 'frontpage_thumb', 500 ); // Unlimited height
}
Enabled post thumbnails:
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_theme_support( 'nav-menus' );
add_theme_support( 'widgets' );
}
to get the url of image you can use
$image = wp_get_attachment_image_src( get_post_thumbnail_id([ID_HERE]), [IMAGE SIZE HERE] );
then you can use
<div class="ombilde col-md-6" style="background-image: url('<?php echo $image[0]; ?>')">
to get image size string look at your theme for "add_image_size" function
and as pgk said post-thumbnails have to be enabled inside functions but i guess you already did this
edit:
[ID_HERE] replace with post id
[IMAGE SIZE HERE] you can test this with "full"
Use wp_get_attachment_url($id) for retrieving the URL of the desired post.
In your example:
$my_id = 7;
$post_id_7 = get_post($my_id);
$my_thumb = wp_get_attachment_url($my_id);
<div style="background-image: url('<?php echo $my_thumb; ?>')" class="omtekst col-md-6 half-content-wrapper">
<h1 class="semibold">Om</h1>
</div>
If you want to get post thumbnail, you can make this like that:
if ( has_post_thumbnail( $post_id_7->ID ) ) {
$image = get_the_post_thumbnail( $post_id_7->ID, $size, $args );
}
This returns image tag. You can find more info here Codex - get_the_post_thumbnail
Your theme must have ‘post-thumbnail’ support enabled.
This is the easiast way to attach image to your post.
And if you are in theLoop, you can use the_post_thumbnail() function, it directly prints thumbnail image:
<?php the_post_thumbnail( $size, $attr ); ?>
Codex - the_post_thumbnail()
If you want to print image as background, you must pit 'large' as $size.
I'm looking for some assistance in returning the featured image URL for each post on my website. The code I'm currently using only returns the value of the first post on the page.
Here's what I'm working with:
<?php if (has_post_thumbnail( $post->ID) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'single post thumbnail'); ?>
<div class="comments-bg-image" style="background-image: url('<?php echo $image[0]; ?>'" </div>
<?php endif; ?>
Any help would be much appreciated, thanks!
WordPress' wp_get_attachment_image_src only takes specific string keywords for the $size parameter, which are:
thumbnail
medium
large
full
See below:
<?php if (has_post_thumbnail($post->ID)) : ?>
<?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'large'); ?>
<div class="comments-bg-image" style="background-image: url('<?php echo $image[0]; ?>'"></div>
<?php endif; ?>
At a glance, I noticed the closing > on your div.comments-bg-image element was missing, although I doubt that's the cause of the issue you're having. ;)
Resources:
Function Reference/wp_get_attachment_image_src
I have an Html page in which There is a slider. here's the html code
<div data-thumb="images/slide1.jpg" data-src="images/slide1.jpg">
</div>
<div data-thumb="images/slide2.jpg" data-src="images/slide2.jpg">
</div>
<div data-thumb="images/slide3.jpg" data-src="images/slide3.jpg">
</div>
I am trying to convert this page into wordpress. Here's how I am doing this in wordpress to load the images.
<?php
$options = array(
'post_type' => "slideshow",
);
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>" data-src="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>">
</div>
<?php endwhile; ?>
But It is not working.My pictures are not showing in the slider. But When I check the page source It is correctly getting the image.
here's the source that generates
<div data-thumb="<img width="1170" height="385" src="http://localhost/wordpress/wp-content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />"
data-src="<img width="1170" height="385" src="http://localhost/wordpress/wp- content/uploads/2014/09/slide1.jpg" class="attachment-full wp-post-image" alt="slide1" />">
</div>
Change this:
In the first line of your "while" loop insert this:
if ( has_post_thumbnail() ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID()));
}
// else {
// you should see what to do if the post hasn't got a thumbnail
//
And then replace this:
<div data-thumb="<?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>"
for this:
<div data-thumb="<?php echo $image[0];?>"
Same thing in your second "if".
it's not the prettiest code, but it should work.
Calling the_post_thumbnail() prints the whole <img> tag, and you need only the URL to populate the DATA-SRC and DATA-THUMB attributes of your existing IMGs.
So you get the post thumbnail ID with get_post_thumbnail_id(), and get the image url with wp_get_attachment_src().
Hope it helps.
My WordPress Blog consists of the following snippet:
<?php
$images = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
if (count($images) > 0) { ?>
<div class="image-holder">
<img src="<?php bloginfo('template_directory') ?>/javascript/timthumb.php?src=<?php echo $images[0]; ?>&h=320&w=630&zc=1" alt="<?php the_title();?>" />
</div>
<?php }
?>
This displays a title image (featured image) on top of the actual content and uses timthumbb to resize it. All is fine here, however it shows a broken img src if there is no defined featured image. Is there a way to edit this in order to only display the image if there is actually one present?
if there is only one image, you can use
if ($images[0]!='') {
I used this and it works fine:
// get the ancestors
$familyTree = get_ancestors($post->ID, 'page');
array_unshift($familyTree, $post->ID); //add the current page to the beginning of the list
// loop through the family tree until you find a result or exhaust the array
$featuredImage = '';
foreach ($familyTree as $family_postid) {
if (has_post_thumbnail($family_postid)) {
$featuredImage = get_the_post_thumbnail($family_postid, 'full');
// the 'full' argument tells WordPress not to re-size the image to thumbnail dimensions
break;
}
}
// if the page has a featured image then show it
echo ($featuredImage ? $featuredImage : "");
it also applies the featured image to child pages unless the child page has it's own featured image, not sure if you want that but shouldn't be too difficult to not show anything if there is no featured image.
Try using this logic
<?php
if($images[0]!='')
{
<div class="image-holder">
<img src="<?php bloginfo('template_directory') ?>/javascript/timthumb.php?src=<?php echo $images[0]; ?>&h=320&w=630&zc=1" alt="<?php the_title();?>" />
</div>
}
?>
You can use the function has_post_thumbnail() to check whether the post has a featured image or not.
Usage:
$images = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
if (count($images) > 0) { ?>
<div class="image-holder">
<img src="<?php bloginfo('template_directory') ?>/javascript/timthumb.php?src= <?php echo $images[0]; ?>&h=320&w=630&zc=1" alt="<?php the_title();?>" />
</div>
<?php }
} ?>
I'm building my first WordPress Theme and I'm stuck on something.
I have a function in my functions.php called get_first_photo() which grabs the first image uploaded on each post and puts it on the blog archive page. It's working fine, but it loads the full-sized image and resizes it using CSS. I would rather it load the image at it's thumbnail size set in the WP control panel so I don't have the image-size overhead. Any way to accomplish this?
Here's the code from functions.php:
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT guid FROM wp_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And here's the blog template:
<?php
get_header(); ?>
<div id="content" class="blog">
<div id="body">
<h3 class="title" id="blog">The Ned Leary Blog</h3>
<?php if (have_posts()) :
query_posts("category_name=blog");
while (have_posts()) :
the_post();
$first_photo = get_first_photo(get_the_ID());
?>
<div class="snippet">
<?php if (!empty($first_photo)) : ?>
<img src="<?php echo $first_photo; ?>" alt="Thumbnail" />
<?php else : ?>
<img src="<?php bloginfo('url'); ?>/images/blog/gravatarBig.jpg" alt="Ned Leary Gravatar" />
<?php endif; ?>
<div class="details">
<h2><?php the_title(); ?></h2>
<h5><?php the_time('D, M j, Y') ?> by <?php the_author('') ?> | <?php comments_popup_link('0 Comments', '1 Comment', '% Comments'); ?></h5>
<?php the_excerpt(); ?>
<h4>Read more…</h4>
</div>
</div><!--end snippet-->
<?php endwhile; endif;// end of the loop. ?>
</div><!--end body-->
<?php get_sidebar(); ?>
</div><!--end content-->
<?php get_footer(); ?>
All you need is to grab the post ID for that first image you want and then run it through "get_the_post_thumbnail()".
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo );
You can also pull your own custom thumbnail sizes if you like as well. As long as you are using wordpress 2.9+.
Simply add this to functions.php
add_theme_support( 'post-thumbnails' ); //enable thumbs
add_image_size( 'mycustom-preset', width you want, height you want); //custom size
Then run the same function but call your new preset...
$first_photo = post id of the first image;
echo get_the_post_thumbnail( $first_photo, 'mycustom-preset' );
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/add_image_size
Hope that helps. It doesn't seem like your having trouble obtaining the post id for the first photo so I didn't really cover how to obtain it.
You can use GD or some other image library to programmatically manipulate an image. However, it would be best to implement an operation to create a thumbnail file when the image is uploaded. You can have it dynamically generate a thumbnail every time the page is loaded, but such an operation can be relatively computationally expensive and put unneeded load on the ssystem.
Thanks to John Ford for pointing me in the right direction, I was able to figure this out.
The query in my function changed slightly, grabbing the post id instead of guid.
function get_first_photo($id) {
global $wpdb;
return $wpdb->get_var("SELECT id FROM aire_posts WHERE post_parent = $id AND post_mime_type = 'image/jpeg' ORDER BY id DESC LIMIT 1");
}
And then I had to add another line to my theme file:
$first_photo = get_first_photo(get_the_ID());
$thumb = wp_get_attachment_image_src($first_photo);
Lastly, I updated my image src:
<img src="<?php echo $thumb[0]; ?>" alt="Thumbnail" />
you could use the get_the_post_thumbnail function or use a php thumbnail generator like timbthumb
<?php $images = get_children( array( 'post_parent' => $page->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
if ( $images ) {
$total_images = count( $images );
$image = array_shift( $images );
$thumbnail = wp_get_attachment_image_src($image->ID, array(225,125) );
$thumbnail = $thumbnail[0]; }
?>
<img class="size-thumbnail alignleft" src="<?php echo $thumbnail; ?>" alt="<?php echo $page->post_title ?>">