Skip directly to search Skip directly to A to Z list Skip directly to navigation Skip directly to page options Skip directly to site content

Images in "Photo Box" Style

How to Build These Modules

When you insert an image into a page or module, you must select an Image Type in the image Settings form. The Image Type specifies how you want to use the image:

The examples on this page are all inserted with the Image Type set to “Photo Box Style.”

As for appearance, a key distinction is based on the field “Include Title” in the image Settings form.  The top image on the right includes the title; the image immediately below it does not.

Note that the first two images were inserted directly into Visual Composer.  Column widths effectively constrain the image widths.

The final image in the last row was created in a text-box module and the Alignment option in image Settings was set to “Float Left” with a width of 6 (grid columns) so that the text wraps the image. The “More” button URL was removed because the text box has a “More” button.  For aesthetics, the CSS class “margin-right-twenty” was added to the image in the image Settings form.

Photo Box Image Medium

LOREM IPSUM

This image includes both a caption and a title. The option "Include Title" is checked in the image Settings form.

More


Photo Box Image Small

For this example, "Include Title" in the image Settings form is not checked. The photo box therefore includes a caption but no title.

More

Floating Photo Box

Photo Box Image Medium

The Alignment for this image in the Settings form is set to "Float Left" with a width of 6 (grid columns). This causes the text to essentially wrap the image. For aesthetics, the CSS class "margin-right-twenty" was added in Additional CSS Classes. The "More" link is not used because the text-box module has a "More" link.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

More

TOP