Get the Wordpress attachment image url - php

I am trying to display all the images attached to a wordpress post and link the image to the source of the image to open it in a light box. I am using the following code:
if (have_posts())
{
while (have_posts())
{
the_post();
$args = array(
'orderby' => 'title',
'order' => 'ASC',
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'exclude' => get_post_thumbnail_id()
);
$attachments = get_posts( $args );
if ($attachments)
{
foreach ($attachments as $attachment)
{
?>
<div id="image">
<a rel="lightbox" href="<?php /* ??? */ ?>">
<?php echo wp_get_attachment_image ($attachment->ID, 'full'); ?>
</a>
</div>
<?php
}
}
}
}
I have tried many things where the ??? but i can't seem to retrieve just the source url.
Can anyone provide some insight?

Use wp_get_attachment_image_src
https://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
This:
wp_get_attachment_image_src( $attachment->ID, 'full' );
should return an array with the following elements
[0] => url
[1] => width
[2] => height
[3] => boolean: true if $url is a resized image, false if it is the original or if no image is available.

If you just want to link to the original full image it's better to simply use "wp_get_attachment_url" - https://developer.wordpress.org/reference/functions/wp_get_attachment_url/
The wp_get_attachment_image_src function will run code you don't need and return extra details you don't need making your code less efficient.

Related

Wordpress get attachment image caption

I tried to get attachment meta caption value as mentioned here, but couldn`t get any output. Other meta arrays like [created_timestamp] or [iso] gave their values.
$img_meta = wp_get_attachment_metadata( $id );
echo $img_meta[image_meta][caption];
This issue happens to both [caption] and [title]. Any help is much appreciated.
The caption and title you are looking to get from wp_get_attachment_metadata are not the title and caption you add in WordPress they are meta data from the actual image itself. To get the WordPress data use something like this (assuming $id is the id of your image).
$image = get_post($id);
$image_title = $image->post_title;
$image_caption = $image->post_excerpt;
Since WordPress 4.6.0 there is get_the_post_thumbnail_caption($post) which gets you the caption for the specified post.
put this in your functions.php file:
function show_caption_image($type='title'){
global $post;
$args = array( 'post_type' => 'attachment', 'orderby' => 'menu_order', 'order' => 'ASC', 'post_mime_type' => 'image' ,'post_status' => null, 'numberposts' => null, 'post_parent' => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
$description = $image->post_content;
}
}
return $type == 'title' ? $image_title : $caption.$description;
}
and below the image in your theme, or wherever you prefer to put it, usually in the single.php file:
<?php if ( has_post_thumbnail() ) :
?>
<span class="image main"><img src="<?php echo get_the_post_thumbnail_url()?>" alt="<?php echo get_the_title()?>" /><i><?php echo show_caption_image();?></i></span>
<?php endif; ?>

WordPress: attachment image with different sizes

I have a small problem with a custom loop in WordPress. I'm using the royal slider (normal jquery version) and want to display the attached images of a post as a slider.
So far, it works with this code:
<?php
$args = array( 'post_type' => 'attachment', 'posts_per_page' => -1, 'order' => 'ASC', 'post_status' =>'any', 'post_parent' => $post->ID );
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ):
echo '<div class="rsContent">';
echo wp_get_attachment_image($attachment->ID, 'large', array( 'class' => 'rsImg'));
$description = $attachment->post_content;
if ($description):
echo '<div class="infoBlock infoBlockLeftBlack rsABlock" data-fade-effect="" data-move-offset="10" data-move-effect="bottom" data-speed="200">';
echo $description;
echo '</div>';
endif;
echo '</div>';
endforeach;
}
?>
So I get the attached images in fullsize. But now I like to get the attached images in medium and thumbnail size, too, so that I can create a responsive slider.
The way would be, that I can do a picture tag like this:
<picture>
<source srcset="Attachment Thumbnail size" media="(max-width: 400)">
<source srcset="Attachment Medium size" media="(max-width: 900)">
<source srcset="Attachment Full size">
<img srcset="Attachment Full size">
</picture>
Does anybody of you have a quick tip?
Thank you!
In place of large in echo wp_get_attachment_url($attachment->ID, 'large', array( 'class' => 'rsImg')); use custom-image-size and define the custom-image-size in your functions.php like add_image_size('custom-image-size',730,280,true); and then use regenerate thumbnail plugin and you will get the image size will be changed to 730*280 , visit codex to know more about this function.

How can I get the image url in WordPress?

I'm using this code to get all images uploaded to a page and it's working fine but I'd like to use the image urls for a lightbox function and currently I'm getting an img object. Is there any way I can get the image url specifically? I'd like to think it's part of an array. Here's the code I'm using:
<?php
$images = get_children( array(
'post_parent' => $post->ID,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'menu_order',
'order' => 'ASC',
'numberposts' => 999 ) );
if ( $images ) {
//looping through the images
foreach ( $images as $attachment_id => $attachment ) {
?>
<li>
<a href="*the_img_url*" data-lightbox="lightbox-1" data-title="<?php echo $attachment->post_excerpt; ?>" ><?php echo wp_get_attachment_image( $attachment_id, 'full' ); ?>
</a>
</li>
<?php
}
}
?>
Thank you.
Have you tried
<?php echo wp_get_attachment_url( $attachment_id ); ?>
// $attachment_id is The ID of the desired attachment

Getting first Image from custom post type gallery attachement

I have created custom post type "albums" in wordpress theme. An Image gallery is attached to each post successfully. All images attached to all parent post inside gallery are display on front-end using:
<ul id="gallery">
<?php
$post_type = 'albums';
$args= array(
'post_type' => 'attachment',
'post_status' => 'inherit',
'post_mime_type' => 'image',
'fields' => 'id=>parent',
'order' => 'DESC',
'posts_per_page' => -1
);
// get all image parent post ids
$image_parents = get_posts( $args );
if ( $image_parents ) {
$parent_posts = get_posts( 'fields=ids&post_type=' . $post_type ); // query
if ( $parent_posts ) {
// getting all parent posts by post type that have images
$parent_posts_with_images = $parent_posts;
if ( $parent_posts_with_images ) {
// loop through all post type posts that have images
foreach ( $parent_posts_with_images as $post_id ) {
$args = array(
'post_parent' => $post_id,
'post_status' => 'inherit' ,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'rand',
'posts_per_page' => -1
);
$images = get_children( $args );
if ( $images ) {
foreach ( (array) $images as $image )
{ ?>
<li class="gallery-item">
<div class="gallery-image">
<?php
$img_url = wp_get_attachment_url( $image->ID );
$image = $img_url;
echo '<a href="'.$img_url.'" class="album-img" id="" title="'.$post_title.'" >
<img src="'.$image.'" alt=""/></a>';
?>
</div>
</li>
<?php }
}
}
}
}
}
?>
</ul>
CSS:
ul#gallery{width:100%;height:100%;position:relative;background:white}
ul#gallery li.gallery-item{width:20%; height:200px;overflow;hidden;}
li.gallery-item .gallery-image{ width:100%;height:100%;}
li.gallery-item .gallery-image img { width:100%;height:100%;display:block}
In this way i am getting all 50 images (e.g 5 post with 10 image attached to each gallery) on front end. Now instead of getting all gallery images on display page I want only first image from each gallery attached to parent post of custom post type.And want to use this first image to initialize my light-box/color-box or any other slider after click on this first image. help me to modify my code .
If i have created 5 post in custom post type like(car,bike,nature,fashion,logo) with respective image gallery attached to those post.Then i want initially to display only first image of car , bike ,nature,fashion and logo.

How to exclude posts with no images in a wordpress query_post function?

The query below runs a featured carousel on my site. I want the carousel to only display post that contain an image. I've searched everywhere and cannot find a solution. Please help!
query_posts(array('post_type' => 'ad_listing', 'post_status' => 'publish', 'orderby' => 'rand'));
I ran into this same thing while developing my own theme.
This is how I solved it.
Start by adding the featured image capability in your functions.php.
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
}
This allows you to select a featured image for each post.
With the featured image function available you can use the following function to detect if a post has a featured image...in loop form:
$args = array(
'post_type' => 'ad_listing'
);
query_posts($args);
if ( have_posts() ) :
while ( have_posts() ) : the_post();
if ( has_post_thumbnail() ) { //For featured images
//For post images/attachments
ob_start();
the_id();
$postID = ob_get_clean();
$args = array(
'numberposts' => 1,
'order'=> 'ASC',
'post_mime_type' => 'image',
'post_parent' => $postID,
'post_status' => null,
'post_type' => 'attachment'
);
$images =& get_children($args);
if ( empty($images) ) {
//What to do without images
}
else {
//What to do with images
}
}
endwhile;
else :
//What happens when no posts are found
endif;
Hope this helps.
You won't be able to do that using query_posts. You'll have to do it in the loop.
Look at get_children() and especially the example of how to Show the first image associated with the post.

Categories