How to link to article when clicking image in Category blog

Hi,

I am using category blog to display my articles. Can you tell me how to link to article when clicking the image?

image.jpg

Thank you and regards,

Hai

Hi

Please tell me the exact url to the page You've made this screenshot.

Hi Teitbite,

I sent you the URL via SMS.

Thank you and looking forwards to your help.

Hai

Hi

Ok. Now I see what the problem is. Joomla articles has an option to add an image, a separate tab where an intro and full-text image can be added. If You will add Your images this way than it will be linking to articles. Right now Your images are displayed as a part of article content so there is no way to include such functionality.

Hi Teitbite,

I try to add an image for intro image, but I cannot click on the image to go to the article.

introlink.jpg

I sent you a link to the page via SMS.

Please help me to check

Thank you and regards,

Hai

Hi Teitbite,

I have another way to solve the problem. I link the intro image directly with the URL and it works. So there is no need to help me with this issue.

However, I have a crucial issue need your help. Please come to following topic and help me:
https://www.gavick.com/forums/news2-joo ... work-50611

The issue is that, the main menu item does not work properly in mobile mode.

Please check the issue in the same website like this topic.

Thank you very much for your help so far.

Hai

Hi

Ok. Following the link now.

Hi Teitbite,

Please help me again with this issue.

I used my way to add links to the image but it is not convenient.

First, I have to publish the article before knowing the url so it takes time.

Second, sometimes I change URLs because of some reasons. For example, I change alias name of a category, so URL of all articles change too, then it takes me time to change all url added to the intro image.

Because of those reasons, I like to use your way to add link to the intro image, that means I insert intro image to an article the way Joomla allows. Like the screenshot below:

insert image.jpg

But there is no link added to the intro image.

no link.jpg

Can you help me to solve that matter? I have sent you the url to the my page via a mesage.

Thank you and regards,

Hai

Hi

Please remind me an url to Your site. It's been a while so I've deleted Your message already.

Hi Teitbite,

I just sent you the url to my site via a private message.

Thank you and looking forwards to hearing from you.

Hai

Hi

Please edit /html/com_content/category/blog_item.php and replace code:

Code: Select all

      <img
         <?php if ($images->image_intro_caption):
            echo 'class="caption"'.' title="' .$images->image_intro_caption .'"';
         endif; ?>
         <?php if (!empty($images->image_intro)):?>
            style="float:<?php echo  $params->get('float_intro') ?>"
         <?php else: ?>
            style="float:<?php echo  $images->float_intro ?>"
         <?php endif; ?>
         src="<?php echo $images->image_intro; ?>" alt="<?php echo $images->image_intro_alt; ?>"/>


with

Code: Select all

<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>">
      <img
         <?php if ($images->image_intro_caption):
            echo 'class="caption"'.' title="' .$images->image_intro_caption .'"';
         endif; ?>
         <?php if (!empty($images->image_intro)):?>
            style="float:<?php echo  $params->get('float_intro') ?>"
         <?php else: ?>
            style="float:<?php echo  $images->float_intro ?>"
         <?php endif; ?>
         src="<?php echo $images->image_intro; ?>" alt="<?php echo $images->image_intro_alt; ?>"/>
</a>


Thank you Teitbite, it works like a charm now and will help me to save a lot of time,

I have another thing need your support. At the moment, the intro image is at top of the article in blog layout. I need to locate the title at top with facebook like and share, then comes the intro image then other infomations of the article like comments, creating date, read more, author name... like attached picture. Can you help tell me how to do that?

image 12.jpg

Thank you and regards,

Hai

Hi

This shouldn't be hard. Please edit file /html/com_content/category/blog_item.php and just copy paste parts responsible for showing items (some will be commented) in order You like.

Thank you Teitbite, I will try.

Hi

Let me know if You'll have problems with that. I will need an access to FTP to make it.

Hi Teitbite,

I tried but it is difficult for me. Please give me a hand.

I sent you FTP account directly to the directory via a private message.

Thank you and regards,

Hai

Hi

I'm sorry, but I have only one private message from You and it has an ulr to the page from screenshots. I do not have a message with FTP, please send it one more time.

Hi Teitbite,

I resent you the FTP account.

Thank you,

Hai

Hi

I'm not sure if You've send me an access to correct folder. Are You sure it's to template's /html/com_content/category ??? and not to /components one ??? I'm trying to make changes, but nothing is showing.

Anyway, here is a piece of code responsible for images:

Code: Select all

   <?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
   <div class="img-intro-<?php echo $images->float_intro ? $images->float_intro : $params->get('float_intro'); ?> itemImageBlock">
      




<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>">
      <img
         <?php if ($images->image_intro_caption):
            echo 'class="caption"'.' title="' .$images->image_intro_caption .'"';
         endif; ?>
         <?php if (!empty($images->image_intro)):?>
            style="float:<?php echo  $params->get('float_intro') ?>"
         <?php else: ?>
            style="float:<?php echo  $images->float_intro ?>"
         <?php endif; ?>
         src="<?php echo $images->image_intro; ?>" alt="<?php echo $images->image_intro_alt; ?>"/>
</a>





   </div>
   <?php endif; ?>


put it below:

Code: Select all

      <?php if ($params->get('show_title')) : ?>
      <header>
         <h2>
            <?php if ($params->get('access-view')) : ?>
               <a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>">
               <?php echo $this->escape($this->item->title); ?></a>
            <?php else : ?>
               <?php echo $this->escape($this->item->title); ?>
            <?php endif; ?>
         </h2>
      </header>
      <?php endif; ?>


Hi Teitbite,

I see it changed. Maybe you do not refresh the browser.

The title now is at top. However, I need the intro text to be before the image too, like attached screenshot. Please help me.

screenshot.jpg

Thank you and regards,

Hai

Hi

I've moved the image code below this:

Code: Select all

      <div class="itemBody<?php if (!$params->get('show_publish_date')) : ?> nodate<?php endif; ?>">
         <?php if (!$params->get('show_intro')) : ?>
            <?php echo $this->item->event->afterDisplayTitle; ?>
         <?php endif; ?>
         
         <?php echo $this->item->event->beforeDisplayContent; ?>
         
         <?php echo $this->item->introtext; ?>
      </div>


again I cannot see changes. You must have a cache on Your files and it will take some time when the file I've modified will be refreshed.

Hi Teitbite,

Please help me again, I refresh the cache and do not see any image.

Please help me to check the codes again.

Thank you and regards,

Hai

Hi Teitbite,

I copied the original file to the folder. Please help me to revise again.

Thank you.

Hai

Hi

Can You please ask Your hosting provider to disable this cache first ? It's a little bit pointless to make changes when I cannot see results.

Yes, I did. Please help me again

Hi Teitbite,

I tried myself and find out that, when I move the image code below:

<?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
<div class="img-intro-<?php echo $images->float_intro ? $images->float_intro : $params->get('float_intro'); ?> itemImageBlock">

<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid, $this->item->language)); ?>">
<img
<?php if ($images->image_intro_caption):
echo 'class="caption"'.' title="' .$images->image_intro_caption .'"';
endif; ?>
<?php if (!empty($images->image_intro)):?>
style="float:<?php echo $params->get('float_intro') ?>"
<?php else: ?>
style="float:<?php echo $images->float_intro ?>"
<?php endif; ?>
src="<?php echo $images->image_intro; ?>" alt="<?php echo $images->image_intro_alt; ?>"/>
</a>

</div>
<?php endif; ?>

right before these code:

<?php echo $this->item->introtext; ?>

The appearance is like screenshot1 below:

screenshot1.jpg

When I move the image code right after the code:

<?php echo $this->item->introtext; ?>

The appearance is like screenshot2 below:

screenshot2.jpg

So the code

<?php echo $this->item->introtext; ?>

is for both two part 1 and part 2 in the screenshot.

What I really want is the image to be between part1 and part2. Part 1 is "Intro text" and part 2 is "Readmore link". Can you help me to do that?

Thank you and regards,

Hai

Hi

Facebook elements are being added under the content by some 3rd party plugin, You can check if this plugin (I do not know which one, it's not a part of template) have an option to display it somewhere else.

Hi Teitbite,

The Facebook lugin is not important.

I need to put the image betwwen the introtext and the "readmore" link. But it seems that the intro text and the readmore link always go together.

Can you help me?

Thank you and reagrds,

Hai

Hi

I cannot even see a readmore link on Your pages, so I will not be able to help with that I'm afraid. Anyway since You've already been trying and figured out that read more is a part of an intro text than there may be no way to separate it.

Thank you Teitbite,

Maybe I have to let it be.

That looks so so now.

Yours sincerely,

Hai

Hi

Ok, sorry, but I really do not know how to separate it. It's included in one variable by joomla itself, so to split it I would need to come up with some custom code. Unfortunately this would be beyond our support.

Hi Teitbite,

The display is good enough, so let it be.

Thank you for your kind support.

Hai

Hi

Ok. Sorry I could not solve the last thing. I'm closing this thread now. If You will have some other problems please create a new thread.