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');
Related
newbie here. I'm using the following code to extract the secondary image source of my wordpress posts, but I think I could shorten it someway...
Here is the code I'm currently using inside img src=""
<?php $images = get_attached_media('image'); $featured_image_id = get_post_thumbnail_id(); if ( has_post_thumbnail() ) { unset($images[ $featured_image_id ] ); } $harukunt = wp_get_attachment_image_src( key($images),'large'); echo '' . $harukunt[0] . ''; ;?>
Maybe I could simplify this by defining some values in the header.php file, so then I can call the image in a shorter way in the posts?
<?php
$images = get_attached_media('image');
$featured_image_id = get_post_thumbnail_id();
if ( has_post_thumbnail()
)
{ unset($images[ $featured_image_id ] );
}
$harukunt = wp_get_attachment_image_src( key($images),'large');
echo '' . $harukunt[0] . '';
;
?>
And then call the image on posts by simply using img src="<?php harukunt("$post->ID"); ?>" or something. But it isnt working this way, due to my poor knownledge.
Can anybody please help me?
You can create a function and add it to your functions.php file like this:
function get_secondary_img($post_id, $print = true ){
if(has_post_thumbnail($post_id)) {
$attachments = get_attached_media('image',$post_id);
if(count($attachments) < 2){
$attachment_id = get_post_thumbnail_id($post_id);
} else {
foreach($attachments as $key => $attachment){
if($key !== get_post_thumbnail_id($post_id)){
$attachment_id = $key;
break;
}
}
}
if($attachment_id){
$attachment = wp_get_attachment_image_src($attachment_id,'large');
$src = $attachment[0];
$width = $attachment[1];
$height = $attachment[2];
$alt = get_post_meta($attachment_id,'_wp_attachment_image_alt',true);
if($print == true){
echo '<img width="'.$width.'" height="'.$height.'" src="'.$src.'" alt="'.$alt.'" />';
} else {
return $src;
}
}
}
}
Then if you want to output the html for the image you can just do
<?php echo get_secondary_img( $post_id ); ?>
Or if you want to just return the src attribute, you can just do
$yourvariable = get_secondary_img( $post_id, false );
I am using CMB2 file_list for uploading photos e.g. photo gallery. On the home page I need to get only the first photo and not the entire gallery. Below is the function to get all the photo. How can i retrieve only the first photo in the list?
function cmb2_output_file_list( $file_list_meta_key, $img_size = 'medium' ) {
$files = get_post_meta( get_the_ID(), $file_list_meta_key, 1 );
echo '<div class="file-list-wrap">';
foreach ( (array) $files as $attachment_id => $attachment_url ) {
echo '<div class="file-list-image">';
echo wp_get_attachment_image( $attachment_id, $img_size );
echo '</div>';
}
echo '</div>';
}
cmb2_output_file_list( 'wiki_test_file_list', 'small' );
You'd use something like this, make sure to change the meta key to the correct one, this will get the ID and URL of first file in the list:
$file_list_meta_key = 'wiki_test_file_list';
$files = get_post_meta( get_the_ID(), $file_list_meta_key, 1 );
$first_id = key($files);
$first_url = reset($files);
I'm using the below code in my header.php file to have a different div depending on the page:
<?php
if ( is_singular( 'movie' ) ) {
echo "<div class='heroImagePage' style='background-image:url(blur.jpg);'>";
} elseif (has_post_thumbnail( $post->ID ) ) {
echo "<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?> <div class='heroImage' style='background-image:url(<?php echo $image[0]; ?>);'>";
} else {
echo "<div class='heroImagePage' style='background-image:url(blur.jpg);'>";
}
?>
The conditions for if ( is_singular( 'movie' ) ) { and else { work fine, but the one that checks if there's a featured image doesn't. The code in there is to get the URL of the featured image so it can insert it as the div's background image. I think the issue is the echo inside an echo?
When I look at the code it outputs in my browser, it looks like this:
<div class="heroImage" style="background-image:url(<?php echo ; ?>);">
I've tried and looked online to help fix it, but can't seem to find a solution. Appreciate any help.
PHP won't execute within a string. Simply assign the $image variable before echo-ing the string
elseif (has_post_thumbnail($post->ID)) {
$image = wp_get_attachment_image_src(
get_post_thumbnail_id($post->ID), 'full');
echo '<div class="heroImage" style="background-image:url(', $image[0], ')">';
}
Try assigning the $image variable before echoing the string.
I.e.
<?php
if ( is_singular( 'movie' ) ) {
echo "<div class='heroImagePage' style='background-image:url(blur.jpg);'>";
} elseif (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo "<div class='heroImage' style='background-image:url" . $image[0] . ')">' ;
} else {
echo "<div class='heroImagePage' style='background-image:url(blur.jpg);'>";
}
?>
I currently have a banner image on a site which is pulled in via the featured image. The code below that does this works:
if ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
$url = $thumb['0'];
I would like to change this to use a custom field instead via Advanced Custom Fields. I have made a custom field called banner_image with the type as image url. I cannot seem to get this working however. I have tried the following methods:
Method 1
$image = get_field('banner_image', $post->ID);
$url = $image['url'];
Method 2
$url = get_field('banner_image', $post->ID);
Method 3
$url = get_field('banner_image');
Full PHP Code:
<?php
// Must be inside a loop.
// This is the bit i cannot get working
if(is_post(991)){
global $wp_query;
$postid = $wp_query->post->ID;
$url = get_post_meta($postid, 'banner_image1', true);
//End the bit that doesn't work
} elseif ( has_post_thumbnail() ) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
$url = $thumb['0'];
}
else {
$bg = array(
'http://domain.co.uk/wp-content/uploads/2014/07/image.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image1.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image2.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image3.jpg',
'http://domain.co.uk/wp-content/uploads/2014/07/image4.jpg'
); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$url = "$bg[$i]"; // set variable equal to which random filename was chosen
}
?>
Does anyone have a method for doing this, I am just getting a blank page on that particular post. Other posts work fine so it isn't breaking the code after elseif?
If you are inside the loop, this works:
$image = get_field('banner_image');
<?php echo $image['url']; ?>
try this one
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'customField', true);
?>
https://echohelp.wordpress.com/2014/04/28/custom-field-outside-the-loop/
You can use
get_field('banner_image', get_the_ID() );
or
get_field('banner_image', get_queried_object_id() );
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.