switch image and text position

[MarkoJLeus]

Hello

 

I am customising a template and I would like to switch the position of text and image.
the original has the text at the left and the image at the right: http://demo.ovatheme.com/beuh/index.php/team-category/73-siong-logano
but i would like to have the picture at the left and the text (which is the title <class="small-title>, the  subtitle and the text underneath <class="team-post"> and the social media logos <li> at the right)

i gave it a shot, it didn't work out.

 

it would be great if anyone could help me with this.

here's the source code:

<?php defined('_JEXEC') or die; $ran_team = rand(); ?>

<div id="<?php echo $elementid?$elementid:"team" ?>" class="clearfix">
  <div class="container">
        <div class="row">
          <div class="team-slider" data-auto-play="8000">

                <?php foreach ($items as $key => $value) {  ?>
                    <?php
                      $extrafield = json_decode($value->extra_fields);
                      $countEx = count($extrafield);
                     ?>
                    <div class="team-inner clearfix">
                        <div class="col-md-5">
                            <div class="team-spacing"></div>
                            <h3 class="small-title"><?php echo $value->title; ?></h3>
                            <p class="team-post"><?php echo $value->image_caption; ?></p>
                            <?php echo $value->introtext; ?>
                            <div class="spacing40"></div>

                              <?php if($social){ ?>
                                <ul class="team-social">
                                    <?php for ($i = 0; $i < $countEx; $i++) {
                                        $extra = $extrafield[$i];
                                        $name_extra = $ova->getextraname($extra->id)->name;
                                        $value_extra = json_decode($ova->getextraname($extra->id)->value);
                                        $value_extra = $value_extra[0];
                                        if(trim($extra->value)){ ?>
                                           <li>
                                              <a target="_blank" href="<?php echo trim($extra->value);?>">
                                                  <i class="fa <?php echo trim($value_extra->rows);?>"></i>
                                              </a>
                                          </li>
                                      <?php } } ?>                        
                                </ul>
                              <?php } ?>

                            <div class="spacing40 clearboth"></div>
                        </div><!--/.col-md-4-->
                        
                        <div class="col-md-7">
                            <a href="<?php echo $ova->getK2link($value->id,$value->alias,$value->catid,$value->categoryalias); ?>">
                              <img alt="" src="<?php echo $ova->getImageK2($value->id,'XL'); ?>" />
                            </a>
                        </div><!--/.col-md-7-->
                    </div><!--/.team-inner-->
                <?php } ?>
            
            </div><!--/.team-slider-->
        </div><!--/.row-->
    </div><!--/.container-->
</div><!--/team-->
 

thanks in advance

[NotionCommotion]

Consider keeping the HTML intact and just using CSS (not positive it is possible, but expect it is).

[MarkoJLeus]

Consider keeping the HTML intact and just using CSS (not positive it is possible, but expect it is).

Hello thank you for the suggestion.

too bad, I'm a real rookie (not to say nincompoop).

Is it possible to reveal some more how-to?

thx

[Ch0cu3r]

Not sure but try moving

<div class="col-md-7">
                            <a href="<?php echo $ova->getK2link($value->id,$value->alias,$value->catid,$value->categoryalias); ?>">
                              <img alt="" src="<?php echo $ova->getImageK2($value->id,'XL'); ?>" />
                            </a>
                        </div><!--/.col-md-7-->

So it is before

<div class="col-md-5">

[MarkoJLeus]

 

Not sure but try moving

<div class="col-md-7">
                            <a href="<?php echo $ova->getK2link($value->id,$value->alias,$value->catid,$value->categoryalias); ?>">
                              <img alt="" src="<?php echo $ova->getImageK2($value->id,'XL'); ?>" />
                            </a>
                        </div><!--/.col-md-7-->

So it is before

<div class="col-md-5">

Hello Ch0cu3r,

 

did try that but did not work (yet)

I wonder if it's due to this stuff which was in between:

                            <div class="spacing40 clearboth"></div>
                        </div><!--/.col-md-4-->

Should I move that also, that it is between <div class="col-md-7"> and <div class="col-md-5">?

 

this is what I've got so far...

<?php
/**
 * @version		2.6.x
 * @package		K2
 * @author		JoomlaWorks http://www.joomlaworks.net
 * @copyright	Copyright (c) 2006 - 2014 JoomlaWorks Ltd. All rights reserved.
 * @license		GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */

// no direct access
defined('_JEXEC') or die;

?>


<div class="clearfix">
  <div class="container">
        <div class="row">
          <div class="team-slider" data-auto-play="8000">
                    <div class="team-inner clearfix">
                        <div class="col-md-7">
                            <?php if($this->item->params->get('itemImage') && !empty($this->item->image)): ?>
							  <!-- Item Image -->
							 		<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;" class="img-responsive" />
							<?php endif; ?>
                        </div><!--/.col-md-7-->
                      <div class="col-md-5">                            
                            <h3 class="small-title"><?php echo $this->item->title; ?></h3>
                            <p class="team-post"><?php echo $this->item->image_caption; ?></p>

                            <?php if(!empty($this->item->fulltext)): ?>
							<?php if($this->item->params->get('itemIntroText')): ?>
							
								<!-- Item introtext -->							
								<?php echo $this->item->introtext; ?>
							<?php endif; ?>
							<?php if($this->item->params->get('itemFullText')): ?>
							
								<!-- Item fulltext -->							
								<?php echo $this->item->fulltext; ?>
							
							<?php endif; ?>
							<?php else: ?>
								<!-- Item text -->							
								<?php echo $this->item->introtext; ?>							
							<?php endif; ?>

                            <div class="spacing40"></div>
                              
                            <ul class="team-social">
                        		<?php  $extrafield = json_decode($this->item->extra_fields);
                      					$countEx = count($extrafield);  ?>
                                <?php for ($i = 0; $i < $countEx; $i++) {
                                    $extra = $extrafield[$i];
                                    $name_extra = OvaData::getextraname($extra->id)->name;
                                    $value_extra = json_decode(OvaData::getextraname($extra->id)->value);
                                    $value_extra = $value_extra[0];
                                    if(trim($extra->value)){ ?>
                                       <li>
                                          <a target="_blank" href="<?php echo trim($extra->value);?>">
                                              <i class="fa <?php echo trim($value_extra->rows);?>"></i>
                                          </a>
                                      </li>
                                  <?php } } ?>                        
                            </ul>
                              

                            <div class="spacing40 clearboth"></div>
                        </div><!--/.col-md-4-->
                        
                     </div><!--/.team-inner-->
              
            
            </div><!--/.team-slider-->
        </div><!--/.row-->
    </div><!--/.container-->
</div><!--/team-->