related Items in k2 with Images

Dear Team,

Thanks for your help as always

We want to show on each article related k2 Items, recommendation with images, in horizontal mode,
I already set parameter in option to show images but images still now showing.
Can we set next prev button for more recommendations exactly like slider ?

thanks

Hi,
please go to /html and change com_k2 folder name for a moment. Then please check if you are able to see images and let me know.

Dear Konard

Thanks for your reply, i tried to change foleder name, related articles was showing with images, but layout was messed up by changing name can you tell me in code where i have to add some lines to keep layout.
With next prev buttons solution.

Thanks

Please name this folder com_k2 again and then please edit html/com_k2/templates/default.item.php and find:

Code: Select all

<ul>
                           <?php foreach($this->relatedItems as $key=>$item): ?>
                           <li class="<?php echo ($key%2) ? "odd" : "even"; ?>"> <a class="itemRelTitle" href="<?php echo $item->link ?>"><?php echo $item->title; ?></a> </li>
                           <?php endforeach; ?>
                  </ul>


change it to this:

Code: Select all

<ul>
                           <?php foreach($this->relatedItems as $key=>$item): ?>
                           <li class="<?php echo ($key%2) ? "odd" : "even"; ?>">
<?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; ?>
<a class="itemRelTitle" href="<?php echo $item->link ?>"><?php echo $item->title; ?></a> </li>
                           <?php endforeach; ?>
                  </ul>


Dear Konrad

Thanks for your help, Its works fine but i have to show linear display with limited words in title box not full title, similar like below images

I added code into override CSS but its not working.

Code: Select all

#k2Container .itemRelated {width: 100%}
#k2Container .itemRelated li {display: table-cell; background-image:none!important;}

Please give me url to page with this issue.

Thanks for quick Reply, Just sent you PM. Thanks

Please give me url to page with this issue.

Hi

Thanks for you help, Have you got my PM.

Thanks

Please try this add this code to the override.css

Code: Select all

.itemAuthorContent ul li {
    display: inline;
    float: left;
    padding: 5px 10px 5px 0;
    width: auto;
}
.itemAuthorContent li .itemRelImg {
    display:block;
}
.itemAuthorContent li .itemRelTitle {
    display: block;
    width: 200px;
}


Thanks Konard,

Thanks Alot, Have a great day

Dear Team,

your tips to achieve this goal were awesome.
Do we have any chance to make the related article image linkable?

Should be nice, so the user can reach the article just tapping the image,

I'd really appreciate some tips of code for that,

Thanks in advance