menu Home
Sans News

A Picture is worth a 1000 Words

pjm747 | May 7, 2012

So, you want to easily add pictures to your portfolio, blog posts or pages? No problemo! Simply upload your image, select the alignment, optionally add a caption and insert exactly where the picture should appear. Were you expecting something complicated?

Image Alignments

Image Aligned Right

149muhS
Sometimes you may want to align your image to right of your text. As you can see, from this example, this is easily achieved in WordPress by simply selecting the desired alignment in the image settings modal window.
The trick is to make sure the images scale, with the content. On smaller devices, with javascript enabled, the floating image will scale down, proportionately to fit within the device’s viewport. If the end user does not have javascript enabled, the images will not scale down but will retain the floating and proportional margin values.
154Mzza

Image Aligned Left & Aligned None

Here is an example of an image floating to the left of the content. As you can see, the image will also proportionately resize itself according the viewport. Until we can find a CSS only technique to achieve this effect, jQuery is our best option.
A good rule of thumb, right now, is to determine if floating the images in your posts and pages are integral to the functionality of your website. If not, you will most likely want to apply no alignment at all, as evidenced below.
Greene Affair 2010 by We Are Pixel8

Image Aligned Center

You can also center align your images. Unlike floating images, CSS will automatically take care of proportionately resizing our images to fit the browser’s viewport.
15hzwjF

Images with Captions

You can also add captions to your images with Sans.

This is the new home office of Design Crumbs.

This is the new home office of Design Crumbs.


Please note that you will not be able to float images with captions.

Image Galleries

Last, but not least. You will be able to add a gallery of images, using the default WordPress gallery shortcode, to any of your posts, pages or portfolio items. Each linked item will open in a lightbox overlay using Fancybox 2.

Written by pjm747

Comments

This post currently has no comments.

Leave a Reply





  • cover play_circle_filled

    01. Blue Sky
    David Militello

    .99
  • cover play_circle_filled

    02. Thank You For Everything
    David Militello

    .99
  • cover play_circle_filled

    03. If I Can, You Can
    David Militello

    .99
  • cover play_circle_filled

    04. Mommy & Daddy
    David Militello

    .99
  • cover play_circle_filled

    05. Tell Her Heart
    David Militello

    0.99
  • cover play_circle_filled

    PDCST 08 – mp3
    Kenny Bass

play_arrow skip_previous skip_next volume_down
playlist_play
%d bloggers like this: