I'm trying to change the logo depending of the page I'm browsing. The goal is to have different logo style on all single product page.
What I have in my function.php so far is this. I've tried to check by is_product() but the logo isn't changed.
function change_logo_on_single($html) {
if(is_product()){
$html = preg_replace('/<img(.*?)\/>/', '<img src="Black.png" class="custom-logo" alt=logo"" itemprop="logo" />', $html);
}
return $html;
}
add_filter('get_custom_logo','change_logo_on_single');
You can make an custom action for this
<?php
add_action('my_theme_logo', function(){
if ( is_product() )
return '<img src="singlelogo.png" alt="single-logo" />';
else
return '<img src="main-logo.png" alt=logo"" />';
});
?>
and use action in your theme as below defined
<?php
echo do_action("my_theme_logo");
?>
You can use filter as below:
function change_logo_on_single( $html ) {
if ( is_product() )
return '<img src="Black.png" class="custom-logo" alt=logo"" itemprop="logo" />';
return $html;
}
add_filter( 'get_custom_logo', 'change_logo_on_single', 10, 3 );
Isn't it something rather on the browser's side than on server's? You could use javascript to change the source of your image. How to do it is described here.
Related
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 using the multiple post thumbnails plugin for Wordpress and am trouble finding a way to remove the default html attributes wordpress seem to generate? When you view the html source it comes up with;
<img width="600" height="450" src="http://localhost/news/../media/news-specials/hotplate2thumb.jpg" class="attachment-post-thumbnail size-post-thumbnail" alt="hotplate2thumb" />
I want to remove the width and height because that's invalid code. And I want to remove the class too, to make the site look less wordpressy.
Ideally it should generate as:
<img src="http://localhost/news/../media/news-specials/hotplate2thumb.jpg" alt="hotplate2thumb" />
I've already got this in the functions.php
//remove class from the_post_thumbnail
function the_post_thumbnail_remove_class($output) {
$output = preg_replace('/class=".*?"/', '', $output);
return $output;
}
add_filter('post_thumbnail_html', 'the_post_thumbnail_remove_class');
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
But that only works for wordpress' defult post thumbnails and not the multiple/secondary one.
I also tried implementing the code like so on the template:
<?php
if (class_exists('MultiPostThumbnails')):
echo "<img src=\"".MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image') . "\" alt=\"\" />";
endif; ?>
But that still renders a second image for all posts even if I don't have one set, so then I get broken images appearing in the theme. Not all my posts use a second image, only a few.
Thanks
Okay I solved it by adding
add_filter('post_secondary-image_thumbnail_html', 'the_post_thumbnail_remove_class');
add_filter( 'post_secondary-image_thumbnail_html', 'remove_width_attribute', 10 );
to this function
//remove class from the_post_thumbnail
function the_post_thumbnail_remove_class($output) {
$output = preg_replace('/class=".*?"/', '', $output);
return $output;
}
add_filter('post_thumbnail_html', 'the_post_thumbnail_remove_class');
add_filter('post_secondary-image_thumbnail_html', 'the_post_thumbnail_remove_class');
add_filter( 'post_secondary-image_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
I'm working on a Bootstrap 3 Wordpress theme. To make my images responsive I added Bootstrap's img-responsive class to them with the following code in my functions.php
<?php
function bootstrap_responsive_images( $html ){
$classes = 'img-responsive'; // separated by spaces, e.g. 'img image-link'
// check if there are already classes assigned to the anchor
if ( preg_match('/<img.*? class="/', $html) ) {
$html = preg_replace('/(<img.*? class=".*?)(".*?\/>)/', '$1 ' . $classes . ' $2', $html);
} else {
$html = preg_replace('/(<img.*?)(\/>)/', '$1 class="' . $classes . '" $2', $html);
}
// remove dimensions from images,, does not need it!
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
add_filter( 'the_content','bootstrap_responsive_images',10 );
add_filter( 'post_thumbnail_html', 'bootstrap_responsive_images', 10 );
This works pretty well, all get their class="img-responsive" except the thumbs in galleries. They only hav class="attachment-thumbnail or attachment-medium" depending on te choosen image size.
Any ideas?
Just use the same CSS bootstrap uses for .img-responsive and create a selector for your image galleries and apply that CSS to your new selector
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.
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 );