K2: Align text with Images

When your Joomla! website is all about ‘content’, K2 might be the component for you.  It adds a lot of extra possibilities for displaying your content, plus a ton of extra features. 
But that’s not the point of this post.  With this post, we want to learn those of you already using K2 a new ‘trick’. 

When you’re using K2 and use their ‘image’ option, those images will be centered, above your text.  If you want to do something about that, follow our guide!  We’ll help you to align your text to the left (or the right) of your image. THis allows you to create that ‘look’ you’re after.  In this lesson, we’ll be focusing on achieving this for the CATEGORY VIEW.   

How to get it done

  • Find the following file on your server, and open it: Components > com_K2 > templates > default > category_item.php

  • If you’ve opened the file with your favorite text editor, find the following line:  <!- -Item Image – – >.  Once you’ve found this line, find the following code, and then DELETE it: 
    <div class=”clr”></div>

That’s just your first step. Don’t forget to save your changes!   Next, you’ve got to open the K2.css file, located in components > com_k2 > css > k2.css

  • Find ‘span.catitemimage’ and add either one of the following attributes:
    • float: left (When you want the image to be aligned to the left)
    • float: right (When you want the image aligned to the right)
  • find ‘div.catimageblock {padding: 8px 0 0 16px 0 } and replace the ‘16px’ with 0

 

You’re now done!  When in ‘Category View’ your images will now be aligned next to your text!  Of course, the same can be achieved with images in items.  We’ll discuss that next week. 

14 thoughts on “K2: Align text with Images”

  1. I fixed it…

    I used this code:

    div.itemImageBlock {float:left;padding:8px;margin:0 0 -10px 0;}
    span.itemImage {display:block;text-align:left;margin:0 0 8px 0;}
    span.itemImage img {border:1px solid #ccc;padding:8px;}
    span.itemImageCaption {color:#666;float:left;display:block;font-size:11px;}
    span.itemImageCredits {color:#999;float:right;display:block;font-style:italic;font-size:11px;}

    added float: left in the first rule
    changed text align in ‘left’in the second rule

  2. I used the code to align the image to the left and text to the right. It works well but I found my Social sharing icon are not diplayed. Can you assist me with that??

  3. Got it, same deal different files/lines, I was being lazy not to ‘inspect’.
    item.php

  4. What if I don’t use the category view. How to do it then? I want to align the article header right next to the article body. Is this possible?

  5. Tried this with the latest version of k2 but the first two file edits I can’t find. Please help.

  6. You said You’re now done! When in ‘Category View’ your images will now be aligned next to your text! Of course, the same can be achieved with images in items. We’ll discuss that next week.

    Where is this post? I can’t find it.

    1. Brad,

      There’s a chance I ended up not writing it. Updates on Joomla & More can be a bit unpredictable.

      If you want, I can see if I find some time to write about it later this week? Let me know. 🙂

Comments are closed.

Discover more from PowerUser Guide

Subscribe now to keep reading and get access to the full archive.

Continue reading