Create Image Boxes

You have a couple ways that you can create image boxes.

  1. Do it manually by adding in your own HTML code or Shortcode
  2. Using the Longevity Shortcode plugin that is included in your theme package

I will take you through each method, starting with the manual method. This will of course depend on if you are adding your image boxes to your page content or a text widget, so we will break this down into two sub-methods of doing this manually.

Adding Image Boxes to a Widget

On the live Demo Site, the image boxes that you see are done in a page, but this tutorial section is for adding image boxes to a text widget.

image boxes

Each one uses a Shortcode, so you will want to make sure you have the Longevity Shortcode plugin installed and activated because all the styles and layout are in this plugin and not the theme. Here is the first image box code that you can use as a template:

[longevity_imagebox size="" bgcolor="#f3f3f3" captioncolor="#000000" color="#616161" caption="Zen Lifestyle" image="http://demos.shapedpixels.com/longevity-pro/wp-content/uploads/sites/4/2015/07/imagebox1.jpg" alt="my alt" link="#" target="_self" first="true"]Maecenas posuere erat quis nisi ullamcorper pharetra. Nulla esta delore guisium ut euismod leo. Etiam quis eros dapibus. [/longevity_imagebox]

All you need to do is change the selective attributes like image path, caption, content, and the link # if you want this to link to something. The flexibility here is that you can decide what you want to show in this image box in addition to the photo.

Repeat for each widget you are setting up side-by-side, such as in the sidebar positions of Top 1, 2, 3, and 4.

NOTE You will notice the code has an empty size attribute between the double quotes. This is reserved for inserting image boxes into a page instead of a widget. The size is in reference to the responsive layout for various viewing devices. More on this later….

Adding Image Boxes to a Page

The above code is simple to use because you can copy and paste it into a text widget, but for page content, this is done a bit differently. But for this one, I recommend using the Longevity Shortcode plugin to insert the image boxes like the demo screenshot above shows.

  1. With a page open in your editor, place your cursor where you want to insert your image boxes, and then click on the “Insert Shortcode” button just above the editor.
    shortcode button
  2. Select “Image Box Row” from the drop down list. We need this container to wrap our image boxes to help with the layout and to maintain the responsiveness of our image boxes. Click the “Insert Shortcode” button.
    image box row
  3. Place your cursor between the opening and closing shortcode so that we begin adding our image boxes. In fact, make some space first with some new lines like this:
    shortcode row space
  4. Click on the “Insert Shortcode” button above the editor and then select “Image Boxes” from the list. 
  5. IMPORTANT: The first thing you need to decide and select is the size (number of image box columns). Each Image box you add, you need to repeat this step and to ensure you use the same setting for each one.
    image box columns
  6. After the size is decided, you can move on to the rest of the image box fields. When you get to the “Image Source” setting, this is the full URL path to your image, so make sure you have this available for each of your image boxes you are setting up. You can get the File URL path from your Media Library when you click to “edit” an image. Make sure you have all URL’s available that you can copy and paste into your shortcodes, because once you have the shortcode window open, you cannot leave it until you are finished.
  7. When you have your first image box setup, DO NOT INSERT IT YET. We now need to click on the “Add Image Box” button to add our next image box. Repeat this for each one. So if you want 3 image boxes, you will be setting up 3 here.
    add image box button
  8. Once done, you can now click on the “Insert Shortocde” button at the bottom of the window.
  9. Save or Publish your page.

When all is done, you should have something similar to the demo website’s shortcode:

[imagebox_row]  [longevity_imagebox size="col-sm-12 col-lg-4" image="http://demos.shapedpixels.com/longevity-pro/wp-content/uploads/sites/4/2015/07/fp2.jpg" alt="Image box 1" link="#" target="null" bgcolor="" caption="Beautiful Design" captioncolor="#000" color="#000"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem urna. Vestibulum fermentum libero ut ante consectetur dictum vitae nece. [/longevity_imagebox]

[longevity_imagebox size="col-sm-12 col-lg-4" image="http://demos.shapedpixels.com/longevity-pro/wp-content/uploads/sites/4/2015/07/fp1.jpg" alt="Image box 2" link="#" target="_self" bgcolor="" caption="Several Colour Choices" captioncolor="#000" color="#000"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem urna. Vestibulum fermentum libero ut ante consectetur dictum vitae nece. [/longevity_imagebox]
 [longevity_imagebox size="col-sm-12 col-lg-4" image="http://demos.shapedpixels.com/longevity-pro/wp-content/uploads/sites/4/2015/07/fp3.jpg" alt="Image box 3" link="#" target="_self" bgcolor="" caption="A Ton of Features" captioncolor="#000" color="#000"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem urna. Vestibulum fermentum libero ut ante consectetur dictum vitae nece. [/longevity_imagebox]  [/imagebox_row]