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.
Related
<?php
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => null, // any parent
'post_mime_type' => 'video/mp4'
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $post ) {
setup_postdata( $post );
the_title( );
// the_attachment_link( $post->ID, false );
?>
<video width="320" height="240" controls>
<source src="<?php wp_get_attachment_link( $post->ID, false ); ?>" type="video/mp4">
</video>
<?php
the_excerpt( );
}
}
?>
I have uploaded mp4 videos on wordpress media but I can't play in html5 tag I don't know where I am going wrong any help will be appreciated.
follow the below article and make sure you have provided atleast two html5 video formats,
http://www.betterhostreview.com/add-html5-videos-wordpress.html
you can convert your video file to html5 video format from any html5 video converter apps or you can see the below url,
http://www.betterhostreview.com/free-video-converter-convert-html5-videos-freemake.html
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; ?>
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.
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
I need to show the featured images of all the pages, not the posts. I have this code:
<?php
if ((is_singular() || is_home()) && current_theme_supports('post-thumbnails')) : echo get_the_post_thumbnail( '12', 'full' ); ?>
<img src="<?php header_image(); ?>" class="header-img" alt="" />
<?php endif;?>
But this only shows one featured image.
Thank you so much!
You can simply use WP_Query to get that,
$loop = new WP_Query( array( 'post_type' => 'page', 'meta_key' => '_thumbnail_id' ) );
Or if you want to do by your way you need to fetch all pages first & than loop over it to get thier feature image,
$args = array(
'post_type' => 'page',
'post_status' => 'publish'
);
$pages = get_pages($args);
foreach($pages as $page) {
echo get_the_post_thumbnail( $page->ID, 'full' );
}