Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to add Images to your Entries
Stephanie
App Author
*****

Posts: 105
Threads: 38
Joined: 2014.Jan
Reputation: 6
#1
How to add Images to your Entries
Getting an image to appear in an entry is a two step process. First we get an image into the app's Documents folder. Then we tell the entry to display it.

1) Get the image into the Documents folder in the App:
  • In iTunes, select your device, and go to the Apps tab. At the bottom of the screen (you may have to scroll down) you will see a File Sharing section.
  • On the left-hand side, click the Wicca Plus icon. On the right hand side you will see it list the Wicca Plus Documents
  • Drag your JPG file into this area. It will then be copied into the app's Documents folder on your device.
  • For example, in the illustration below Sample Image.png is an image file in the Documents folder which can be used in an entry.

[Image: iTunesFileSharing-600x266.png]

2) Telling the app where to display your JPG within your entry:
  • When you are editing the entry, you will want to use a bit of html code to tell the app that you want to insert your image.
  • First thing to note is that iOS devices are Case Sensitive, so Picture.JPG and picture.jpg are two totally different things, as far as your device is concerned.
  • Second thing to note is you need to have the exact full name of the file, including the suffix.
  • When you have the exact name of the file, here is the bit of HTML to use to insert it into your entry:
    <img src="MyExactFileName.jpg">
  • While you are editing the entry you will see it as the html code, but when you are finished editing and just view the entry, you should see the image.
If you still have the two sample entries in the Journal section, have a look at "Sample 2". Edit it on the device, to see how the image is included there, along with plenty of other examples of simple html formatting.

3) Bonus step three - how to re-size your images:

If you exactly use the example HTML in step 2, your images will be sized to fill the width of the screen in your entries. Depending on the size of the image you are using, this can look a bit odd from one device to another.

The app has a number of "pre-set" image options, which you can make use of in your own entries. All you do is add one more variable to the img command, like this:
<img src="MyExactFileName.jpg" class="half">

The "class" variable tells the app to format the image to one of the pre-set sizes. The following presets are available for you to use:
  • class="quarter" - on both iPhone and iPad, the image will be approximately 1/4 the screen width.
  • class="half" - on both iPhone and iPad, the image will be approximately 1/2 the screen width.
  • class="threeq" - on both iPhone and iPad, the image will be approximately 3/4 the screen width.
  • class="iphone" - on an iPhone, the image will scale to fit the screen width. On an iPad, the image will scale to about 1/2 the screen width. This is useful for images that look good on the iPhone but on the iPad they scale up very poorly.

Please note, like the image file names, the presets are case sensitive, they should be used exactly as shown here.

Possible gotchas include:
  • If you see an empty box where the image should be, but no picture, that means you have the HTML part correct, but the image name is wrong. This can be caused by having the image name wrong, mis-spelled, or incorrect case (upper/lower). Also check for stray spaces.
  • If you don't see the image and you don't get an empty box, but instead see a bit of gibberish or text that looks like HTML (or if the entire entry looks 'wrong'), then it means you have a problem in the HTML text. Such as a stray < or > sign, or maybe a quotation mark is missing.
  • If you've double-checked everything and still can't get it to work right, please feel free to ask for help!

Please note, if you are already familiar with HTML, you can use just about any of the regular html or css that you want, to format your images and other content.
2013.09.30, 07.00
Find all posts by this user Quote this message in a reply


Forum Jump: