(NG33) Image Align

[Nuclear General]

File Name: (NG33) Image Align

File Submitter: Nuclear General

File Submitted: 25 Oct 2012

File Category: User and Social Engagement

Tiberium Studios is Proud To Announce The Release Of (NG33) Image Align BBCode v2.0.0!

This BBCode Allows You To Properly Add Image Align Codes Multiple Times In A Single Post.

Images Can Be Aligned Left, & Right.

The Image Can Even Have A URL Attached To It. To Have No URL, Please A Pound Symbol (#) Inside The 'link_url' Section.

For Support, Please Visit The Support Topic.

Release Notes

[*]First Initial Release Of Modification v1.0.0

Features Available Option To Set Image As A Link. Option To Set Image URL. Option To Set Align.
New Features Available Added Option To Set Style Of Image Using style="" Tag. Added Option To Set Class Of Image Using class="" Tag. Added Option To Use Lightbox For The Image. Added Option To Set Ability For Links To Open In Same Window Or A New Window/Tab.
Fixed Issue When Assigning The LightBox Feature.
Improved Updated to work with IP.Board 3.3.4.

Fixed

• Took out Image URL. Image now just opens lightbox and not a new window/tab. It was causing issues.
  
• Top. Bottom & Middle Align Codes.
  
  

Product Listing



Terms And Conditions

[url= here to download this file

[*]Second Initial Release Of Modification v1.1.0 [*]Third Initial Release Of Modification v1.1.1 [*]Fourth Initial Release Of Modification v2.0.0 [*]Removed Pricing The Purchase Price is $5 USD. To purchase (NG33) Image Align, please click on this link: . Then click on the "Add to Cart" button. Terms And Conditions Before Purchasing, please be sure to read the fully. Important Information READ THIS BEFORE YOU PURCHASE. Anyone who fails to comply with the Terms & Conditions Will Be Warned And Be Temporarily Banned.

[peleh]

If I hit topic preview twice, or edit the post, the bbcode breaks.

Also, there are redundancies on the installation instruction.

[bynot]

Top and bottom alignment seems to have no effect.

If you could show me an example of doing a top or bottom alignment to see if I am missing something

[Nuclear General]

I have tried over and over myself for top and bottom to get them to work, but they just won't anymore. I am guessing it is because those have no effect on modern browsers anymore. They worked back in 2009 when I originally developed this mod. So that is why I put a strike-through through those in the Downloads System.

If I hit topic preview twice, or edit the post, the bbcode breaks.

Also, there are redundancies on the installation instruction.

To fix that, you may need to remove the URL bbcode that parses inside my bbcode for the image you link to. It parses the URL bbcode when you are in RTE when you go to edit a post. That's the only downside to having a custom bbcode. There is now way around that. :smile:

[bynot]

Ok waste of a download for me as thats what I needed it for.

Will have to try and find another way for my layouts in topics.

[peleh]

Ok waste of a download for me as thats what I needed it for.

Will have to try and find another way for my layouts in topics.

Just a bit of offtopic, sorry author.

You can try to put a div inside the bbcode, so you can deal with the CSS later, like this:

[caption]<div class='outer'>
<p>Hello World</p>
</div>


You can actually create the same effect of this mod, using different bbcode for each purpose, like:

Custom BBCode Example: 

<div class='outer'>[img*] your image and img* tag with it[/img*]</div>

 
Custom BBCode Tag:left 
Custom BBCode Replacement:<pre class='left' style='float:left; margin:4px;'>{content}</pre> 
Enter 'content' dialogue text:[img*]image address[/img*]

as a result:
Here the same principle but with align right:
remove the * from img code.

[Nuclear General]

For anyone who needs to use the align="" tag that I included with the mod, currently HTML5 does not support it, but you can use the style="" tag instead. The style tag uses plain CSS coding as if you were adding it directly to an image or link. For more info, please visit this link at W3Schools.com: http://www.w3schools.com/tags/att_img_align.asp

Hope this helps. :smile:

[bynot]

What I am really trying to accomplish is something like the attachment I am not worried about the border. The images are BBCodes so they need to be aligned as we have a lot of image sets on our forum so this is important and I have tried this mod and a few other but nothing has accomplished this as tables are not installed on the cke in IPB like they are in VB.

I know this is a support topic for this mod but really hoping one of you guys maybe able to point me in the right direction.

Thanks.

I really don't want to allow html if possible

[Nuclear General]

For something such as your attachment, I can possibly create a bbcode that can allow you to use table tags. It will be a very simple bbcode to use, but will need about 6 to accomplish it. One for each table tag, e.g. [table={option}] = <table {option="cellpadding='' cellspacing='' border=''"}>, [*/table*] = </table> Thats a basic way of setting it up, you can even try to create it yourself if you'd like, or I can still try to do it if you'd like. Either way, this would still be a must for a lot members who want tables on their boards.

-Don :smile:

[bynot]

If you could I would be happy to pay for this. It is real import that I be able to accomplish the above.

The download button I have in the image above is a bbcode that add the button when every a link to a file is placed inside the bbcode and the image is a bbcode (IHost) to a larger picture.

[Eric Allione]

Also, there are redundancies on the installation instruction.

I am really confused trying to install this. Here are the installation instructions:

Step 1: Upload Files Upload the contents of the "Upload" folder to your forums root directory, making sure to keep the folder structure intact. If you have multiple skin sets installed, besure to upload the public/style_images/skin_dir/rte_icons to every skin set. Step 2: Upload Files Please upload all the contents of the "Upload" folder to your site VIA FTP, making sure to keep the directory structure intact. If you have renamed your Default "admin" folder, please rename the "admin" folder inside the "Upload" folder to your admin folders name. It doesn't mention anything about the hook, but when I went ahead and installed the hook anyway, everything on it was blank: " alt="blankHook_zps9900cdea.png">" alt="blankHook2_zpscec8c03e.png">

So I tried using the exact example you provided in the installation instructions (even though they were too complicated for me to understand) and I just got exactly what I typed in my post:

" alt="blankHook3_zpsf07f653f.png">

So I interpret that, on top of the fact that there are no new options in the rich editor that I messed something up in the install. Anyway, what confuses me the most is the way that the hook unzipped itself. There is a folder called "Files" and it has a ton of information in it (including javascript and css) but I don't know where to put this stuff:

Inside that folder:

[Eric Allione]

I am sorry... IPB 3.4 beta2 killed all of my spoiler tags when I toggled BB code. And now I can't edit it because of their 2 hour edit rule. I will ask a moderator to respoiler that.

Anyway I was thinking that maybe I was supposed to upload that .xml file to BBcode instead of "installing a hook". But that still doesn't explain what to do with the file folder.

[Nuclear General]

The Files folder is only used for the ReadMe.html file. Only thing you need to upload is the admin/sources/classes/bbcode/custom/ and public/style_extra/bbcode_icons.

As for the .xml file itself; you don't install it as a hook. You import it through your BBCode Management page at ACP -> Look & Feel -> BBCode Management, at the bottom of the page is a section called "Import New BBCodes".

Also, sorry for a late reply. I didn't get a notification stating there was a new reply to this topic. Or I might have missed it somewhere.

ReadMe File States:

BBCode Example
[img_align img='files/screenshots/screenshot1.png' group='Used To Group Images Together' align='left or right' class='bbc_img' style='Your-CSS-Style-For-This-Image---border: 0; width: 150px; height: 100px;']Content To Wrap Around Image.[/img_align]

Step 1: Upload Files
Please upload all the contents of the "Upload" folder to your site VIA FTP, making sure to keep the directory structure intact. If you have renamed your Default "admin" folder, please rename the "admin" folder inside the "Upload" folder to your admin folders name. 

                  admin -> /admin/
                  public -> /public/

Step 2: Import the BBCode File
Log in to your IP.Board Admin CP and visit the Look & Feel tab -> Post Content -> BBCode Management page. In the 'Import New BBCodes' section, browse to the XML file included with these instructions and click Open.

Step 3: ACP Setup
Still inside the Admin CP, visit the Look & Feel tab -> Post Content -> BBCode Management page, browse to the BBCode titled "(NG33) Image Align". Click on the Dropdown Arrow button, and click on the edit bbcode link to adjust the settings for this bbcode, then click the "Edit BBCode..." button.

[Eric Allione]

I installed this as BB code but I still can't get this to work.

Your example on the read-me is very complicated and I can't seem to get this to do something simple such as merely aligning the picture to the right.

I try this and I just get a broken image:

[img_align img='http://www.worldthou...ry_1_4_1783.jpg' align='right']
Text that I would wrap here.
[/img_align]

[Nuclear General]

Replied to your pm. :smile:

-Don :smile:

[Eric Allione]

This is working now if I type in all the parameters and not just "align" only.

example:

[img_align img='http://www.tiberiumstudios.net/Files/Images/banner_397.jpg' group='' align='right' class='' style='']
Text to wrap
[/img_align]

Thanks! upped your hook rating to 5 stars.

[Eric Allione]

Thanks a lot for the help. Can you please provide an example of how I might style a slight border or add some padding? If I use left-align then the text is right up against the picture.

I tried a few things like this:

[img_align img='http://www.tiberiumstudios.net/Files/Images/Banners/hostgator_banner_468x68.gif' group='Banner2' align='right' class='bbc_img' style='border: 0px']

PS. One apparent weakness of this (which is still manageable) is that if you edit a post that the links will break because IPB converts the image url into a hyperlink (which then needs to be replaced with a plain text url).

[Nuclear General]

Thanks a lot for the help. Can you please provide an example of how I might style a slight border or add some padding? If I use left-align then the text is right up against the picture.

I tried a few things like this:

[img_align img='http://www.tiberiumstudios.net/Files/Images/Banners/hostgator_banner_468x68.gif' group='Banner2' align='right' class='bbc_img' style='border: 0px']

PS. One apparent weakness of this (which is still manageable) is that if you edit a post that the links will break because IPB converts the image url into a hyperlink (which then needs to be replaced with a plain text url).

Yes, that is one thing I cannot fix in the mod. You'll just need to replace the converted url back to it's plain text form. As for the padding, just use the style='' and add padding: 5px; to it. That should give it some room to space it.

-Don :smile: