{"id":36,"date":"2017-11-15T09:22:20","date_gmt":"2017-11-15T09:22:20","guid":{"rendered":"https:\/\/holithemes.com\/wp-css-shapes\/?p=36"},"modified":"2017-11-15T09:22:20","modified_gmt":"2017-11-15T09:22:20","slug":"how-to","status":"publish","type":"post","link":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/","title":{"rendered":"How to – WP CSS Shapes"},"content":{"rendered":"

In most websites today, we seen content looks like boxes.<\/p>\n

By using “WP CSS Shape” plugin, we can create shape for content based on image.<\/p>\n

It easy to get started.<\/p>\n

add an image using shortcode, with in an inline content,<\/p>\n

It makes the content wrap around the image on one side, left or right.<\/p>\n

[shape id=44]<\/pre>\n
\n
 <\/p>\n
We can customize the image by using shortcode attributes.<\/p>\n
Shrotcode Attributes List<\/a><\/p>\n
Image float<\/h3>\n
By default the image float to left and the content wrap on right side of the image.<\/p>\n
to make the image float to right,\u00a0 add float=right<\/p>\n
[shape\u00a0id=44 float=\"right\" ]<\/pre>\n
Margin<\/h3>\n
To add space between image and content use “margin” attribute.<\/p>\n
default space is 1em<\/p>\n
add css units as suffix –\u00a0 px, em, %<\/p>\n
[shape id=44 margin=\"20px\" ]<\/pre>\n
Change Image Width, Height<\/h3>\n
Its recommend to add Width alone and leave height: auto;<\/p>\n
so that image height will change based on width.<\/p>\n
if that’s not happen, there is a custom class “auto-h” created to make height: auto. can add that using “class”\u00a0 attribute, explained later in this page.<\/p>\n
[shape id=44 width=\"500px\" ]<\/pre>\n
Add class names<\/h3>\n
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.<\/p>\n
to fix that we can change the max width of the image to less than 100% of screen width or with in that block.<\/p>\n
For that there are some predefined class to change the max width.<\/p>\n
img-50<\/strong>\u00a0 \u2013\u00a0 add max width of image to 50%<\/div>\n
img-60<\/strong>\u00a0 \u2013\u00a0\u00a0add max width of image to 60%<\/div>\n
img-70<\/strong>\u00a0 \u2013\u00a0\u00a0add max width of image to 70%<\/div>\n
img-80<\/strong>\u00a0 \u2013\u00a0\u00a0add max width of image to 80%<\/div>\n
img-90<\/strong>\u00a0 \u2013\u00a0\u00a0add max width of image to 90%<\/div>\n
img-100<\/strong>\u00a0 \u2013\u00a0\u00a0add max width of image to 100%<\/div>\n
auto-h<\/strong>\u00a0 \u2013\u00a0 add height: auto for that image.<\/div>\n
 <\/p>\n
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.<\/p>\n
If the image height is not change based on the width of the image.\u00a0then add “auto-h” to class attribute. auto-h or autoh both works.<\/p>\n
[shape id=44 class=\"img-80\" ]<\/pre>\n
using “class” attribute, can add any class name.<\/p>\n
if added image using shape attribute, there are some class which add’s by default.<\/p>\n
shape<\/strong>, csh-image<\/strong>, wp-image-<image-id>\u00a0<\/strong> ( if image id 44, then wp-image-44 class added to that image. )<\/p>\n","protected":false},"excerpt":{"rendered":"
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.   …<\/p>\n
  How to – WP CSS Shapes<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-doc"],"yoast_head":"\nHow to - WP CSS Shapes - WP-Shapes<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to - WP CSS Shapes - WP-Shapes\" \/>\n<meta property=\"og:description\" content=\"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.   … How to – WP CSS Shapes Read More »\" \/>\n<meta property=\"og:url\" content=\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\" \/>\n<meta property=\"og:site_name\" content=\"WP-Shapes\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-15T09:22:20+00:00\" \/>\n<meta name=\"author\" content=\"holithemes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"holithemes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\"},\"author\":{\"name\":\"holithemes\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/8f88055f5b6caa99de4c77c2589d30ae\"},\"headline\":\"How to – WP CSS Shapes\",\"datePublished\":\"2017-11-15T09:22:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\"},\"wordCount\":389,\"articleSection\":[\"doc\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\",\"url\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\",\"name\":\"How to - WP CSS Shapes - WP-Shapes\",\"isPartOf\":{\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/#website\"},\"datePublished\":\"2017-11-15T09:22:20+00:00\",\"author\":{\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/8f88055f5b6caa99de4c77c2589d30ae\"},\"breadcrumb\":{\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to – WP CSS Shapes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/#website\",\"url\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/\",\"name\":\"WP-Shapes\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/8f88055f5b6caa99de4c77c2589d30ae\",\"name\":\"holithemes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7a7b4e36d904a9e49a8b38b6c6a3649e4eef1a5ee0248c5830953e43335a27d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7a7b4e36d904a9e49a8b38b6c6a3649e4eef1a5ee0248c5830953e43335a27d8?s=96&d=mm&r=g\",\"caption\":\"holithemes\"},\"sameAs\":[\"http:\/\/holithemes.com\/plugins\/wp-shapes\"],\"url\":\"https:\/\/holithemes.com\/plugins\/wp-shapes\/author\/holithemes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to - WP CSS Shapes - WP-Shapes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/","og_locale":"en_US","og_type":"article","og_title":"How to - WP CSS Shapes - WP-Shapes","og_description":"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.   … How to – WP CSS Shapes Read More »","og_url":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/","og_site_name":"WP-Shapes","article_published_time":"2017-11-15T09:22:20+00:00","author":"holithemes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"holithemes","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/#article","isPartOf":{"@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/"},"author":{"name":"holithemes","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/8f88055f5b6caa99de4c77c2589d30ae"},"headline":"How to – WP CSS Shapes","datePublished":"2017-11-15T09:22:20+00:00","mainEntityOfPage":{"@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/"},"wordCount":389,"articleSection":["doc"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/","url":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/","name":"How to - WP CSS Shapes - WP-Shapes","isPartOf":{"@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/#website"},"datePublished":"2017-11-15T09:22:20+00:00","author":{"@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/8f88055f5b6caa99de4c77c2589d30ae"},"breadcrumb":{"@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/how-to\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/holithemes.com\/plugins\/wp-shapes\/"},{"@type":"ListItem","position":2,"name":"How to – WP CSS Shapes"}]},{"@type":"WebSite","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/#website","url":"https:\/\/holithemes.com\/plugins\/wp-shapes\/","name":"WP-Shapes","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/holithemes.com\/plugins\/wp-shapes\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/8f88055f5b6caa99de4c77c2589d30ae","name":"holithemes","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/holithemes.com\/plugins\/wp-shapes\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7a7b4e36d904a9e49a8b38b6c6a3649e4eef1a5ee0248c5830953e43335a27d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a7b4e36d904a9e49a8b38b6c6a3649e4eef1a5ee0248c5830953e43335a27d8?s=96&d=mm&r=g","caption":"holithemes"},"sameAs":["http:\/\/holithemes.com\/plugins\/wp-shapes"],"url":"https:\/\/holithemes.com\/plugins\/wp-shapes\/author\/holithemes\/"}]}},"_links":{"self":[{"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":0,"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"wp:attachment":[{"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/holithemes.com\/plugins\/wp-shapes\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}