Find Image ID in WordPress

From wp-admin i.e from Dashboard

click on

Media -> Library

and then change the view option to List view instead of Grid view

and then mouse hover the image ‘edit’ button.

we can notice at the bottom left corner the edit link url display

from that link we can identify the image ID.

for post attribute the image id is assigned.  “post=”  some number will return, that number only image id.

 

or just click on that link,

in the url bar, we can notice the post ID.

Shortcodes

Shortcode name :  shape

e.g.

[shape id=99]

id attribute to add image ID ( How to find image ID )

i.e. Add image id using “id” attribute.

Shortcode Attributes

id  –  add Image ID.

float  –  make the image float left or right (  default float to left ).

margin  –  add space between image and content ( default to 1em ) , can add in css units px, em, %

width  –  Width of the image.

height  –  height of the image.

class  –  add class name’s to image.

There are some predefined class

img-50  –  add max width of image to 50%
img-60  –  add max width of image to 60%
img-70  –  add max width of image to 70%
img-80  –  add max width of image to 80%
img-90  –  add max width of image to 90%
img-100  –  add max width of image to 100%
auto-h  –  add height: auto for that image,
                     autoh or auto-h both works.

 

[shape id=99 float="right" width="500px" class="img-80" ]

 

How to – WP CSS Shapes

 

 

How to – WP CSS Shapes

In most websites today, we seen content looks like boxes.

By using “WP CSS Shape” plugin, we can create shape for content based on image.

It easy to get started.

add an image using shortcode, with in an inline content,

It makes the content wrap around the image on one side, left or right.

[shape id=44]

 

We can customize the image by using shortcode attributes.

Shrotcode Attributes List

Image float

By default the image float to left and the content wrap on right side of the image.

to make the image float to right,  add float=right

[shape id=44 float="right" ]

Margin

To add space between image and content use “margin” attribute.

default space is 1em

add css units as suffix –  px, em, %

[shape id=44 margin="20px" ]

Change Image Width, Height

Its recommend to add Width alone and leave height: auto;

so that image height will change based on width.

if that’s not happen, there is a custom class “auto-h” created to make height: auto. can add that using “class”  attribute, explained later in this page.

[shape id=44 width="500px" ]

Add class names

If the image takes the full screen width, then there is no proper space for the content to wrap around of the image on one side.

to fix that we can change the max width of the image to less than 100% of screen width or with in that block.

For that there are some predefined class to change the max width.

img-50  –  add max width of image to 50%
img-60  –  add max width of image to 60%
img-70  –  add max width of image to 70%
img-80  –  add max width of image to 80%
img-90  –  add max width of image to 90%
img-100  –  add max width of image to 100%
auto-h  –  add height: auto for that image.

 

so if class “img-80” is added, then image takes 80% of that block, and there is space for the content to wrap the image, and now the content can looks in a shape even in small screens.

If the image height is not change based on the width of the image. then add “auto-h” to class attribute. auto-h or autoh both works.

[shape id=44 class="img-80" ]

using “class” attribute, can add any class name.

if added image using shape attribute, there are some class which add’s by default.

shape, csh-image, wp-image-<image-id>  ( if image id 44, then wp-image-44 class added to that image. )