Reorganize property article page

1omegazip

Hi
Two questions:
1st question
Is there a way to switch the positions of the description text and the fields (under "Caractéristiques")?
That means to move the description text from below to the top right of the slide show (see picture: red 1), and move the fields ("Caractéristiques techniques") from the top right position below the slide show (see picture: red 2) like in the picture?

2nd question
Is it possible to make the fields appear in a similar way as they are shown in the picture (red 2)?

I have tried a few solutions, but couldn't get it work.
Thanks for helping!

saguaros

Hi 1omegazip

You will need to customize the property article view:

/templates/ja_property/html/com_content/article/property.php

The part under slideshow / image of article is content of article, if you want to move it, you move this snippet of code:

<section class="article-content clearfix" itemprop="articleBody">
	<?php echo $this->item->text; ?>
</section>

The part on the right side will be this:

<div class="article-sidebar col-md-4">
<div class="article-sidebar-box">
<?php if (!empty($latlong)): ?>
{jaosmap locations='{"location":{"0":"<?php echo $this->item->title; ?>"},"latitude":{"0":"<?php echo $latlong[0]; ?>"},"longitude":{"0":"<?php echo $latlong[1]; ?>"},"info":{"0":"<?php echo $this->item->title; ?>"},"icon":{"0":""}}' zoom='12' map_width='396' map_height='396'}{/jaosmap}
<?php endif; ?>
</div>
<div class="article-sidebar-box box-border">

<?php // Content is generated by content plugin event "onContentBeforeDisplay" ?>
<?php echo $this->item->event->beforeDisplayContent; ?>

<dl class="fields-container">
<dd class="field-entry r-location r-class">	
<span class="field-label l-location"><?php echo Jtext::_('TPL_LOCATION'); ?></span>
<span class="field-value">
	<?php if ($params->get('show_parent_category') && !empty($this->item->parent_slug)) : ?>
		<?php echo JLayoutHelper::render('joomla.content.info_block.parent_category_property', array('item' => $this->item, 'params' => $params, 'filterID' => $filterID)); ?>
	<?php endif; ?>

	<?php if($params->get('show_category')) :?>
  	<?php echo JLayoutHelper::render('joomla.content.info_block.category_property', array('item' => $this->item, 'params' => $params, 'filterID' => $filterID)); ?>
<?php endif;?>

</span>
</dd>
</dl>

<?php if(!empty($customs['rent-or-sale'])) :?>
<span class="tag-label label-<?php echo $customs['rent-or-sale'] ;?>"><?php echo Jtext::_('TPL_FOR').' '.$customs['rent-or-sale'] ;?></span>
<?php endif ;?>

<?php if($this->item->featured): ?>
<span class="featured-label featured-label-yes">
<i class="icon ion-ios-heart"></i>
</span>
<?php else: ?>
<span class="featured-label featured-label-no">
<i class="icon ion-ios-heart"></i>
</span>
<?php endif ;?>
</div>
</div>

Regards

1omegazip

Thank you saguaros !
I have tried a few solutions, changing the code in property.php.
Since I'm not experienced in php coding, I didn't get the result I want.
Also I'm scared to break the logic structure which is needed to use the mega filter.
Would you please help.
Also, is there a way to get a table structure after moving the fields (like in the uploaded picture in my first post)?
Thank you again!

saguaros

Hi 1omegazip I can help you to figure out where needs to be changed only. It will require more customization in style. You can hire a developer to get it done for you.

Regards

1omegazip

saguaros
You wrote me:
The part under slideshow / image of article is content of article, if you want to move it, you move this snippet of code: ...

Could please explain how and where to move both the codes? I don't know how and where to move them. When I have tried, both parts have finished in the body of the page and the slideshow disappeared. At least then I can give it a try with styling. Thank you

saguaros

Hi 1omegazip

Kindly check my first reply, you can open that file and see the code.

I explained in details of which code generates the content of article and which code does for fields on the right.

If you want to swap these 2 parts, you can swap the associated code of these 2 parts. Then customize the style as you wish.

1omegazip

Thank you saguaros
I hadn't understood how to do that. It was much easier than I thought. And sorry for insisting, but my client wants to show the description text before the feature fields ("Caractéristiques techniques").
The problem now is, under monitor width 992 it has switched, too and it shows the feature fields before the description text. Where can I change that?

saguaros

1omegazip

It would be tricky as the container of the fields section also includes the image there. If switching the position of these 2, the image will be moved:

.view-article .item-page .row {
    display: flex;
    flex-direction: column-reverse;
}

1omegazip

Thank you very much for your great help and patience saguaros !!!
I found a solution by inserting a module with an image.

However, on small screens with less than 492 width, the CSS custom code has no effect, and it still shows the feature fields before the description text.
Do you know a solution for this?

saguaros

Hi 1omegazip

As I can see that you use Media Queries for above code:

@media (min-width: 493px) and (max-width: 992px){
.view-article .item-page .row {
    display: flex;
    flex-direction: column-reverse;
}
}

This will have affect to screen size from 493px to 992px only.

If you want to apply to screen smaller than 492px also, pls change to:

@media (max-width: 992px){
.view-article .item-page .row {
    display: flex;
    flex-direction: column-reverse;
}
}

1omegazip

Thank you saguaros