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.
Thanks, it works, but is it possible to place the image next to the title?
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
Hey Leonie,
Glad to see you figured it out eventually. Hope you don’t mind that I didn’t publish the other replies as well. 🙂
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??
Can you show how to align the title with the image in category view too? Thank you so much.
How with images in items?
How aabout Image aligh left in Items?
Got it, same deal different files/lines, I was being lazy not to ‘inspect’.
item.php
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?
Hey,
You can also overwrite the category view. The file to adapt should be in the folder where the item.php is located.
Tried this with the latest version of k2 but the first two file edits I can’t find. Please help.
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.
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. 🙂
I tried using this for the item view and I can not get the image to the left. Any chance any one knows how??