• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Auto-align image

Ray

Active member
#1
I had a bbcode that auto-aligned images so users didn't have to use two bbcodes.
[CENTER][IMG]image.url[/IMG][/CENTER]

I re-created this bbcode for xf, but it doesn't work as the image url becomes a live link inside the bbcode. i.e. [bbcode]http://*****.com/image.jpg[/bbcode]

What I would like to do is add the alignment(center) code to the default IMG bbcode, so could you guys tell me where is this img code so I can modify it?

Thanks
 

Jake Bunce

XenForo moderator
Staff member
#2
What I would like to do is add the alignment(center) code to the default IMG bbcode, so could you guys tell me where is this img code so I can modify it?
I think this is it:

library/XenForo/BbCode/Formatter/Base.php

Code:
	/**
	 * String used for outputting [IMG] tags
	 *
	 * @var string
	 */
	protected $_imageTemplate = '<img src="%1$s" class="bbCodeImage%2$s" alt="[IMG]" />';
Code:
	/**
	 * Renders a img tag.
	 *
	 * @param array $tag Information about the tag reference; keys: tag, option, children
	 * @param array $rendererStates Renderer states to push down
	 *
	 * @return string Rendered tag
	 */
	public function renderTagImage(array $tag, array $rendererStates)
	{
		$url = $this->stringifyTree($tag['children']);

		$validUrl = $this->_getValidUrl($url);
		if (!$validUrl)
		{
			return $this->filterString($url, $rendererStates);
		}

		$censored = XenForo_Helper_String::censorString($validUrl);
		if ($censored != $validUrl)
		{
			return $this->filterString($url, $rendererStates);
		}

		// attempts to convert smilies posted as [IMG] tags back into smilies
		if ($rendererStates['imgToSmilie'])
		{
			foreach ($this->_smiliePaths AS $smiliePath => $smilieId)
			{
				if (strpos($url, $smiliePath) !== false && substr($url, strlen($smiliePath) * -1) == $smiliePath)
				{
					return $this->_smilieReverse[$smilieId];
				}
			}
		}

		return sprintf($this->_imageTemplate, htmlspecialchars($validUrl), ($rendererStates['lightBox'] ? ' LbImage' : ''));
	}
_____

Note that IMG tags use the bbCodeImage class. The idea occurred to me to amend this class by editing this template:

Admin CP -> Appearance -> Templates -> EXTRA.css

I added this code:

Code:
.bbCodeImage
{
	text-align: center;
}
Unfortunately this doesn't center the image like you want. I think this needs to be applied to a container element. But it's an idea you can work with.
 

Ray

Active member
#3
Thank you!
I wrapped the img tag with div align center and it seems to be working.
PHP:
protected $_imageTemplate = '<div align="center"><img src="%1$s" class="bbCodeImage%2$s" alt="[ IMG ]" /></div>';
I wonder if we could change alt="[ IMG ]" to alt="{$thread.title}" so that we can get more traffic from google images search?

Thanks again for your help :)