Relatedthumb Alt Tag
Topics related to RedWaves lite theme goes here.

tuba

Member Rank
Posts: 34
Joined: Tue Jun 20, 2017 8:39 am
Display Name: tuba

Re: Relatedthumb Alt Tag

linkPost by tuba » Fri Mar 30, 2018 11:11 am

I have already called the first image as Feature image , there is no problem but if I right click the feature image and look at the source code the image which is called form external source , has no "Alt tag" here is the example photo
Attachments
alt-tag2.png
alt-tag2.png (259.76 KiB) Viewed 260 times
alt-tag.png
alt-tag.png (370.28 KiB) Viewed 260 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 732
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: Relatedthumb Alt Tag

linkPost by admin » Fri Mar 30, 2018 1:58 pm

Ok, here is what I've been able to accomplish;
First, we need to get rid of the redwaves_get_thumbnail(). It's better to use WP core functions like the_post_thumbnail() or get_the_post_thumbnail(). Most people expect the default behavior of WP when it comes to these functions and changing it might lead to several issues in the future. In the next update, I will be reverting back to the old lovely the_post_thumbnail() function. I our case, we must use the_post_thumbnail() because redwaves_get_thumbnail() only returns the SRC attribute.

So, inside /template-parts/content.php, replace this code;
<img width="298" height="248" src="<?php echo redwaves_get_thumbnail( 'smallfeatured' ); ?>" class="attachment-featured wp-post-image" alt="<?php the_title_attribute(); ?>">
With this code;
<?php the_post_thumbnail( 'smallfeatured' ); ?>
And this code;
<img width="666" height="333" src="<?php echo redwaves_get_thumbnail( 'big' ); ?>" class="attachment-featured wp-post-image" alt="<?php the_title_attribute(); ?>">
With this code;
<?php the_post_thumbnail( 'big' ); ?>
Also, inside functions.php, the redwaves_related_posts() function, replace this code (2 occurrences);
<img width="120" height="120" src="<?php echo redwaves_get_thumbnail( 'small' ); ?>" class="attachment-featured wp-post-image" alt="<?php the_title_attribute(); ?>">
With this code;
<?php the_post_thumbnail( 'small' ); ?>
Now, we will use the post_thumbnail_html filter to alter the featured image HTML code and we will use PHP's DOMDocument http://php.net/manual/en/class.domdocument.php which will make extracting HTML attributes a peace of cake. As I previously said, I don't really get regular expressions but we don't need them here.
We need to cache the extracted image because DOMDocument is heavy on the server. And we will cache the result for a whole week since I think you don't update your posts daily or hourly. And even if you do, don't worry, we will add a simple function and hook it into the post_updated action to clear our cached image each time a post has been updated.

Inside functions.php, add this code;
// Change post thumbnail HTML
add_filter( 'post_thumbnail_html', 'redwaves_child_replace_post_thumb_html', 10, PHP_INT_MAX );
if ( !function_exists( 'redwaves_child_replace_post_thumb_html' ) ) {
	function redwaves_child_replace_post_thumb_html( $html, $post_id ) {

		$post = get_post( $post_id );

		// Check if post exists
		if ( !$post instanceof WP_Post ) {
			return $html;
		}

		// Check if we have cached image attributes
		$cached_img = get_transient( 'ext_post_thumb_'. $post_id );

		// We have a cached image
		if ( $cached_img ) {

			$img_src = $cached_img['src'];
			$img_title = $cached_img['title'];
			$img_alt = $cached_img['alt'];

		// Nah! We don't have one unfortunately 
		} else {

			$img_src = $img_title = $img_alt = '';

			// Create DOM instance and load it with post content
			$doc = new DOMDocument();
			@$doc->loadHTML( $post->post_content );

			// Get all images including their attributes
			$imgs = [];
			$elements = $doc->getElementsByTagName( 'img' );

			if ( $elements ) {
				foreach ( $elements as $element ) {
					$imgs[] = array(
						'src' => $element->getAttribute( 'src' ),
						'title' => $element->getAttribute( 'title' ),
						'alt' => $element->getAttribute( 'alt' )
					);
				}
			}

			// We have some images, but we just need the first one
			if ( !empty( $imgs ) ) {

				// Add the image attr to the cache for one week
				set_transient( 'ext_post_thumb_'. $post_id, $imgs[0], WEEK_IN_SECONDS );

				// Add the attr to initial variables
				$first_img = $imgs[0];
				$img_src = $first_img['src'];
				$img_title = $first_img['title'];
				$img_alt = $first_img['alt'];
			}
		}

		// Set default values for empty attributes, feel free to change these
		$img_src = $img_src != ''? $img_src: get_template_directory_uri()."/images/ceofix_logo.png";
		$img_title = $img_title != ''? $img_title: esc_html__( 'Default image title', 'redwaves-lite' );
		$img_alt = $img_alt != ''? $img_alt: esc_html__( 'Default image alt', 'redwaves-lite' );

		return sprintf( '<img src="%s" title="%s" alt="%s" >', $img_src, $img_title, $img_alt );
	}
}
Don't forget to change Default image title and Default image alt with your preferred ALT and Title placeholders.
To clear the cached image on post update, add this code;
// Delete the cached image on post update
if ( !function_exists( 'redwaves_child_clear_cached_thumb_on_update' ) ) {
	function redwaves_child_clear_cached_thumb_on_update( $post_id ) {

		delete_transient( 'ext_post_thumb_'. $post_id );
	}
}
add_action( 'post_updated', 'redwaves_child_clear_cached_thumb_on_update', 10, 3 );
If this is not working for you, please deactivate all your plugins and test it again. If it still not working, then switch to default WP theme and add the above two codes to the active theme functions.php.

By the way, thanks for leaving your review :D
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
tuba

Member Rank
Posts: 34
Joined: Tue Jun 20, 2017 8:39 am
Display Name: tuba

Re: Relatedthumb Alt Tag

linkPost by tuba » Thu Apr 05, 2018 10:52 pm

I have added your code into the content.php but my Featured images has been disappeared
Attachments
www.ceofix.net.png
www.ceofix.net.png (154.56 KiB) Viewed 248 times
tuba

Member Rank
Posts: 34
Joined: Tue Jun 20, 2017 8:39 am
Display Name: tuba

Re: Relatedthumb Alt Tag

linkPost by tuba » Fri Apr 06, 2018 8:40 am

this my code first image as Feature image
but no "Alt tag"

content.php:
<?php
		$display = get_theme_mod( 'display', 'excerpt_smallfeatured' );
		if ( $display == 'excerpt_smallfeatured' ) {  ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class('post-box small-post-box'); ?>>  
				<div class="post-img small-post-img">	
				<?php the_post_thumbnail( 'big' ); 
		} else {
		   echo '<img src="';
			 echo catch_that_image();
			 echo '" alt="" />';
		}   ?>
Attachments
ceofix.net.png
ceofix.net.png (86.01 KiB) Viewed 246 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 732
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: Relatedthumb Alt Tag

linkPost by admin » Mon Apr 09, 2018 8:11 pm

tuba wrote:
Thu Apr 05, 2018 10:52 pm
I have added your code into the content.php but my Featured images has been disappeared
My code assumes you have an IMG HTML tag (at least one) in each post you have. Some of the codes must be added to your functions.php (please read the instructions in the previous post).
Also, you need to make some edits to content.php to make it use the core WP the_post_thumbnail() function. If you try this code one of the default WP themes, it should work fine.

I have already tested this code and it is working on my testing server.
Make sure php-xml package is installed. DOMDocument is an extension so it might not be installed on your server.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
User avatar
Asmi Khalil

Site Admin Rank
Posts: 732
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: Relatedthumb Alt Tag

linkPost by admin » Mon Apr 09, 2018 8:21 pm

tuba wrote:
Fri Apr 06, 2018 8:40 am
this my code first image as Feature image
but no "Alt tag"

content.php:
<?php
		$display = get_theme_mod( 'display', 'excerpt_smallfeatured' );
		if ( $display == 'excerpt_smallfeatured' ) {  ?>
			<article id="post-<?php the_ID(); ?>" <?php post_class('post-box small-post-box'); ?>>  
				<div class="post-img small-post-img">	
				<?php the_post_thumbnail( 'big' ); 
		} else {
		   echo '<img src="';
			 echo catch_that_image();
			 echo '" alt="" />';
		}   ?>
The above code is illogical. If you switch your blog layout to the other option, your page HTML will be broken.
You should follow my guide and you can change your featured image HTML in the redwaves_child_replace_post_thumb_html() function. This way, you can update your theme in the future without loosing your customizations.
The ALT attribute is empty because your code is making it empty (echo '" alt="" />';)
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Fri Jul 20, 2018 4:29 pm