Adding inline pictures with popups using BBCodes / Pageavatar / Fancybox

Using HTML parser with elRTE / elFinder is cool. BBCodes, however, remain simple yet powerful tool that can be used not only to maintain full control over the text markup. It enables an easy way to embed pictures into the page main text (PAGE_TEXT). This is how you do it:

1. Install Fancybox (see how)
2. Install Pagemavatar
3. Configure picture upload:

   somecat|datas/photos|s_-200-200-crop|0||

4. Go for BBCodes list and add a new one name inline:

   \[inline=(\d+),(\d+),(.+?),(.+?)\]
   <a href="datas/photos/page_$1_$2.jpg" class="fancybox" title="$3"><img src="datas/photos/s_page_$1_$2.jpg" alt="$3" class="inline col$4" /></a>

5. Add / check styles for .colleft / .colright / .inline classes
6. In the page text insert pictures using following tags:

   [inline=23,1,This is alt text for the picture and title for the link,right]

   Parameters: page ID (you can use pictures uploaded for other pages too), picture number, alt text, float direction (left or right)