Creating a Post

Initial Image

The first part of a post should be an image which will appear on cover pages etc. It should be included using one of the following sets of code:

• The first part of a post should be an image which will appear on cover pages etc. It should be included using one of the following sets of code:

  Copy

  ![Text](<URL or /images/filename.png>)
  Optional text.
  

• Pure markdown:

  Copy

  ![Textual description (alt text) of the image](<URL or /images/filename.png>)
  Optional text such as image credit (which could be in the alt text).
  

  • Another list:

    Copy

    ![Textual description (alt text) of the image](<URL or /images/filename.png>)
    Optional text such as image credit (which could be in the alt text).
    

  This is the simplest option, but has very little flexibility. For example, markdown images cannot be resized, or embeded as links. In principle, this could be nested in HTML with <a href=...>...</a> but presently the conversion to HTML passes through reStructureText which does not permit nested markup.

• Pure HTML.

  Copy

  <a href="http://dx.doi.org/10.1103/PhysRevLett.118.155301"
     class="image">
    <img alt="Textual description (alt text) of the image."
    src="<URL or /images/filename.png>">
  </a>
  

  This allows you to add links, or any other formatting.

Image Files

Images can either be referenced by URL, or locally. The advantage of local images is that they will be available even when off-line, or if the link breaks, but they require storing the image locally and distributing it.

To manage images, we have a top level folder /images in our website folder (the top level Nikola project) in which we store all of the images. This folder will be copied by Nikola to the site. We refer to these locally using an absolute filename /images/filename.png. In order to make this work in the Jupyter notebooks while editing, we symlink the /images to the directory where the notebook server is running. Thus, if you always start the server from the top level of the Nikola site, no symlinks are required.

A good source of images is:

• https://unsplash.com/

These are free for use without any restrictions (although attribution is appreciated).

Examples

Images

• Simple Markdown inclusion of photo with credit in Alt text:

• Simple Markdown inclusion of photo with credit as following badge. (The Unsplash image page provides a link on each images page with the badge code which you can just copy and paste.):

[removed][removed][removed]Teddy Kelley