Full Article Image In Full Page Width In Boxed Layout Of 1200px

[ManyBooks]

Hello,

in a boxed page template (max. width of article content 1200px) I would like to have the full article image of the Joomla article always in full page width (only the full article image not the content).

How can I achieve this?

• Can I overwrite the max. width of only the article image (not the content)?

• Or if I set the entire content to full page width can I limit everything but the image back to max. 1200px (template is based on Bootstrap 4)?

• Or maybe the best way: place the full image of the articles in a separate html module?
  I would place a module in the template that by default displays the full image (not intro image) of the article that is shown. So I'm looking for the lines of code that, I guess, by using the right variables, produce the individual image of every article. Please help me with what I have to write in the blank Joomla html module.
  I'm not so php savvy that I can read the exact necessary code line out of the core Joomla files.

I'm looking forward to any suggestions.

Thanks.

[KianWilliam]

There are quite different ways to do that, you may go to article, open it, click toggle to view code and <img style="width:100%; height:auto;">, also you may right click on image (in Chrome browser e.g), click inspect element to find its class path, then in css file you may add width and height according to your site layout.
Kian William

[ManyBooks]

Thanks for your answer.

But exactly that does not solve the problem.

The image then is 100% in width of the 1200px "box" not the full page width.

Even if it worked this way, I need a solution for this that produces the result "automatically" in the template not by editing the image in every single article.

[Per Yngve Berg]

Use the 'position' property in css.

https://www.w3schools.com/css/css_positioning.asp

[ManyBooks]

Thanks for your tip.

But the problem is not the positioning but the right php code to call up the full article image of the article of each open article.

Positioning e.g. the module, with right right code, is not a problem.

But what I wrote above:

"So I'm looking for the lines of code that, I guess, by using the right variables, produce the individual image of every article. Please help me with what I have to write in the blank Joomla html module.
I'm not so php savvy that I can read the exact necessary code line out of the core Joomla files."

Thanks again for taking the time.

[Per Yngve Berg]

Are you making a template for Joomla 4?

Bootstrap 4 will be included in Joomla 4. You can try the available alpha release.

Is it the Single Article layout you have problems with? If you are working with joomla 3.8, you probably already have made an override of the layout.

I had the impression that you needed the "position:absolute" to break out the Full Image of the container element.

[ManyBooks]

Hello,

the template itself is not an issue. By the way I'm using Helix 3 / Helix Ultimate from Joomshaper. I can define any position there easily.

My issue is only that I want to achieve this:

If I have e.g. a blog article and I want it to be presented so that the "big" full article image on top is displayed in full page width while the text and other content of this Joomla / blog article does not exceed the so called "boxed" layout of max. 1200px.

I could easily switch the blog article content incl. full article image altogether to full page width. But then the text would also be full page width and therefore unreadable on big screens.

The template is based on bootstrap 4 with all it's responsiveness.

My issue is only that I need a full page width starting image and a content beneath not being wider than 1200px on big screens.

My idea was to disable the image visibility in the article itself (easy per CSS) and have it displayed in an empty html Joomla module which I assign to a position in the template above the content / component area.

And it should do that "automatically" since I don't want a separate module for every single article of course.

So what I need is something like this:


<?php

// Article Image
$article = JTable::getInstance("content");
$article->load(JRequest::getInt("id")); // Get Article ID

$article_images = $article->get("images"); // Get image parameters
$pictures = json_decode($article_images); // Split the parameters apart
// Print the image
echo "<img src='/" . $pictures->{'image_intro'} . "' alt='" . $pictures->{'image_intro_alt'} . "'>";

?>


That I can put into an empty html module.

Just that the above does not work and I need someone to tell me what I'm doing wrong.

[ManyBooks]

What I need is a result that works like this:

https://www.topgear.com/car-news/big-re ... d-williams

[Per Yngve Berg]

If you have a place-holder div element for the image, you can add css that loads the full image as a background image. This can be done in the layout file.

/layouts/joomla/content/full_image.php have the code for the full image.

[SharkyKZ]

I would use a content plugin for this. Here's a basic idea:

Code: Select all

<?php

defined('_JEXEC') or die;

use \Joomla\CMS\Factory;
use \Joomla\CMS\Plugin\CMSPlugin;
use \Joomla\CMS\Uri\Uri;

class PlgContentHeaderimage extends CMSPlugin
{
	private $images;

	public function onContentPrepare($context, $article, &$params, $page = 0)
	{
		if ($context !== 'com_content.article')
		{
			return true;
		}

		$this->images = json_decode($article->images);
	}

	public function onAfterRender()
	{
		$app = Factory::getApplication();

		if ($app->isClient('administrator') || $this->images === null || empty($this->images->image_fulltext))
		{
			return true;
		}
		
		$image = '<img src="' . Uri::base(true) .'/' . htmlspecialchars($this->images->image_fulltext, ENT_QUOTES, 'UTF-8') .'"'
			. ' alt="' . htmlspecialchars($this->images->image_fulltext_alt, ENT_QUOTES, 'UTF-8') . '">';
			
		$body = $app->getBody();
		$find = '<div class="body" id="top">';
		$body = str_ireplace($find, $find . $image, $body);
		$app->setBody($body);

		return true;
	}
}

This will add fultext image after <div class="body" id="top">. You need to change this part to something that is available in your template. Also, this is a fast but not reliable way of adding HTML. Using DOM parse is more reliable but also slower:

Code: Select all

$doc = new DOMDocument;
@$doc->loadHTML($app->getBody());
$image = $doc->createElement('img');
$image->setAttribute('src', Uri::base(true) . '/' . htmlspecialchars($this->images->image_fulltext, ENT_QUOTES, 'UTF-8'));
$image->setAttribute('alt', htmlspecialchars($this->images->image_fulltext_alt, ENT_QUOTES, 'UTF-8'));
$doc->getElementById('top')->appendChild($image);
$app->setBody($doc->saveHTML());

Still, it's faster than module method (no need to load article from DB twice) and more semantic than CSS background method.

[SKAPLAU]

What I need is a result that works like this:

https://www.topgear.com/car-news/big-re ... d-williams

Man, I am just looking exactly this for weeks and several foruns but nobody seems to solve. Any help, im still stuck on this.