Unless the images you add to your content are automatically placed on your page (which often isn't appropriate), adding images always seems to have been a bit of a struggle. And now, with the advent of responsive websites, is it practically impossible to show images in the right place, the right size and visible across multiple devices?

Well the good news is that with a Klixo Drupal 7 website this isn't harder, it's much easier with many added benefits (especially if you're still using Klixo's deprecated CMS). With a lot of patience, trial and error, testing and improvements, we think we've now got just about the perfect balance of ease of use and extraordinary functionality. The bad news is you've probably not got a Klixo Drupal 7 website.

So what are the challenges of adding images to your content? There are a whole bunch of them:

1. I've got the photo off my camera but I need to crop it...
2. I want the photo to be 200 pixels wide, about a quarter the width of the screen when I'm looking at it on the desktop, but what happens if my visitor is looking at the picture on a mobile phone?!
3. The picture has a lot of detail I want my customers to see but they can't see it when it's only 200 pixels wide...
4. I want all of this functionality but I don't want to study for a degree in order to do it

Image Cropping

Klixo's newest websites allow you to crop your images once you've uploaded them to the website. We set up a variety of different cropping shapes and sizes depending on what the image is going to be used for so they'll be exactly the right size for the job. Remember how hard it is to get your slideshow image the right size? Or when you've got images that need to be the same shape and size for lists or product pages?

With image cropping built in this is a breeze. Upload your image, click the crop button and you've got a nice rectangle selector you can drag around, maybe resize, maybe make a bit bigger or smaller.

For fixed aspect ratio images (like your slideshow or list image) the shape is fixed but you can scale the rectangle and move it around so you get exactly the image you're wanting in a few seconds.

Responsive Content Images

On fixed width, non-responsive websites putting images into your content wasn't such a big deal (assuming your image was already cropped and scaled to the right size). The image sat in exactly the same position at exactly the same size all the time irrespective of the device you were looking at it with. But what happens if you have a responsive website?

If we had the same static image all the time you would run into many problems. As the width of your content gets smaller the image takes up more and more space until you end up with your sentence beside it ends up with individual words across different lines making it difficult to read and appallingly presented. Go narrower still and your image is now wider than the screen and you end up with the scroll bars that are all too familiar to anyone who has used a mobile device to view a non-responsive website.

So what is the solution? The Klixo way is pretty simple. You've already uploaded and cropped your image, click the insert button next to it and it goes straight into the content. Float it left or right so it sits in with the content and you're done.

Depending on your needs we might provide a few insert options to choose from, a common insert is quarter width. Now when you view the page, the image takes up a quarter of the page. As the page narrows, so does the image. Well that's great but what about when we get down to smart phones? How can I see what the image is, it will be too small! Typically we'll then make the image full width so you can actually tell what it is and you won't get the horrid part-words beside it either, your content reads well with your beautiful images adorning it.

Better yet, if you're looking at the images on a mobile phone rather than a desktop, your site will load a smaller image meaning it will load much faster over your mobile phone's network making your visitors' experience better (and saving them bandwidth too!)

Popup Images

We've all seen websites where the little image can be clicked on and it brings up a full size image for you to see in a colorbox or lightbox. That's not always an easy task for the person setting it up, but it's not even a consequence with Klixo's implementation. You know how easy it is to put responsive images into your content, click the insert button. Well, if you want your image to pop up in a colorbox rather than just sitting there, chose 'quarter width with colorbox' instead of 'quarter width'. That's it.

If you've got multiple images in your content that you want to pop up your visitor will be able to scroll through them all too.

Easy Peasy, No Degree Necessary

Does that sound like the kind of thing you need on your website to make things easy for you? Focus on your services or products, not your CMS and sell effectively to your customers. Talk to Klixo!