4

I published an article on the Cooking.stackexchange blog yesterday. I shot all photographs in a standard 3:2 side ratio, but when I inserted them whole, I didn't like the appearance. I asked for help in the Graphic design chat room, and Pankeej gave me a great idea: to cut out interesting parts of the images in a size which looks good when inserted into the post (650x200px) and link them to the standard versions (650x430px). I did this, and the blog post looks good now, but I was afraid that nobody will notice that the images link to bigger versions. I asked a friend whom I had sent the link, and he admitted that he didn't notice at all that there may be links to bigger images, despite the fact that his cursor gets changed onhover.

To make the matter even more problematic, there are other pictures in the post which don't link to anything, because they are already embedded in their largest size. Also, there is one picture which is visually different from the others, because it has a caption, and Wordpress adds a whole box around the picture for the caption.

How can I get readers to notice that they can click on some of the pictures for a larger version? I like the way the pictures appear now in the post, and I don't want to change their appearance drastically, e.g. by adding a thick border or something similar. Also, this is hosted on a WordPress instance administered by Stackexchange, and I can't install more plugins or similar. I must be able to solve the problem with simple HTML, or image editing.

This is how the article looks like:

enter image description here

This is what the reader sees after clicking on the wide blackberry image.

enter image description here

Improve this question
1
  • 1
    A simple dropshadow can indicate something is clickable sometimes
    – Zelda
    Commented Jul 19, 2012 at 15:28

4 Answers 4

Reset to default
3

If consistent throughout your site, how about a clickable plus icon (sample below), distinct from the photo content itself, in the lower-right of each image that can be enlarged.

plus icon sample

Improve this answer
3
  • 4
    or a magnifying glass icon ...
    – kmonsoor
    Commented Dec 22, 2012 at 18:16
  • 1
    Yeh it feels like maybe you are 'adding' to cart or something, magnifying glass in this circular form would be better
    – slawrence10
    Commented Dec 22, 2012 at 21:03
  • 1
    Also, make it translucent. A big shiny orange button is bound to clash with at least a few images.
    – Joe Z.
    Commented Dec 22, 2012 at 21:43
2

Add a little caption inside the picture indicating that it can be expanded or a magnifying glass or both, "eg. Click for full size".

Can you add inline css? A similar thing to this might be possible too.

Improve this answer
2

Your best bet is to look at standardized patterns for the same or similar media. Video content for example, usually carries an icon indicating the content can be expanded - and these differ only slightly from player to player.

The user has already been trained to recognise the icons meaning, so whilst using it on images may be less common, it will trigger the same emotions from the user.

Here's an example icon:

enter image description here

Improve this answer
1
  • I agree with kmonsoor's recommendation: Use a magnifying glass icon. That icon looks too similar to the "drag" icon used in image editors, though it is rotated 45 degrees. In my experience, a "full screen" icon usually has a rectangle in its center, if that is what you were going for. Though a full screen icon isn't really appropriate in this case.
    – Brian
    Commented Dec 24, 2012 at 16:18
0

In the past (before the touch UIs) simply making the image a link to it's larger version, and the pointer change that indicated it, was enough.

But with touch UIs there's no pointer to change to indicate it's clickable, and an accidental click could be expensive in terms of downloading times. What I do now is simply put links that say "Larger image" or "Full size image" at the end of the caption (or as the caption if there otherwise is none).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.