wordpress multiple post thumbnail hiding class attributes - 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;
}

Related

WordPress: Loading another page/post inside the "the_content" filter creates an 500 Internal Server Error

I would like to modify a posts content with the "the_content" filter.
Inside this filter I would like to load another posts content.
This is my code:
add_filter( 'the_content', 'my_content_filter' );
function my_content_filter( $content ){
if ( !is_singular( 'my-custom-post-type' ) ){
return $content;
}
ob_start();
echo '<p>SOME HTML BEFORE THE CONTENT</p>';
echo $content;
echo '<p>SOME HTML AFTER THE CONTENT</p>';
$module = get_post( 12345 ); // load specific post
echo apply_filters( 'the_content', $module->post_content );
echo '<p>SOME MORE HTML</p>';
$html = ob_get_contents();
ob_end_clean();
return $html;
}
Sadly this creates a 500 Internal Server Error.
I guess because I created an endless loop. Do you have any idea how to get the formatted content of another post inside the "the_content" filter?
Thanks :-)
Jan
EDIT
A bit more details: I created a custom post type called "sidebars" where I edit the content with a page builder. I would like to add this sidebars with PHP.
SOLUTION
With the "Elementor" page builder you can do this:
add_filter( 'the_content', 'my_content_filter' );
function my_content_filter( $content ){
if ( !is_singular( 'my-custom-post-type' ) ){
return $content;
}
ob_start();
echo '<p>SOME HTML BEFORE THE CONTENT</p>';
echo $content;
echo '<p>SOME HTML AFTER THE CONTENT</p>';
$elementor = \Elementor\Plugin::instance();
echo $elementor->frontend->get_builder_content( 12345 );
echo '<p>SOME MORE HTML</p>';
$html = ob_get_contents();
ob_end_clean();
return $html;
}

Change logo depending of the page

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.

Adding Bootstrap img-responsive class to Wordpress images fails at gallery thumbs

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

Thumbnail to external link AND Thumbnail to post

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 );

How to prevent giving links by wordpress to images?

By default, wordpress link images you enter in the editor. How to turn off this action.
Found this solution but it doesn't work.
add_filter( 'the_content', 'attachment_image_link_remove_filter' );
function attachment_image_link_remove_filter( $content ) {
$content =
preg_replace(
array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}',
'{ wp-image-[0-9]*» /></a>}'),
array('<img','» />'),
$content
);
return $content;
}
Add this code to your theme's function.php file.
function wpb_imagelink_setup() {
$image_set = get_option( 'image_default_link_type' );
if ($image_set !== 'none') {
update_option('image_default_link_type', 'none');
}
}
add_action('admin_init', 'wpb_imagelink_setup', 10);
Thanks
In Insert Media window, you can select what you'd like your image to be linked to. Simply select None.

Categories