Responsive Image

[raw]

The [image] shortcode lets you insert an image that automatically resizes to fill its parent container. The idea is that you can add an image to a page and have it display correctly on all devices – desktop, tablet and mobile. Resize the window and watch as the image below resizes correctly. You can also click it to launch lightbox.

[image src=“https://projectgen.com/nexus-demo/wp-content/uploads/2012/04/photodune-1324517-conch-shell-on-beach-with-wav-m1.jpg“ width=“980″ height=“440″ title=“Image Title“ autosize=“true“ lightbox=“true“]

[spacer height=“40px“]
[divider]
[spacer height=“24px“]
[/raw]

[raw]

Get The Code

[spacer height=“4px“]

[codebox line_numbers=“true“ remove_breaks=“true“ lang=“html“]
[[image src=“https://path/to/my/image.png“ width=“980″ height=“440″
title=“Image Title“ autosize=“true“ lightbox=“true“]]
[/codebox]

[spacer height=“23px“]
[divider]

[spacer height=“24px“]
[/raw]
[raw]

Customization Options

[list]
[list_item]src – the URL of the image you want to display[/list_item]
[list_item]width – the width and height will be used to maintain the aspect ratio of the image as it is resized[/list_item]
[list_item]height – the width and height will be used to maintain the aspect ratio of the image as it is resized[/list_item]
[list_item]title – the title of the image[/list_item]
[list_item]autoresize – whether or not you want the responsive autoresize to run[/list_item]
[list_item]lightbox – whether you want lightbox to launch if the image is clicked[/list_item]
[list_item]clickthrough – whether you want to navigate to the image URL when the image is clicked [/list_item]
[/list]
[/raw]

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *