Chaning "Related articles" module at bottom of K2 article

Hello guys,

how to change a module with "Related articles" and "Newest from xxxUser" at the bottom of K2 articles? I would like to put images with titles of articles, so I guess it would be more attractive and more attention attracting, than just titles listed.

Appreciate any help!

Sincerely,

Ignotus

Hi

In K2 category settings You will find option to switch on and off elements to show in this areas.

Hi.

I know there are options in Category Settings to turn on and off these modules (Related articles, Newest from xx User) at all, but I would like to make changes to these modules (putting image with title) if possible? Or just to turn them off, and put another module on their places.

So, is it possible to make changes in that modules, except turning them on and off?
And, how can I show another modules in that positions, instead of these two?

Appreciate your help!

Sincerely,

Ignotus

Hi

I meant that You can configure them what to show in this "modules", not just turn on and off entirely. But if You want to customize this parts of code that plase take a look at /html/com_k2/default/item.php

Thank you very much.

I do not know how I have missed it.

But looks like I have to do some css changes too. It is showing image at the end of title (looks very bad) and that can not be changed from backend. Can you help me with some source code showing image first, and removing numbers 1.-5.?

Thanks

Hi

Please configure all elements You want to show and tell me an url to example page. I'll give You a code to style it better.

Ok this is the example page.

http://sportskevesti.info/fudbal/mitrov ... 0-000-evra

Look at the Related articles ("Srodni članci"). I want it without numbers 1.-5., with image aligned left (with attribute float:left), and title right from the image, like on example. The same settings for Related from Super User ("Najnovije od Super User"), please.

I will appreciate it.

Thanks.

Ignotus

Hi

Ok. Once again please add this to override.css, remember that override needs to be enabled in template settings on order to use this code.

Code: Select all

.itemRelated ul li {
    list-style: none outside none;
}

.itemRelated ul li img.itemRelImg {
    float: left;
    margin-right: 5px;
}


as a next step You need to edit file in template /html/com_k2/default/item.php find the code responsible for showing image in related items around line 479:

Code: Select all

            <?php if($this->item->params->get('itemRelatedImageSize')): ?>
            <img style="width:<?php echo $item->imageWidth; ?>px;height:auto;" class="itemRelImg" src="<?php echo $item->image; ?>" alt="<?php K2HelperUtilities::cleanHtml($item->title); ?>" />
            <?php endif; ?>


cut it out and paste right above the code for title (will be first of elements in this area):

Code: Select all

            <?php if($this->item->params->get('itemRelatedTitle', 1)): ?>
            <a class="itemRelTitle" href="<?php echo $item->link ?>"><?php echo $item->title; ?></a>
            <?php endif; ?>


This should be all.

Thank you.

Almost everything is fine now.

Please just tell me how to make space between text lines in titles smaller. In attachment is image how it looks now.

Also, I would like the same settings for "Newest from xxxUser", so can you tell me which part of source code is related to this "module".

Appreciate it.

Sincerely,

Ignotus

Hi

Here is a css to affect both parts in the same time:

Code: Select all

.itemRelated ul li {
    list-style: none outside none;
    clear: both;
    line-height: 18px;
}

.itemRelated ul li img.itemRelImg {
    float: left;
    margin-right: 5px;
}


PHP code can be found in the same file as before, but there is no code for image, so let's try add it. Code starts about line 432 and looks like this:

Code: Select all

  <?php if($this->item->params->get('itemAuthorLatest') && empty($this->item->created_by_alias) && isset($this->authorLatestItems)): ?>
  <!-- Latest items from author -->
   <div class="itemAuthorLatest">
      <h3><?php echo JText::_('K2_LATEST_FROM'); ?> <?php echo $this->item->author->name; ?></h3>
      <ul>
         <?php foreach($this->authorLatestItems as $key=>$item): ?>
         <li class="<?php echo ($key%2) ? "odd" : "even"; ?>">
            <a href="<?php echo $item->link ?>"><?php echo $item->title; ?></a>
         </li>
         <?php endforeach; ?>
      </ul>
      <div class="clr"></div>
   </div>
   <?php endif; ?>


make it looks this way:

Code: Select all

  <?php if($this->item->params->get('itemAuthorLatest') && empty($this->item->created_by_alias) && isset($this->authorLatestItems)): ?>
  <!-- Latest items from author -->
   <div class="itemAuthorLatest">
      <h3><?php echo JText::_('K2_LATEST_FROM'); ?> <?php echo $this->item->author->name; ?></h3>
      <ul>
         <?php foreach($this->authorLatestItems as $key=>$item): ?>
         <li class="<?php echo ($key%2) ? "odd" : "even"; ?>">
                                <img style="width:<?php echo $item->imageWidth; ?>px;height:auto;" class="itemRelImg" src="<?php echo $item->image; ?>" alt="<?php K2HelperUtilities::cleanHtml($item->title); ?>" />
            <a href="<?php echo $item->link ?>"><?php echo $item->title; ?></a>
         </li>
         <?php endforeach; ?>
      </ul>
      <div class="clr"></div>
   </div>
   <?php endif; ?>


Hi.

This is what I get by doing as you told me. Picture is in attachment.

Everything with Related items is just fine now. I used that css code you have gave me for both .itemRelated and .itemAuthorLatest selectors.

The only problem remaining is that Latest from Author module can not call image by src="<?php echo $item->image; ?>". Also can not call image styles width and height.

I tried adding src="URL-of-image" manually and it works, but than realized that image style properties could not being called too.

I can set image width manually to be "100px" - that is not problem. Just need working way to display image related to displayed article title.

Thank you very much.

Appreciate your help.

Sincerely,

Ignotus

Hi

If this code to show images is not working than I'm afraid it's not being loaded from database for User Articles. In this case You will have to ask K2 developers because it will require changes in core K2 files.