m2oPaginator

Welcome to phpPaginator, a PHP script that will help you insert images into your article/blog/story. The images are taken from one or more Picasa albums (possibly other sources or methods in the future).

phpPaginator was specifically designed to let you insert images without the need to take your hands off the keyboard or upload anything that isn't already on the web. If you have lots of Picasa albums and you don't want to upload each image again each time you want to insert a picture in your blog or article, this tool may be for you. If on the other hand you prefer using your mouse to drag and drop images into your article you should probably look elsewhere.

Picasa already offers an "embed" functionality that can be found next to each photo while you browse through them. It lets you choose the size of the embedded image and whether you want to include a link to the same image in the album it belongs to. I didn't want to use this feature (if someone clicks on it he might then as well keep looking at that album instead of reading my story) and at the same time I did not want to repeat the tedious step of copy and paste for each image. What phpPaginator does is basically automate that task. It also offers some additional "feature" such as automatic numbering of image throughout the text, so that you can refer to an image with e.g. [4] and the same [4] will appear next to the image at the end of the current paragraph.

phpPaginator will scan your text and insert images whenever it finds a pattern like the following:

[!1.32:here is a caption which will appear underneath the image]

Images will be inserted at the end of the current paragraph, that is after the  tag is found. You can have phpPaginator to automatically insert  tags by setting the option addpars=1 (see below). Other options can be set in the initial part of your text, and have to be contained within the tags  in order for phpPaginator to read them.

Example code

What you input will then look like the following:

(copy and paste this below to preview the result)

Here I am, writing my story. I now want to insert this [!1.1:This is the first image in the first album] and continue with my paragraph. I now start a second paragraph, the image has been inserted above and automatically numbered. If I don't want to display the number I will do like this [!1.2#nonumber:This is the second image in the first album, I don't want it to be numbered]. This time I don't want the caption [!1.3#nocaption:Even if I insert the caption here it will not be displayed]. What if I don't want the image to be clickable? In this case I have to use this option [!1.4#nolink:This is my fourth image but it is displayed as third because one of the previous ones has no number].

You can then modify the options directly in the text or generate the settings using the following guide.

Set the parameters

Here you paste the address(es) of your Picasa album(s), it should look something like:

http://picasaweb.google.com/your-username/AlbumName

Album 1 URL
Album 2 URL

By default images inserted in your text are clickable and have the size you choose here, clicking on an image causes that image to be displayed full page with the size you choose for link size.

The sizes you can choose from are those allowed by Picasa, I usually upload pictures which are 1600 pixels in size (long side) and I have the following sizes available: 144, 400, 800, 1600. You can check this by opening any photo in Picasa and look to the right where it says "embed this photo". If you would like to try and use a different size you can edit directly in the text, if the image is not displayed it might be that the size is not provided by Picasa.

Default image size (size of images within the text)

Default link size (size of images when clicked on)

Automatically add paragraphs (changes new lines into ... tags)

Input text

Here you input your "source text" containing your story/article and the "code" to insert images. After clicking the processing button you will have the HTML in the box below, as well as a preview of how the page/article will look like.

What to do:

Set the parameters above and press "Generate" button (or copy and paste example code from the textbox above)

Paste your text after the --> or modify the existing one (remember not to include  if "Automatically add paragraphs" is enabled or remember to do so if it is disabled)

Press the "Start processing" button and see the resulting code in the textbox below, as well as a preview of the result

Processed HTML code

You can copy this and paste it into your blog/article (make sure you do so in HTML mode).

(Scroll down for a preview)

Have a comment? Please leave it here.

m2oPaginator

Example code

Set the parameters

Input text

Processed HTML code

Preview