0

Image Advanced [dcs_img]

Shortcode dcs_img allows to insert a formatted image into content. A big list of parameters can be used for this shortcode. You can set for example a bigger image that will show up using lightbox after you click on the image, this image can be be loaded asynchronous or you can turn off this feature. Width and height parameters should be defined, especially if you want to use asynchronous loading. With this shortcode you have almost full control over the images.

If you want to insert an image that is wrapped with text, you must first place dcs_img shortcode and than insert a text paragraph. Text from this paragraph will wrap the image in the way you set the pos parameter for dcs_img (you must choose left or right value for pos parameter to create a text wrap effect).

Parameters:
pos[OPT] image position, can be set to left for float to left, to right for float to right or can be set to center. If you want to use center option, the image will be centered only if margins are not set, or if left and right margin will be set to auto value (default center)
mleft[OPT] margin left in pixels (default auto)
mright[OPT] margin right in pixels (default auto)
mtop[OPT] margin top in pixels (default zero)
mbottom[OPT] margin bottom in pixels (default 15 pixels)
margin[OPT] image margins, use formula 0px 0px 0px 0px, you can use any valid value for CSS margin property, this paramter will overwrite mleft, mright, mtop and mbottom parameters (default not set)
ligthbox[OPT] can be set to true or false, if true the value from url parameter is used as big image for ligthbox (default set to false)
url[OPT] this can be simple url to other page or url to image displayed by ligthbox (when lightbox paramter is set to true). If lightbox parameter is true and this parameters is not set, shortcode will use url from content (default empty string)
async[OPT] if true, image is loaded asynchronous, in this mode you must set width and height parameter if you want to see the preloading effect (default set to true)
width[OPT] image width in pixels (default zero)
height[OPT] image height in pixels (default zero)
thumb[OPT] if set to true image is resacaled to given width and height (default false)
title[OPT] title displayed with lightbox (default empty string)
desc[OPT] image description (default empty string)
author[OPT] image author description (default empty string)
framed[OPT] can be set to none, black, or white, if other than none value is used, thin frame is displayed around inner image (default set to none)
framedall[OPT] can be set to none, black, or white, if other than none value is used, thin frame is displayed around whole inner image and description (default set to none)
group[OPT] name for lightbox image group (default empty string)
line[OPT] if set to false image description bottom line will be not displayed (default true)
icon[OPT] auto icon displayed when mouse hover image, can be set to play or zoom (default not set)
iconurl[OPT] in this parameter you can set url to your own icon displayed when mouse hover image, if set overwrite icon parameter (default not set)
usersrc[OPT] here you can insert relative path to PNG file with extension from [theme path]/img/shortcodes/ folder, this parameter will overwrite icon and iconurl parameters (default not set)
bgcolor[OPT] loader background color, can be set to any CSS color valid value, including transparent mode (default not set)
Examples:

1. Default styled image, 600x540 pixels (author: Josh Liba)

Get Code
[dcs_img]
Image full path
[/dcs_img]

2. Changing image width and height to 300x270 pixels (author: Josh Liba)

Get Code
[dcs_img width="300" height="270" thumb="true"]
Image full path
[/dcs_img]

3. Adding black frame to image (author: Josh Liba)

Get Code
[dcs_img width="300" height="270" thumb="true" framed="black"]
Image full path
[/dcs_img]

4. Adding image author and image description (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Get Code
[dcs_img width="300" height="270" thumb="true" framed="black" 
author="author: Josh Liba" desc="Anyway, this was.."]
Image full path
[/dcs_img]

5. Framed all (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Get Code
[dcs_img width="300" height="270" thumb="true" framedall="black" 
author="author: Josh Liba" desc="Anyway, this was.."]
Image full path
[/dcs_img]

5. Framed all in white version (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Get Code
[dcs_img width="300" height="270" thumb="true" framedall="white" 
author="author: Josh Liba" desc="Anyway, this was.."]
Image full path
[/dcs_img]

6. Using lightbox (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Get Code
[dcs_img width="300" height="270" thumb="true" framed="black" 
author="author: Josh Liba" desc="Anyway, this was.." 
lightbox="true" title="The Venetian Dream - il gelato"]
Image full path
[/dcs_img]

7. Floated left (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Heading H2

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Get Code
[dcs_img width="200" height="180" thumb="true" framed="black" 
author="author: Josh Liba" desc="Anyway, this was.." 
lightbox="true" title="The Venetian Dream - il gelato"
pos="left" mright="15"]
Image full path
[/dcs_img]
<h2>Heading H2</h2> 
<p>Excepteur sint occaecat..</p>

8. Floated right (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Heading H2

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Get Code
[dcs_img width="200" height="180" thumb="true" framed="black" 
author="author: Josh Liba" desc="Anyway, this was.." 
lightbox="true" title="The Venetian Dream - il gelato"
pos="right" mleft="15"]
Image full path
[/dcs_img]
<h2>Heading H2</h2> 
<p>Excepteur sint occaecat..</p>

9. Grouping lightbox images (author: Josh Liba)

author: Josh Liba
author: Josh Liba
author: Josh Liba
Get Code
[dcs_img width="180" height="162" thumb="true" framed="black" 
author="author: Josh Liba" icon="zoom" 
lightbox="true" title="The Venetian Dream - il gelato" 
pos="left" mright="18" group="ex9"]
Image full path
[/dcs_img]

[dcs_img width="180" height="162" thumb="true" framed="black" 
author="author: Josh Liba" icon="zoom" 
lightbox="true" title="Sweet Little Treats" 
pos="left" mright="18" group="ex9"]
Image full path
[/dcs_img]

[dcs_img width="180" height="162" thumb="true" framed="black" 
author="author: Josh Liba" icon="zoom"
lightbox="true" title="Earlier = Easier" 
pos="left" group="ex9"]
Image full path
[/dcs_img]

10. Another image in lightbox (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Get Code
[dcs_img width="300" height="270" thumb="true" framed="black" 
author="author: Josh Liba" desc="Anyway, this was.." 
lightbox="true" title="The Venetian Dream - il gelato"
url="another image full url"]
Image full path
[/dcs_img]

11. Image as link to some place (author: Josh Liba)

author: Josh Liba

Anyway, this was my first Gelato of many in Italy. Oh, I can taste it now. So light, so melty... to be exclusively enjoyed in the sunlit streets of Venice.

Get Code
[dcs_img width="300" height="270" thumb="true" framed="black" 
author="author: Josh Liba" desc="Anyway, this was.." 
lightbox="false" title="The Venetian Dream - il gelato"
url="some url"]
Image full path
[/dcs_img]

12. Displaying video from Youtube

author: MentalVideoGameAddic

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Get Code
[dcs_img width="240" height="160" 
thumb="true" icon="play" framed="black" 
author="author: MentalVideoGameAddic" 
desc="Ut enim ad minim veniam.." lightbox="true" 
title="The Orange Box Commercial" 
url="http://www.youtube.com/watch?v=ecYVfuX6DbI"]
Image full path
[/dcs_img]

13. Displaying video from Vimeo

author: Matt Workman

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Get Code
[dcs_img width="240" height="160" thumb="true" icon="play" 
framed="black" author="author: Matt Workman" 
desc="Ut enim ad minim.." lightbox="true" 
title="Ubisoft Just Dance 2 Commercial" 
url="http://vimeo.com/15828628"]
Image full path
[/dcs_img]

14. Changing video size and using own play icon

author: Matt Workman

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.

Get Code
[dcs_img width="240" height="160" thumb="true" icon="play" 
usersrc="i128/firefox.png" framed="black" 
author="author: Matt Workman" 
desc="Ut enim ad minim.." lightbox="true" 
title="Ubisoft Just Dance 2 Commercial" 
url="http://vimeo.com/15828628&width=600"]
Image full path
[/dcs_img]
9.5/106votes
Voting statistics:
RatePercentageVotes
1083%5
90%0
80%0
717%1
60%0
50%0
40%0
30%0
20%0
10%0
Click to share thisClick to share this