angelino
Hi,
It will take the fulltext image of article to show in og:image tag
I check the article above: https://www.calabriatours.org/destinations/le-castella.html and see that it did not have fulltext image, I just tried to add and the og:image tag is showing now.
Kindly check.
Yes Sir, but i can't add for all my articles a fulltext image.
I think that the STOREFRONT TEMPLATE must be set properly for INTROTEXT image also
It would be advisable for the template to take the first image inserted in the text of the article, regardless of the fulltext and introtext fields, is it possible? can I set something in joomla to solve this problem?
Thanks
angelino Hi. It actually takes it from joomla parameters.
But I believe it can be overwritten by using this script added to /layouts/blocks/head.php
<script type=“text/javascript">(function($) {$(document).ready(function() {
if( $('.itemBody img')>0 ){
$('head').append(('<meta property="og:image" content="'+$('.itemBody img').attr('src')+'" />');
}
});})(jQuery)</script>I try add this script on HEAD.PHP file of template, but do not work
I think the problem is to find on : /templates/gk_storefront/html/com_content/article/default.php
don't work properly OG:IMAGE and OG
ESCRIPTION tag
Hello Sir, the code was added and the cache disabled (the website do not use it).
Please, tell-me if you can help me, thanks
angelino Hi. I can see the issue in my code. Please use this one instead:
Please add it and make sure to disable cache (or clear it). Code needs to be present on the page so I will be able to check if it does what it should and adjust it for other metatags.<script type=“text/javascript">(function($) {$(document).ready(function() {
if( $('.itemBody img').size()>0 ){
$('head').append(('<meta property="og:image" content="'+$('.itemBody img').attr('src')+'" />');
}
});})(jQuery)</script>Hello Sir, unfortunately this doesn't seem to work either. I would like to understand where I have to enter it, if in a precise position on the page.
perhaps it should be inserted in the page /templates/gk_storefront/html/com_content/article/default.php ?
Thank you
Ok the code has been removed, now the original tepmlate file is back
angelino Hi. I've worked with the code and looks like og:image is appearing in code now.
a script I used is at the end of /layout/blocks/head.php
<script>(function($) {$(document).ready(function() {
if( $('.itemBody').size()>0 ){
$('head').append('<meta property="og:image" content="'+$('.itemBody img').attr('src')+'" />');
}
});})(jQuery)</script>Sorry my friend, but this code dont work properly. The OG:image tag do not appear!
I noticed that the problem concerns JOOMLA (sigh!).
The problem should be resolved in the file .../html/com_content/article/default.php
I found this tutorial : https://www.collectiveray.com/joomla/joomla-tutorials/add-facebook-open-graph-and-twitter-cards-to-joomla.html#h2-1-1-joomla-open-graph-tags-create-a-template-override-for-articles
and implemented it in my template. Unfortunately the problem is not solved because the script does not work with the images inserted in the content of the articles. But I think it's a good starting point.
thanks
angelino Hi. Ok, I believe itwill do the same what my script did, but we can do it this way.
I do have a function which extract image from text:
function imageExtract( $text ) {
$imagePath = '';
if( preg_match( '/\<img.*src=.*?\>/', $text )):
$imageStartPosition = JString::strpos( $text, 'src="' );
if( $imageStartPosition):
$imageEndPosition = JString::strpos( $text, '"', $imageStartPosition + 5 );
endif;
if( $imageStartPosition > 0 ):
$imagePath = JString::substr( $text, ( $imageStartPosition + 5 ), ( $imageEndPosition - ( $imageStartPosition + 5 ) ) );
print '';
endif;
endif;
return $imagePath;
} // eof imafeExtract()copy it above the changes advice and than replace the image value to:
<meta property="og:image" content="'.imageExtract( $this->item->fulltext ).'"/>