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.
Related
I have several thousand products on the store that do not have a thumbnail. So I came up with a code to get them from the "featured-images" attribute, which has a link in it. On the store page, the category page works fine, but the product in the cart does not display the image. What am I doing wrong?
function alterImageSRC($image, $attachment_id, $size, $icon){
global $product;
$url = "https://website.com/wp-content/uploads/thumbs/placeholder.png";
if (!is_null($product)) {
$optimex_featured = $product->get_attribute( 'pa_featured-images' );
$url = "https://website.com/wp-content/uploads/thumbs/$optimex_featured";
}
$image[0] = $url;
return $image;
}
add_filter('wp_get_attachment_image_src', 'alterImageSRC', 10, 4);
I'm building a website with some articles accessible only for Members. All articles, accessible or not are shown on a page and i would like to add an icon on top of the featured image for people to understand which articles they can see for free or not.
Could you help ? I've already read the doc about featured image but my brain can't make the whole thing...
Here's what i already tried :
function article_reserve( $title ) {
if ( has_tag( 'abonne' ) ) {
$title = 'test ' . $title;
}
return $title;
}
add_filter( 'the_title', 'article_reserve' );
It change the title but i'm trying to change the featured image
Also tried that after comments :
function wpse_post_thumbnail_html( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
// Optionally add any logic here for determining what markup to output.
// $html will be an empty string if there is no post thumbnail.
if ( has_tag( 'abonne' ) ) {
$new_html = '<img src="https://placekitten.com/g/600/600" alt="kitten">';
}
return $new_html;
}
add_action( 'post_thumbnail_html', 'wpse_post_thumbnail_html', 10, 5 );
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'm trying to create a custom field that when the editor loads, the pages/posts featured image url would be populated in the post if it exists. The ACF Docs for the load_field function all revolve around using selects and not a normal text field.
I have tried to do something similar like so:
function my_acf_load_field( $field ) {
$file = get_post_meta( $attachment_id, '_wp_attached_file', true );
$field['feat_image_file_name'] = $file;
return $field;
}
// name
add_filter('acf/load_field/name=feat_image_file_name', 'my_acf_load_field');
The page doesn't populate with the value (even though the post does have a feat image assigned). Any help to point me in the right direction would be great. Thank you.
Found the solution thanks to another developer helping me. Solution below:
/* ---------------------------------------------------------------------------
* AUTO-POPULATE ACF Field with FEATURED IMAGE URL PATH
* --------------------------------------------------------------------------- */
function getThumbURL()
{
$myfile = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ));
$finalresult = "";
if(count($myfile) > 0 && is_string($myfile[0]))
{
// get the domain site url and strip it out of the result for relative path only
$domain = get_site_url();
$finalresult = str_replace($domain, '', $myfile[0]);
}
else
{
// Placeholder image if no feat image assigned
$finalresult = '/dir/to/placeholder/img.jpg';
}
return $finalresult;
}
function my_acf_update_value( $value, $post_id, $field ) {
$value = getThumbURL();
return $value;
}
add_filter('acf/update_value/name=feat_image_file_name', 'my_acf_update_value', 10, 3);
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 );