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