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);'>";
}
?>
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 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');
$args = array( 'numberposts' => '3' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
echo '<a style="color:white;text-decoration:none;" href="'. get_permalink($recent["ID"]) .'">
<article class="post post_home" style="background-image: url('.
function(){
if( has_post_thumbnail() ) {
echo get_the_post_thumbnail_url( $recent["ID"], 'cover' );
} elseif ( has_category( 'positive-morning' ) ) {
echo get_bloginfo('template_directory') . '/img/BG/2-Morning.jpg';
} elseif ( has_category( 'positive-talks' ) ) {
echo get_bloginfo('template_directory') . '/img/BG/2-Talks.jpg'; }
}
.');
background-position : center; background-size :cover;">
<h2>'. $recent["post_title"] .'</h2></article>';
....
}
Hi all,
I'm having trouble to put an if statement because when I add the if statement supposed to declare if the post has no thumbnails, it should get the relative path to display the thumbnails defined for the category.
I've tried different ways to make it work but I can't find what's the problem. The only error I get is
Object of class Closure could not be converted to string
Thanks for any help
function(){ is a function definition, you can't concatenate that. Additionally, has_post_thumbnail is actually the WP function you want to use and that takes as its first parameter the post ID. So you should rewrite your code as follows.
$args = array( 'numberposts' => '3' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
$output = '<a style="color:white;text-decoration:none;" href="'. get_permalink($recent["ID"]) . '">
<article class="post post_home" style="background-image: url(';
if( has_post_thumbnail($recent["ID"]) ) {
$output .= get_the_post_thumbnail_url( $recent["ID"], 'cover' );
} elseif ( has_category( 'positive-morning' ) ) {
$output .= get_bloginfo('template_directory') . '/img/BG/2-Morning.jpg';
} elseif ( has_category( 'positive-talks' ) ) {
$output .= get_bloginfo('template_directory') . '/img/BG/2-Talks.jpg';
}
$output .= ' background-position : center; background-size :cover;">
<h2>'. $recent["post_title"] .'</h2></article>';
echo $output;
}
Theres a few things missing here. You're not setting up postdata inside your loop and you don't need a function inside it either, also personally I don't like concatinating strings together inside PHP tags to make HTML so I used ob_start() and ob_get_clean() to build the HTML. try something like this...
<?php
$args = array( 'numberposts' => '3' );
$recent_posts = wp_get_recent_posts( $args );
ob_start();
foreach( $recent_posts as $recent ){
setup_postdata($recent); ?>
<a style="color:white;text-decoration:none;" href="<?php get_permalink($recent["ID"])?>">
<article class="post post_home" style="background-image: url(<?php
if( has_post_thumbnail() ) {
echo get_the_post_thumbnail_url( $recent["ID"], 'cover' );
} elseif ( has_category( 'positive-morning' ) ) {
echo get_bloginfo('template_directory') . '/img/BG/2-Morning.jpg';
} elseif ( has_category( 'positive-talks' ) ) {
echo get_bloginfo('template_directory') . '/img/BG/2-Talks.jpg';
}; ?>
); background-position : center; background-size :cover;">
<h2><?php echo $recent["post_title"] ?></h2></article>
<?php
wp_reset_postdata();
}
echo ob_get_clean(); ?>
Fair warning I haven't tested any of that code
I'm using this snippet to output the product gallery attachments on a custom wordpress template for a woocommerce site. I'm using a lightbox for the popup. But I struggling to get the attachment url, instead it keeps on using the featured image the pop-up.
<?php
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
$url = $thumb['0'];
echo '<div>';
foreach( $attachment_ids as $attachment_id )
{
echo '<a href="' . $url . '" rel="shadowbox" >' ."<img src=".$image_link = wp_get_attachment_url( $attachment_id, 'large')." style='width:70px; height:70px;' >". '</a>';
}
echo '</div>';
?>
Any ideas on how to target the correct url path for the product gallery images?
Any help much appreciated!
I have changed 'thumbnail_size' to 'large' added global $post; and changed .wp_get_attachment_image_src( $attachment_id, 'large')..
The $post will need to be decalered globaly to access it's contents since this is outside "the loop".
EDIT 2 I've updated the code below so it should link to the image clicked. Removed $thumb and $url as it's not being used.
<?php
global $product;
global $post;
$attachment_ids = $product->get_gallery_attachment_ids();
echo '<div>';
foreach( $attachment_ids as $attachment_id )
{
echo '<a href="' .wp_get_attachment_image_src( $attachment_id, 'large'). '" rel="shadowbox" >' ."<img src=".wp_get_attachment_image_src( $attachment_id, 'large')." style='width:70px; height:70px;' >". '</a>';
}
echo '</div>';
?>
Hope this will help you
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
foreach( $attachment_ids as $attachment_id )
{
//Get URL of Gallery Images - default wordpress image sizes
echo $Original_image_url = wp_get_attachment_url( $attachment_id );
echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
//Get URL of Gallery Images - WooCommerce specific image sizes
echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
//echo Image instead of URL
echo wp_get_attachment_image($attachment_id, 'full');
echo wp_get_attachment_image($attachment_id, 'medium');
echo wp_get_attachment_image($attachment_id, 'thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
echo wp_get_attachment_image($attachment_id, 'shop_catalog');
echo wp_get_attachment_image($attachment_id, 'shop_single');
}
I have the following code in my wordpress theme, single-post page (the page where single posts are displayed).
<article id="post-<?php the_ID(); ?>"<?php post_class('col-md-12'); ?>>
<div class="container">
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/>
<?php endif; ?>
<?php if ( $post->post_type == 'data-design' && $post->post_status == 'publish' ) {
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$class = "post-attachment mime-" . sanitize_title( $attachment->post_mime_type );
$thumbimg = wp_get_attachment_link( $attachment->ID, 'thumbnail-size', true );
echo '<li class="' . $class . ' data-design-thumbnail">' . $thumbimg . '</li>';
}
}
}
?>
<div class="entry-content">
<?php the_content(); ?>
<?php
wp_link_pages( array(
'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
'after' => '</div>',
) );
?>
</div><!-- .entry-content -->
</div>
</article><!-- #post-## -->
It puts the post-title then featured-image as a large image then posts the content, and then the rest.
I want to target the images in the content, and display them the same way as the featured-image is displayed.
*NOTE - changes to the 'if ( $attachments ) { ...' function doesn't change anything (nor does completely removing it) so I am not certain what that part does. the only code that affects the content is when it is called ( '')
Sometimes ago I used to following code to strip off all the images in my content area and then display them separately apart from the contents. This might help you.
In your functions.php file -
function stripe_images_from_content($content){
$images = array();
$subject = $content;
$subject = preg_replace('~<img [^\>]*\ />~', '', $subject);
$subject = preg_replace('~\[caption[^\]]*\][^\]]*\]~', '', $subject);
$image_urls = array();
$match_count = preg_match_all( '/<img.*src=["\']([^"\']*)["\'].*\/>/', $content, $image_urls );
if (is_numeric($match_count) && $match_count > 0) {
if( is_array($image_urls[1]) and count($image_urls[1]) > 0 ){
foreach( $image_urls[1] as $i ){
$featured_image_url = $i;
$image_id = get_attachment_id_from_src( $featured_image_url );
if (! is_numeric($image_id)) {
$match_count = preg_match( '/(.*)-\d+x\d+(\.(jpg|png|gif))/', $featured_image_url, $matches );
if (is_numeric($match_count) && $match_count > 0) {
$base_image_url = $matches[1] . $matches[2];
$images[] = get_attachment_id_from_src( $base_image_url );
}
}
else{
$images[] = $image_id;
}
}
}
}
$data = new stdClass();
$data->images = $images;
$data->content = $subject;
return $data;
}
What this function does is get all the images inserted in the content area of a post and strip them off. Then return the image(s) and the content without image.
in your single.php file-
$content = stripe_images_from_content(get_the_content());
Now you need to do two things. $content->images contains all the images inserted in the post content area. And $content->content holds the raw content images stripped off. First you need to use $content->images wisely where you want to display your images and second replace the the_content() function with echo wpautop($content->content);
Hope this might help you.