#626 – align the content of the article editor to the right of the image

 Hello,
Your image is generated in a div.

<div class="econaArticleImageBlock"><div class="econaImage">

I am currently working on doing a layout in an overload of the joomla article display

<?php echo $this->item->jcfields[18]->value; ?> <?php echo $this->item->text; ?>

This prevents me from displaying the joomla content of the article to the right of the image. How to do ?
Regards

Hi,

You can make it look as you wish using CSS. For example:

. econaArticleImageBlock, . econaImage {display:inline-block;}

If you want to change the markup you can also create a layout override for the field. Please follow the instructions at the documentation page at https://www.firecoders.com/documentation/econa#layouts under the section named "Layouts".

Regards

HI,
Thank you for your prompt response.
it doesn't does not work but there is a modal field. Does this change anything
Here is the HTML return
'div class="econaArticleImageBlock"><div class="econaImage"><a href="/images/econa/fields/18/com_content_article/49/firefox_logo_M.jpg?t=1595938820" title="Click to preview image" class="econaFieldModal"> '

I use an override of the entire article (not ... html/plg_fields_econa):
/templates/shaper_helixultimate/html/com_content/article

Regards

If you want to change the HTML output of the field you have to use also a layout for the field as described in the documentation. After you do that it's all up to you to make it look as you wish using HTML and CSS.

Regards

hello,
Ok I created an override that I placed under /templates/shaper_helixultimate/html/plg_fields_econa.
However, I don't see what I can change in this file. I'm not going to paste the joomla content field in it?
I modify the layout of all the other custom fields in the main overload of the article (but it's true that your plugin is more complicated). I can't do this with css !? I put "! Important" but that doesn't change anything.

<div class="econaImage">

<?php if($image->link): ?>
<a href="/<?php echo $image->link; ?>">
<?php elseif($image->modal) :?>
<a href="/<?php echo $image->modal; ?>" title="<?php echo JText::_('PLG_FIELDS_ECONA_CLICK_TO_PREVIEW_IMAGE'); ?>" class="econaFieldModal">
<?php endif; ?>

<img src="/<?php echo $image->src; ?>" alt="<?php echo htmlspecialchars($image->alt, ENT_QUOTES, 'UTF-8'); ?>" <?php if($image->srcset): ?> srcset="/<?php /echo /$image->srcset; /?>" <?php endif; ?> <?php if($image->srcset): ?> sizes="<?php echo $image->sizes; ?>" <?php endif; ?> />

<?php if($image->link || $image->modal): ?>
</a>
<?php endif; ?>
</div>

<?php if ($field->fieldparams->get('caption', 1) && $image->caption): ?>
<span class="econaImageCaption"><?php echo $image->caption; ?></span>
<?php endif; ?>

<?php if ($field->fieldparams->get('credits', 1) && $image->credits): ?>
<span class="econaImageCredits"><?php echo $image->credits; ?></span>
<?php endif; ?>

</div>

Is there a link to the page? This is site specific code, I cannot help without a link.

Regards

Hello
I finally have a 100% css solution since it is not native
div[itemprop="articleBody"] .econaArticleImageBlock {
float: left!important;
margin: 0 1.5em 1em 0;
}
div[id^=share]{clear: left; }
Regards

That's great. If you need help at the future please provide a link.

Regards