How can I display the featured image of a post in a modal along with it's content.
With the help of a few online threads on similar issues, I tried this:
<?php
if ( has_post_thumbnail()) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail('my_feature_image', array( 'class' => "someName" ));
echo '</a>';
}
?>
Which unfortunately returns the same featured image for all posts.
On the same header.php where the modal is found, the following is there (above the modal divs):
//on the homepage... check for the post URL...
//do we have a custom permalink incoming....
$perma = false; if (isset($wp_query->query_vars['phpost_slug'])) #WHFIX 24/03/2015:
$perma = $wp_query->query_vars['phpost_slug'];
if($perma){
//we don't want to return a 404
$wp_query->set( 'is_404', false );
$phid = get_page_by_path($perma, OBJECT, 'post');
$postvote = get_post_meta($phid->ID, 'epicredvote' ,true);
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $phid->ID ), 'single-post-thumbnail' );
$pluginfeat = get_post_meta($phid->ID,'phog',true);
$desc = get_post($phid->ID)->post_content;
link to site: https://goo.gl/30a3QQ [Click on the post's row to open the modal.]
UPDATE
I tried removing the anchor tags as well as the classes like this and it still isn't working:
<?php
if ( has_post_thumbnail()) {
the_post_thumbnail();
}
?>
The element you are changing is only the html wireframe for the onclick handlers to populate, the problem is, it didnt include a image on the original so you need to add that functionality. something like this should work (add to your footer)
var eventTargets=document.querySelectorAll('.hunt-row');
[].forEach.call(eventTargets, function(t){
t.addEventListener('click', function(){
console.log('clicked');
var img= this.querySelector('img').src;
//bind new src to modal thumb, this is not ideal as there is only a class rather than a id...
document.querySelector('.modal-thumb').src= img;
}, false);
});
Of course, im not sure how nice it will play with the other click handlers, you may need to remove the default and write your own to populate the model box onclick.
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 } ?>
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>';
}
I have a menu with multiple dropdowns.
I want to show bellow or beside the link of a post or posts in a menu dropdown the featured image. Is it possible?
I've attached an image to this message.
I don't want to know how to style it or something like that.
So let's say I have "Siguranta", I want to display the featured image of that post underneath and a "Read more" link under the image. Many thanks in advance.
Add filter to specific menus
add_filter('wp_nav_menu_args', 'add_filter_to_menus');
function add_filter_to_menus($args) {
// You can test agasint things like $args['menu'], $args['menu_id'] or $args['theme_location']
if( $args['theme_location'] == 'header_menu') {
add_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
}
}
Filter menu
function filter_menu_items($item)
{
if ($item->type == 'taxonomy') {
// For category menu items
$cat_base = get_option('category_base');
if (empty($cat_base)) {
$cat_base = 'category';
}
// Get the path to the category (excluding the home and category base parts of the URL)
$cat_path = str_replace(home_url() . '/' . $cat_base, '', $item->url);
// Get category and image ID
$cat = get_category_by_path($cat_path, true);
$thumb_id = get_term_meta($cat->term_id, '_term_image_id', true); // I'm using the 'Simple Term Meta' plugin to store an attachment ID as the featured image
} else {
// Get post and image ID
$post_id = url_to_postid($item->url);
$thumb_id = get_post_thumbnail_id($post_id);
}
if (!empty($thumb_id)) {
// Make the title just be the featured image.
$item->title = wp_get_attachment_image($thumb_id, 'poster');
}
return $item;
}
And then you want to remove the filter that you applied at the beginning, so that the next menu processed doesn't use the same HTML as defined above in filter_menu_items().
Remove filters
add_filter('wp_nav_menu_items','remove_filter_from_menus', 10, 2);
function remove_filter_from_menus( $nav, $args ) {
remove_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
return $nav;
}
So, I will answer my own question. I finally did it with this code:
// get featured image
$thumbnail = get_the_post_thumbnail( $item->object_id );
//display featured image
$item_output .= $thumbnail;
I have to mention that I used this code in the walker class.
Here is what I'd like to accomplish
Goal A: I want to hyperlink each thumbnail in index.php to their post.
Goal B: I want to define a hyperlink for each thumbnail in single.php to an external website.
You may ask why am I using thumbnails for single.php? The reason is because I want this layout:
And so far I understand that there are 3 methods to display images:
Insert image into the editor area along with the text, but the problem is I cannot float the image and text differently because all items within a post are assigned a p tag - am I wrong?
Custom fields should get the job done but it doesn't seem the most efficient way - or am I wrong?
Post Thumbnails should be the easiest way but see my problem below
I have the code to accomplish Goal A and B but they only work separately.
In other words, "Code 1" does not work if "Code 2" is present.
How can I resolve this issue? Or is there a better method accomplish my goal?
Code 1: Link thumbnails to external websites using custom field (single.php)
<?php $name = get_post_meta($post->ID, 'externalurl', true);
if( $name ) { ?>
<?php the_post_thumbnail(); ?>
<?php } else {
the_post_thumbnail();
} ?>
Code 2: Link thumbnails to the post (functions.php)
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = '' . $html . '';
return $html;
}
is_single() function will help you achieve what you need. Try below code in functions.php and remove the additional code from single.php
function my_post_image_html( $html, $post_id, $post_image_id ) {
if ( is_single()) {
$name = get_post_meta($post_id, 'externalurl', true);
if( $name ) {
$html = '' . $html . '';
}
return $html;
}
else
{
$html = '' . $html . '';
return $html;
}
}
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );