{"id":1425,"date":"2016-04-20T03:04:30","date_gmt":"2016-04-19T21:34:30","guid":{"rendered":"http:\/\/www.powerwp.test\/?p=1425"},"modified":"2019-12-30T07:19:11","modified_gmt":"2019-12-30T01:49:11","slug":"wpfill-post-content","status":"publish","type":"post","link":"https:\/\/demo.themesdna.com\/gridview\/wpfill-post-content\/","title":{"rendered":"40+ Best Fashion Instagrams of the Year"},"content":{"rendered":"

Dolore dolorem eius provident gravida lorem fugit convallis ullam, nostra nibh lorem magnam molestiae? Rerum nihil aut? Cillum sagittis iaculis donec! Risus. Quibusdam taciti! Dapibus turpis tempore quas penatibus non doloribus varius, unde quos purus tempore consectetur proin parturient labore condimentum nesciunt, vestibulum. Cumque sint consectetuer rutrum augue, tenetur ultrices.<\/p>\n

OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a shortcode which then in turn wraps the whole thing in a div<\/code> with inline styling! Maybe one day they’ll be able to use the figure<\/code> and figcaption<\/code> elements for all this. Additionally, images can be wrapped in links which, if you’re using anything other than color<\/code> or text-decoration<\/code> to style your links can be problematic.<\/p>\n

\n

\"Your<\/a><\/p>\n

This is the optional caption.<\/p>\n<\/div>\n

The next issue we face is image alignment, users get the option of None<\/em>, Left<\/em>, Right<\/em> & Center<\/em>. On top of this, they also get the options of Thumbnail<\/em>, Medium<\/em>, Large<\/em> & Fullsize<\/em>. You’ll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.<\/p>\n

\"Your
\n\"Your
\n\"Your
\n\"Your<\/p>\n

Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.\"Your
\nVivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.\"YourVivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.\"YourAenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.<\/p>\n

And then… Finally, users can insert a WordPress<\/p>\n\n

, which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn’t actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we’ll work with that for our example with an added fouth image to test verticle spacing.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n
Table Head Column One<\/th>\nTable Head Column Two<\/th>\nTable Head Column Three<\/th>\n<\/tr>\n<\/thead>\n
Table Footer Column One<\/td>\nTable Footer Column Two<\/td>\nTable Footer Column Three<\/td>\n<\/tr>\n<\/tfoot>\n
Table Row Column One<\/td>\nShort Text<\/td>\nTesting a table cell with a longer amount of text to see what happens, you’re not using tables for site layouts are you?<\/td>\n<\/tr>\n
Table Row Column One<\/td>\nTable Row Column Two<\/td>\nTable Row Column Three<\/td>\n<\/tr>\n
Table Row Column One<\/td>\nTable Row Column Two<\/td>\nTable Row Column Three<\/td>\n<\/tr>\n
Table Row Column One<\/td>\nTable Row Column Two<\/td>\nTable Row Column Three<\/td>\n<\/tr>\n
Table Row Column One<\/td>\nTable Row Column Two<\/td>\nTable Row Column Three<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n
  1. Ordered list item one.<\/li>\n
  2. Ordered list item two.<\/li>\n
  3. Ordered list item three.<\/li>\n
  4. Ordered list item four.<\/li>\n
  5. By the way, WordPress does not let you create nested lists through the visual editor.<\/li>\n<\/ol>\n