Auto-align image

[Ray]

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]

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

	/**
	 * String used for outputting [IMG] tags
	 *
	 * @var string
	 */
	protected $_imageTemplate = '<img src="%1$s" class="bbCodeImage%2$s" alt="[IMG]" />';

	/**
	 * 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:

.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]

Thank you!
I wrapped the img tag with div align center and it seems to be working.

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