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

tuba

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

Relatedthumb Alt Tag

linkPost by tuba » Wed Jan 03, 2018 5:28 pm

Hello, Asmi

I call images from blogspot and added following code to my function.php to make them visible but there is a Problem , although images have Alt tag , related posts haven 't
I don't know how can I fix this issue , is it possible to pull alt tag information from outside calling photos for for related post section
CODE : 1
------------------------------------------------
##picture_start
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
if(preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches)){
$first_img = $matches [1] [0];
return $first_img;
}
else {
$first_img = get_template_directory_uri()."/images/ceofix_logo.png";
return $first_img;
}
}
#picture_finish
------------------------------------------------
CODE: 2
------------------------------------------------
<div class="relatedthumb">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
} else {
echo '<img width="120" height="120" src="';
echo catch_that_image();
echo '" alt="" />';
} ?>
------------------------------------------------


https://www.ceofix...net/69/remove-password-showing-icon-from-windows-10-sign-in-screen/
User avatar
Asmi Khalil

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

Re: Relatedthumb Alt Tag

linkPost by admin » Wed Jan 31, 2018 2:44 pm

Hi Tuba,

The related posts images have the post title in the "alt" attribute. The theme only grabs the image source file "src" from the posts (if no image is set as featured, it will grab the first image found in the post content).
I am not a fan of regular expression. Frankly, I always refer to StackOverflow when it comes to regular expressions but you need to match the whole image tag, not just its src attribute.
Maybe you should use this code instead to match all images, while keeping all its attributes including Alts;
<?php

##picture_start
function catch_that_image() {

	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();

	if ( preg_match_all( '/<img[^>]+>/i', $post->post_content, $matches ) ) {
		$first_img = $matches[0][0];
		return $first_img;
	} else {
		$first_img = get_template_directory_uri()."/images/ceofix_logo.png";
		return $first_img;
	}
}
#picture_finish
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
tuba

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

Re: Relatedthumb Alt Tag

linkPost by tuba » Thu Feb 08, 2018 8:04 am

admin wrote:Hi Tuba,

The related posts images have the post title in the "alt" attribute. The theme only grabs the image source file "src" from the posts (if no image is set as featured, it will grab the first image found in the post content).
I am not a fan of regular expression. Frankly, I always refer to StackOverflow when it comes to regular expressions but you need to match the whole image tag, not just its src attribute.
Maybe you should use this code instead to match all images, while keeping all its attributes including Alts;
<?php

##picture_start
function catch_that_image() {

	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();

	if ( preg_match_all( '/<img[^>]+>/i', $post->post_content, $matches ) ) {
		$first_img = $matches[0][0];
		return $first_img;
	} else {
		$first_img = get_template_directory_uri()."/images/ceofix_logo.png";
		return $first_img;
	}
}
#picture_finish

Hi, Asmi Khalil , codes did not exist

sample image: home.page and Related Posts
Attachments
13.png
13.png (161.69 KiB) Viewed 2294 times
12.png
12.png (103.66 KiB) Viewed 2294 times
User avatar
Asmi Khalil

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

Re: Relatedthumb Alt Tag

linkPost by admin » Fri Feb 09, 2018 9:32 pm

Can you give me your page HTML code (just the <article></article> code)?
Also, delete these 2 lines from CODE 2:
echo '<img width="120" height="120" src="';
and:
echo '" alt="" />';
Since the catch_that_image() function is expected to return the whole image markup.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
tuba

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

Re: Relatedthumb Alt Tag

linkPost by tuba » Sat Feb 10, 2018 1:02 pm

hi, Asmi, delete these 2 lines from CODE 2: when you apply those changes
page does not open :(

I guess the codes you want ?

content.php
<article id="post-<?php the_ID(); ?>" <?php post_class('post-box small-post-box'); ?>>  
				<div class="post-img small-post-img">		
					<?php if ( has_post_thumbnail()  ) {
		  the_post_thumbnail('large');
		} else {
		   echo '<img src="';
			 echo catch_that_image();
			 echo '" alt="" />';
		}   ?>
functions.php
<?php while( $my_query->have_posts() ) {
							$my_query->the_post(); ?>
							<li>
								<div class="horizontal-container">
									<div class="relatedthumb">
										<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
											<?php if ( has_post_thumbnail()  ) {
		  the_post_thumbnail('large');
		} else {
		   echo '<img width="120" height="120" src="';
			 echo catch_that_image();
			 echo '" alt="" />';
		}   ?>

functions.php

<?php while( $my_query->have_posts() ) {
							$my_query->the_post(); ?>
							<li>
								<div class="horizontal-container">
									<div class="relatedthumb">
										<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
											<?php if ( has_post_thumbnail()  ) {
		  the_post_thumbnail('large');
		} else {
		   echo '<img width="120" height="120" src="';
			 echo catch_that_image();
			 echo '" alt="" />';
		}   ?>
User avatar
Asmi Khalil

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

Re: Relatedthumb Alt Tag

linkPost by admin » Fri Feb 23, 2018 3:02 am

Sorry for the late reply :oops:
Can you replace all code in single.php temporarily with this code;
<?php while ( have_posts() ) : the_post();
	catch_that_image();
endwhile; ?>
Then visit any post and give me the HTML code (you can easily get the full page source code by mouse right-click on most browsers).
Don't forget to revert back your old single.php code.

By the way, there is no global variable in WordPress called $posts, as far as I know. If you try to access this variable you will get an error.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
tuba

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

Re: Relatedthumb Alt Tag

linkPost by tuba » Sat Feb 24, 2018 9:46 pm

admin wrote:Sorry for the late reply :oops:
Can you replace all code in single.php temporarily with this code;
<?php while ( have_posts() ) : the_post();
	catch_that_image();
endwhile; ?>
Then visit any post and give me the HTML code (you can easily get the full page source code by mouse right-click on most browsers).
Don't forget to revert back your old single.php code.

By the way, there is no global variable in WordPress called $posts, as far as I know. If you try to access this variable you will get an error.
Blank page: Here is the html code.
Thanks
Attachments
www.ceofix.net.zip
(2.23 KiB) Downloaded 67 times
User avatar
Asmi Khalil

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

Re: Relatedthumb Alt Tag

linkPost by admin » Mon Mar 26, 2018 5:19 pm

Sorry, my bad :oops: I thought the function does not display the result, it returns it instead.
Please try this code instead:
<?php while ( have_posts() ) : the_post();
	echo catch_that_image();
endwhile; ?>
I would recommend trying this on local WP installation. It's very easy to setup one using XAMPP or WampServer.
Also, make sure to turn on debug mode by adding/editing this code in your wp-config.php file:
define( 'WP_DEBUG', true );
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
tuba

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

Re: Relatedthumb Alt Tag

linkPost by tuba » Thu Mar 29, 2018 2:35 pm

hi Asmi, no poblem, :)) And Blank page: Here is the html code.
Thanks :)
Attachments
ceofix.zip
(50.5 KiB) Downloaded 46 times
User avatar
Asmi Khalil

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

Re: Relatedthumb Alt Tag

linkPost by admin » Thu Mar 29, 2018 5:14 pm

Looks like the function is returning the correct image link but still don't know why the source code of your page is totally different than the link displayed in your screenshot. Not sure if this is the result of a Chrome extension or your server.

Anyway, I will try to replicate this on my local server and look for a solution. If I understand you correctly, you want to select the first image included in your post content (doesn't matter if it is external or internal) as Featured image, right?

WordPress have already filters and actions to alter the result of the_post_thumbnail() and get_the_post_thumbnail() so we will be using them instead of creating a custom function and editing template files to replace core WP function with our own. We did similar thing in this post viewtopic.php?p=1795#p1795

Please give me a day or two and I will share the solution here.

By the way, if you have a moment, please share your valuable review about RedWaves lite here https://themient.com/themes/redwaves-lite/#review
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 Wed Oct 16, 2019 2:32 am