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

Auto-align image

Discussion in 'XenForo Questions and Support' started by Ray, Feb 16, 2011.

  1. Ray

    Ray Active Member

    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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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 likes this.
  3. Ray

    Ray Active Member

    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 :)
     
    Brett Peters likes this.

Share This Page