We’ve been getting requests for the ability to put small images into paragraphs since the early days of PagePlay. We’ve always prioritised new features on a how-much-it-hurts basis, it was a no-brainer to include the feature into our recent 24 days of PagePlay.

Here is a little about how we went from just the idea to a fully fledged features on the live system…

New features always start with a discussion between myself and Chris to see if we’re both thinking along the same lines. He usually sees it from the user’s point of view, and me from the complexity of development point of view. We thrash out what the user actually needs in the first version of a feature. I usually try and keep it to the bare minimum of functionality, while Chris likes to really wow with our new releases.

For the first version of ‘image in paragraph’ we decided on a choice of existing or new image and the ability to remove it. That means no choice about which side of the page it shows (we default to right) which is currently decided as part of your sites design and no choices about whether its a link (it opens the content size in a lightbox on click).

Next, Chris usually comes up with some sketches, and there was no difference here…

This is the new paragraph edit overview. It shows the new photo button which optionally allows adding of a photo to a paragraph.

This sketch was the original plan for how to select where to get the image from. It changed during development and then agreed in it’s final form which takes up less space.

If you upload a new photo then you need to give the photo a title and alternative.

This sketch shows the idea for select existing. Again it’s slightly changed. We didn’t need confirm after all and we kept the position and text for the cancel button from previous stages.

When you edit a paragraph with an image attached your only option is to remove it. That then allows you to add a new one!

Once we have a working version of the feature, I test it locally on my own computer to make sure it works as expected. I then upload it to a development server we use to allow internal testing and bug reporting.

Once everyone in the team is happy the new feature works how we agreed and it’s been tested across various internet browsers we then upload it to the live server so it’s available to all our PagePlay users.

At this point we then let the world know by emailing our users and announcing it on Facebook and Twitter.