- Posts: 4
COMMUNITY FORUM
[SOLVED] How to wrap image and text in blog view !!!!
- justin
-
Topic Author
- Offline
- New Member
Less
More
10 years 7 months ago #124915
by justin
[SOLVED] How to wrap image and text in blog view !!!! was created by justin
First off i have looked everywhere and cant find a simple solution that works for this:
In the blog view i want the image to align to the the left (which i have accomplished) and the item title text to align to the right of the image in the neatest possible way ,
i can align the item title left,center and right but the image always stays below the item title
Need to item text to wrap with the image so they are neatly side by side
please keep answers nice and simple with step by step instructions as i see a lot of people having similar issues
work your magic, thanks :)
In the blog view i want the image to align to the the left (which i have accomplished) and the item title text to align to the right of the image in the neatest possible way ,
i can align the item title left,center and right but the image always stays below the item title
Need to item text to wrap with the image so they are neatly side by side
please keep answers nice and simple with step by step instructions as i see a lot of people having similar issues
work your magic, thanks :)
Please Log in or Create an account to join the conversation.
- Yiota
-
- Visitor
10 years 7 months ago #124916
by Yiota
Replied by Yiota on topic Re: How to wrap image and text in blog view !!!!
You will have to make a small change in the category_item.php file in order for the title block to load after the image block so it can be floated on the right along with the text.
First you need to create K2 template override. Read here getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates how they work if you do not use already.
Then you need to open category_item.php file and locate the image block of code
then you need to move it right before the <div class="catItemHeader"> class.
The next step is to just float the catItemImageBlock on the left in your template's css file and all the rest will wrap to the image. Make sure that between the catItemHeader block of code and the catItemIntrotext block of code there is no <div class="clr"></div>
First you need to create K2 template override. Read here getk2.org/documentation/tutorials/174-templating-with-k2-and-the-concepts-of-sub-templates how they work if you do not use already.
Then you need to open category_item.php file and locate the image block of code
<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<?php endif; ?>then you need to move it right before the <div class="catItemHeader"> class.
The next step is to just float the catItemImageBlock on the left in your template's css file and all the rest will wrap to the image. Make sure that between the catItemHeader block of code and the catItemIntrotext block of code there is no <div class="clr"></div>
Please Log in or Create an account to join the conversation.
- justin
-
- Offline
- New Member
Less
More
- Posts: 4
10 years 7 months ago #124917
by justin
Replied by justin on topic Re: How to wrap image and text in blog view !!!!
Thanks for your reply and help just a few questions:
"move it right before the <div class="catItemHeader"> class. "
does this mean place the image block of code just before <div class="catItemHeader"> class. ?
"The next step is to just float the catItemImageBlock on the left in your template's css file and all the rest will wrap to the image. Make sure that between the catItemHeader block of code and the catItemIntrotext block of code there is no <div class="clr"></div>"
could you please explain how to float the catitemimageBlock on the left in your templates css file, newbie to code side of things, thnsk
"move it right before the <div class="catItemHeader"> class. "
does this mean place the image block of code just before <div class="catItemHeader"> class. ?
"The next step is to just float the catItemImageBlock on the left in your template's css file and all the rest will wrap to the image. Make sure that between the catItemHeader block of code and the catItemIntrotext block of code there is no <div class="clr"></div>"
could you please explain how to float the catitemimageBlock on the left in your templates css file, newbie to code side of things, thnsk
Please Log in or Create an account to join the conversation.
- Yiota
-
- Visitor
10 years 7 months ago #124918
by Yiota
Replied by Yiota on topic Re: How to wrap image and text in blog view !!!!
For your first question that is exactly what I mean. Move it right above the <div class="catItemHeader"> not after. We need the image block to be the first block of code in the file after the outer container opens.
You need to add .catItemImageBlock {float:left; margin:0 20px 15px 0;} for example in your template's css file. If you are using the k2.css file (you see it somewhere in this path templates/your_template/css/) just locate the catItemImageBlock class and add the float:left;
You need to add .catItemImageBlock {float:left; margin:0 20px 15px 0;} for example in your template's css file. If you are using the k2.css file (you see it somewhere in this path templates/your_template/css/) just locate the catItemImageBlock class and add the float:left;
Please Log in or Create an account to join the conversation.
- justin
-
- Offline
- New Member
Less
More
- Posts: 4
10 years 7 months ago #124919
by justin
Replied by justin on topic Re: How to wrap image and text in blog view !!!!
Thanks your a star worked perfectly, much appreciated ! :)
Please Log in or Create an account to join the conversation.