User Tools

Site Tools


ce3twp_images_in_posts

Embedding Images in Pages & Posts

You may add images into the content of any page or post on your site. When writing a page or post, use the Add Media button to attach images to your article. This is standard WordPress procedure, so please read the official documentation on how to manage this.

Below, I will explain some of the custom options the theme provides you when inserting images.

Once you've uploaded your image, chosen your settings for inserting that image, and have clicked the “Insert into post” button, you will – if working in the HTML editor – end up with a snippet of code like this:

<img src="http://campagnapictures.com/blog/wp-content/uploads/2013/07/mc_20130619_Ayutthaya_0146-300x168.jpg" 
alt="Wat Mahathat, Ayutthaya, Thailand" title="" width="300" height="168" style="width: 300px;" 
class="size-medium wp-image-22 hd-full" data-large-rendition="http://campagnapictures.com/blog/wp-content/uploads/2013/07/mc_20130619_Ayutthaya_0146-1024x576.jpg" 
data-full-rendition="http://campagnapictures.com/blog/wp-content/uploads/2013/07/mc_20130619_Ayutthaya_0146.jpg" />

Additionally, that code may be wrapped in caption or hyperlink tags, depending on your insertion settings. If you're not accustomed to reading source code, that may appear to be a lot of nonsense to take in. But focus on this bit in the middle:

class="size-medium wp-image-22 hd-full"

You may edit the class string directly, either to add, change or remove classes. You may also access the Theme Options via the WordPress dashboard to setup default classes to be added to all image embedded into posts and pages. Above, the 'hd-full' class is being added automatically because it is setup as our default via the Theme Options.

You may use any of the specialty classes included in Chado, or write custom classes of your own to use. These classes are entirely optional, so you need not use them at all if you do not wish. Included classes are:

hd-full
Causes smaller image renditions to be replaced with the full-size rendition when viewed on Retina display devices. Use either 'hd-full' or 'hd-large', but not both.

hd-large
Causes smaller image renditions to be replaced with the large-size rendition when viewed on Retina display devices. Use either 'hd-full' or 'hd-large', but not both.

ce3twp_images_in_posts.txt · Last modified: 2013/07/15 06:13 by admin