User Tools

Site Tools


ce3twp_images_in_posts

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

ce3twp_images_in_posts [2013/07/15 06:13] (current)
admin created
Line 1: Line 1:
 +====== Embedding Images in Pages & Posts ======
 +
 +You may add images into the content of any page or post on your site. When [[http://codex.wordpress.org/Writing_Posts|writing a page or post]], use the **Add Media** button to [[http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages|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:
 +
 +<code html>
 +<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" />
 +</code>
 +
 +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:
 +
 +<code html>class="size-medium wp-image-22 hd-full"</code>
 +
 +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