Short story:
I'm trying to get the ID of the Header Image in Wordpress.
All I found was this guide, which dosn't seem to work anymore:http://nickohrn.com/2013/09/get-attachment-id-wordpress-header-image/
Long Story
I'm trying to make the WP Header responsive with an srcset. so I don't want to use this code
<img id="masthead-bg" src="<?php header_image() ?>" alt="">
...but instead want to use the wp_get_attachment_image_srcset function to get the srcset of my header image. Only problem: I need an Image ID for this function -> The ID of my Header image.
<img id="masthead-bg"
src="<?php header_image() ?>"
srcset="<?php echo wp_get_attachment_image_srcset( image_id(), 'thumbnail' ); ?>"
sizes="100vw" alt="">
Any suggestions?
Try this...
// Get the header image data
$data = get_object_vars(get_theme_mod('header_image_data'));
// Now check to see if there is an id
$attachment_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($attachment_id) {
// Put your image code here, user whatever function to get image by id you need
}
Note: if you use a proper WordPress function to get the image it should add in all the srcset etc stuff for you, to allow for responsive images.
To answer the original question, I've found the simplest way to get the ID while I was filtering the markup that gets outputted by <?php the_header_image_tag(); ?> (introduced in v4.4).
function header_img_markup( $html, $header, $attr) {
// we can get the image ID by passing its src url to this method
$header_img_id = attachment_url_to_postid($attr['src']);
// now we can get its metadata from the db
$header_img_data = wp_get_attachment_metadata($header_img_id);
// now we can use the data
$customSizeWidth = $header_img_data['sizes']['my-custom-size']['width'];
// ...your custom output here...
return $html;
}
add_filter('get_header_image_tag', 'header_img_markup', 20, 3);
Responsive Wordpress Header Image with fallback:
if (get_header_image() !== '') {
$attachment_id = attachment_url_to_postid(get_header_image());
echo wp_get_attachment_image($attachment_id, 'large');
}
if (get_header_image() == '') {
echo '<h1>'.get_bloginfo( "name" ).'</h1>';
echo '<h2>'.get_bloginfo( "description" ).'</h2>';
}
Related
I'm having a very strange issue. All I want to do is get the thumbnail url and assign it to a variable. Here is my code.
<?php /* Template for displaying content of MH Posts Large widget */ ?>
<article class="post-<?php the_ID(); ?> mh-posts-large-item">
<figure class="mh-posts-large-thumb">
<?php
$form_image = 'blank';
if (has_post_thumbnail()) {
$form_image = the_post_thumbnail_url('mh-magazine-lite-content');
?>
Basically, if the post has a thumbnail I want to store the actual URL of the thumbnail used in that variable for later use. However, instead of doing that it just prints the URL on screen and doesn't actually seem to put it in the variable.
I don't understand why and I would definitely appreciate any help! :)
Looking at the official documentation:
function the_post_thumbnail_url( $size = 'post-thumbnail' ) {
$url = get_the_post_thumbnail_url( null, $size );
if ( $url ) {
echo esc_url( $url );
}
}
So the_post_thumbnail_url only outputs the URL it gets from get_the_post_thumbnail_url and doesn't return anything. Thus the solution is to use get_the_post_thumbnail_url directly.
is there filter of some sort that can add a image if there is no featured image present when using the Elementor pro "post" element.
Because the title goes up if there is no image placed and it breaks the sites display
want to add a placeholder image like below when no featured image is available
You can add this filter to you theme functions.php :
function mlnc_filter_post_thumbnail_html( $image_placeholder ) {
// If there is no post thumbnail,
// Return a default image
if ( '' == $image_placeholder ) {
return '<img src="' . get_template_directory_uri() . '/images/default-thumbnail.png"/>';
}
// Else, return the post thumbnail
return $image_placeholder;
}
add_filter( 'post_thumbnail_html', 'mlnc_filter_post_thumbnail_html' );
Another way is to go where the image is outputting and add an If statement like below:
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg"/>
<?php } ?>
I was trying to add featured image from post content. My idea is to set the first image of the content as featured image of the post.
I wrote this in my funtions.php
add_action('publish_post', 'auto_featured_image_publish_post');
function auto_featured_image_publish_post($post, $post_id) {
$thumnail_id = //something I need help with
set_post_thumbnail( $post, $thumbnail_id );
}
This is just an idea how I want to do this.
Please help. Thanks
Check this url
https://www.gavick.com/blog/wordpress-quick-tip-4-automatically-set-the-first-post-image-as-a-featured-image
OR you can use this code to get the url of the first image from any HTML code
<?php
$postcontent = "";
preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $postcontent, $image);
// you can use the exist pattern or use this
// '/< *img[^>]*src *= *["\']?([^"\']*)/i'
echo $image['src'];
?>
I'm am currently working on an Album Gallery and I am using this CMB2 plugin
https://github.com/WebDevStudios/CMB2
to create my custom fields. What I am using right now is the file_list field which allows me to upload multiple/bulk images.
But the problem is that I am not sure how to display each item. I would like to get the url of each item so I can use each as an image source.
What I am trying to achive is something like:
<li><img src="<?php echo $file_list; ?>" alt="" /></li>
Meaning, each item would be wrap in 'li img' and file link would be added as a src.
Your help would be much appreciated.
I hope this helps...
<?php $meta_values = get_post_meta(get_the_ID(), '_yourprefix_demo_file_list', true);
foreach($meta_values as $meta_value) {
echo '<li><img src="'. $meta_value . '"/></li>';
}
?>
actually I've made it worked with this:
<?php
$count=0;
if (is_array($album_files))
{
foreach ($album_files as $files)
{
$count++;
if (1 == $count) {
echo
'<figure>',
'<img ','src="', $files , '" ','>',
'</figure>';
}
}
}
?>
Hopefully this can help others as well.
I'm trying to get the twitter profile picture actual link.
I know I can get the profile picture through the following link:
$test = "http://api.twitter.com/1/users/profile_image?screen_name=".$nickname."&size=original"
but when I want to get the file contents of this url, it doesn't work, cause above mentioned link is redirected to the actual link of the profile picture. So this doesn't work:
file_get_contents($test);
How can I get the actual link of the profile picture and then with the size original?
Try this it might help you.
<?php
function getTwitterProfileImage($username) {
$size = '_bigger';
$api_call = 'http://twitter.com/users/show/'.$username.'.json';
$results = json_decode(file_get_contents($api_call));
return str_replace('_normal', $size, $results->profile_image_url);
}
$img = getTwitterProfileImage('thetutlage');
echo '<img src="'.$img.'"/>';
?>
Try this is up+direct,
<img class="img-rounded" src="<?php
$size = '';
echo str_replace('_normal', $size,$tweet->user->profile_image_url)
?>"
height="250px" width="400px" />