I'm trying to get an array of image urls on wordpress from the images added to the post gallery, I don't really know what I'm doing wrong here but I think I don't get a correct array from wordpress, can anyone help me with this?
<?php
if(have_posts()) : while(have_posts()) : the_post();
$gallery = get_post_gallery_images(the_post());
$i = 0;
foreach($gallery as $image)
{
echo('<div>');
echo('<img u="image" src="'.$image.'" alt="'.the_title().$i.'" title="'.the_title().$i.'"/>');
echo('<img u="thumb" src="'.$image.'" alt="'.the_title().$i.'" title="'.the_title().$i.'"/>');
echo('</div>');
$i++;
}
endwhile; endif; ?>
?>
try to use the "$post->ID" instead "the_post" inside $gallery like this:
$gallery = get_post_gallery_images( $post->ID );
Related
I am using the following code to output an image tied to a Wordpress post:
if ( $cover ) :
return sprintf(
'<img src="%1$s">',
$cover
);
endif;
This does output the required image but I need it to be clickable to display the image in full using:
<a href="<?php echo esc_url( $cover( 'medium_large' ) ) ?>">
Please can somebody advise how I can bring the two together?
Thanks.
So, I don't know what your code does, or how are the variables defined, but this will generate the output you want:
function cover($cover = '') {
if ( '' !== $cover ) :
return sprintf(
'<img src="%1$s">',
$cover
);
endif;
}
echo cover('/path/to/my/image.png');
The above will output the following code:
<a href="/path/to/my/image.png">
<img src="/path/to/my/image.png">
</a>
Keep in mind, that I do suppose you already know how to get the post cover image URL, and that's why I have make the function to accept the cover image URL only.
Update #1
If you want to display different sizes images when you click the link you could do the following:
function cover($cover_link = '', $cover_img = '') {
if ( '' !== $cover ) :
return sprintf(
'<img src="%2$s">',
$cover_link,
$cover_img
);
endif;
}
And then use the function cover inside the WordPress loop as following:
if ( have_posts() ) {
while( have_posts() ) {
the_post();
// ... HTML or PHP Code you need for your loop
$cover_link = get_the_post_thumbnail_url(get_the_ID(), 'full');
$cover_img = get_the_post_thumbnail_url(get_the_ID(), 'post-thumbnail');
if ( $cover_link && $cover_img ) {
echo cover($cover_link, $cover_img);
}
// ... HTML or PHP Code you need for your loop
}
}
Update #2
In the above example, I've used the image sizes full and post-thumbnail. In case you need to have custom sizes for your uploaded images you could use in the functions.php code like the following:
add_image_size( 'my_big_image_size', 1000, 1000, true);
add_image_size( 'my_small_image_size', 500, 500, true);
And then, inside the loop, you could change the following code:
$cover_link = get_the_post_thumbnail_url(get_the_ID(), 'full');
$cover_img = get_the_post_thumbnail_url(get_the_ID(), 'post-thumbnail');
To this:
$cover_link = get_the_post_thumbnail_url(get_the_ID(), 'my_big_image_size');
$cover_img = get_the_post_thumbnail_url(get_the_ID(), 'my_small_image_size');
After scratching my head for almost 2 hours, I am unable to resolve the puzzle. Anyone who could help me , I will be highly thankful to him.
I have created a custom post type 'Properties' in wordpress. I am trying the following code to list the properties in a page. All of it is displaying fine except Images.
<?php
$conarg = array (
'post_type' => 'properties',
'order_by' => 'menu_order',
'order' => 'ASC'
);
$condo_query = new WP_Query( $conarg );
if ( $condo_query->have_posts() ) { ?>
<?php
while ( $condo_query->have_posts() ) {
$condo_query->the_post();
?>
<?php
$condo_images_max = 5;
$condo_items = array();
for($i=1; $i <= condo_images_max; $i++) {
//check if image exits
$img_attachment_id = get_field('gallery-image-'.$i);
if(!empty($img_attachment_id)) {
$condo_items[$i] = array(
'image' => wp_get_attachment_image_src($img_attachment_id, 'medium')
);
}
}
$condo_items_keys = array_keys($condo_items);
?>
<div class="box col-md-4 col-xs-12">
<div class="flexslider">
<ul class="slides">
<?php
for($i=0; $i < count($condo_items) ; $i++) {
$image = $condo_items[$condo_items_keys[$i]]['image'];
?>
<li>
<img src="<?php echo $image[0]; ?>" alt="Carousel Image" />
</li>
<?php
}
?>
</ul>
</div>
<?php echo '<h2 class="condo-title">' . get_the_title() . '</h2>';
echo'<ul class="condo-details">';
if(get_field('area_range')) {
echo '<li><span>SQ.FT RANGE:</span> ' . get_field('area_range') . '</li>';
}
if(get_field('room_view')) {
echo '<li><span>ROOM VIEW:</span> ' . get_field('room_view') . '</li>';
}
if(get_field('price_range')) {
echo '<li><span>PRICE RANGE:</span> ' . get_field('price_range') . '</li>';
}
?>
<a class="condo-btn" href="<?php the_permalink(); ?>"><?php _e('VIEW DETAILS'); ?></a>
<?php
echo'</ul></div>';
}
}
else {
echo'Sorry! No Condos are available at the moment!';
}
/* Restore original Post Data */
wp_reset_postdata();
?>
As I mentioned in my comment it's probably worth switching to the PRO version and using a repeater field.
In your question you're overcomplicating this by unnecessarily building an array and then looping through your array using for instead of foreach.
Remove the code to build an array and try this instead of your current output code:
<ul class="slides">
<?php // Set maximum number of images to check.
$condo_images_max = 5;
for ( $i = 1; $i <= $condo_images_max; $i++ ) {
// Get image ID.
$image_id = get_field( 'gallery-image-' . $i );
// Check if image ID was found.
if ( $image_id ) {
// Output medium image in an li tag.
echo '<li>' . wp_get_attachment_image( $image_id, 'medium' ) . </li>';
}
} ?>
</ul>
If you need to be able to control the output of the image element and display it in the way you show in your question you can use:
...
if ( $image_id ) {
// Get image source.
$image = wp_get_attachment_image_src( $image_id, 'medium' );
// Check image source was found.
if ( $image ) {
echo '<li><img src="' . $image[0] . '" alt="Carousel Image" /></li>';
}
}
...
There is one issue in doing it this way to be aware of (and one of the reasons I suggested a repeater).
Let's say you have 6 image fields and a property is using all 6. The admin then decides to delete the first image so now the property has 5 images. The code will still work because we're checking an image was found before trying to output it but instead of showing all 5 images you'll only see 4 of them. Image #1 is empty and we've told it to stop looking after image #5.
I have a WordPress site with multiple posts. On the homepage I have setup a plugin (https://wordpress.org/plugins/column-posts/) so that three columns of the most recent posts are displayed. That works well and I'm able to style the columns in CSS. However, I want each post's featured image to be the background of that post's column? Any idea how I'd make this happen?
<ul>
';
}
// thumbnail
$thclear = '';
$bullet = '<li style="background:url(<?php'.$thumb.'?>);">';
$thumb = '';
if ( $args['thumb'] ) {
if ( has_post_thumbnail($post->ID) ) {
//$bullet = '';
$thclear = '<div style="clear:both;"></div>';
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $args['tsize'], false, array('class'=>"alignthumb"));
}
}
$ppost .= $bullet .''.$title.'';
// excerpt
if ( $args['excerpt'] ) {
$ppost .= '<p>' .get_the_excerpt() .'</p>' .$thclear .'</li>';
}
else{
$ppost .= $thclear .'</li>';
}
if ($args['class'] == 'P' && $args['col_cnt'] == $args['col_post'])
$ppost .= '
</ul>
I figured I could plug a variable into li style like this:
<li style="background:url(<?php'.$thumb.'?>);">
However it's not echoing anything at all and no image src for sure. Any way to get it to echo $thumb as the background image or plug a background image somewhere in that code. Thanks!!
Thanks!
$image=wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img class="whatever" src="<?php echo $image;?>" />
css
.whatever {
z-index: -1;
}
I have recently installed Dynamic Featured Image plugin for wordpress. But I do not know how to link images. I'm trying to create me a gallery like this http://www.subcreative.com.au/#work - Scroll down to the projects and you will see .
I have put this code in functions.php
<?php
while ( have_posts() ) : the_post();
if( function_exists('dfi_get_featured_images') ) {
$featuredImages = dfi_get_featured_images();
//Now, loop through the image to display
}
endwhile;
?>
and used this to link the image.
echo ' <a class="fancybox" href="'. dfi_get_featured_images() .'" style="text-align:center">Take a look</a> '; ?>
But when I try to open the image, it becomes "/array"
Im not a wordpress dev but I've seen this on the wordpress website that I tried to fix.
so maybe you can try this one.
if( class_exists('Dynamic_Featured_Image') ):
global $dynamic_featured_image;
global $post;
$featured_images = $dynamic_featured_image->get_featured_images( $post->ID );
if ( $featured_images ):
?>
<?php foreach( $featured_images as $images ): ?>
<img src="<?php echo $images['full'] ?>" alt="">
<?php endforeach; ?>
<?php
endif;
endif;
this works in my case. I'm using DFI 3.1.13
This answer is only valid for plugin version 2.0.2 and below.
You need to loop throught the returned array and display the image manually. Try this:
<?php
if( function_exists('dfi_get_featured_images') ) {
$featuredImages = dfi_get_featured_images();
//Loop through the image to display your image
if( !is_null($featuredImages) ){
$links = array();
foreach($featuredImages as $images){
$thumb = $images['thumb'];
$fullImage = $images['full'];
$links[] = "<a href='{$fullImage}' class='dfiImageLink'><img src='{$thumb}' /></a>";
}
echo "<div class='dfiImages'>";
foreach($links as $link){
echo $link;
}
echo "</div>";
}
}
?>
try this inside of have posts loop
$img=dfi_get_featured_images();
$url=$img['full'];
echo ' <a class="fancybox" href="'. $full .'" style="text-align:center">Take a look</a> ';
If full doesn't work try thumb also.
I have website based on wordpress system and I need to get images urls from every post. I have this code and it's working, but there is problem, because all of posts have same pictures + at the end, there are new ones. Here is example:
post1 - image1.png,image2.png,image3.png
post2 - image1.png,image2.png,image3.png,new1.png,new2.png
post3 - image1.png,image2.png,image3.png,new1.png,new2.png,third.png
etc...
And here is my php code
preg_match_all('/<img[^>]+>/i',$old_content, $imgTags);
for ($i = 0; $i < count($imgTags[0]); $i++) {
// get the source string
preg_match('/src="([^"]+)/i',$imgTags[0][$i], $imgage);
// remove opening 'src=' tag, can`t get the regex right
$origImageSrc[] = str_ireplace( 'src="', '', $imgage[0]);
}
Any ideas, why it's doing? :-)
This might help you out, here's a function that you can throw into your functions.php file in your Wordpress theme.
/*
* Retreive url's for image attachments from a post
*/
function getPostImages($size = 'full'){
global $post;
$urls = array();
$images = get_children(array(
'post_parent' => $post->ID,
'post_status' => 'inheret',
'post_type' => 'attachment',
'post_mime_type' => 'image'
));
if(isset($images)){
foreach($images as $image){
$imgThumb = wp_get_attachment_image_src($image->ID, $size, false);
$urls[] = $imgThumb[0];
}
return $urls;
}else{
return false;
}
}
That will return an array with each image url that is attached to the post/page. To loop thru and show all of the images in an <ul> you could do something like this.
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<ul id="post_images">
<?php $postImages = getPostImages($size = 'full'); ?>
<?php foreach($postImages as $image): ?>
<li><img src="<?php echo $image; ?>" /></li>
<?php endforeach; ?>
</ul>
<?php endwhile; endif; ?>