2

I used the questions/{ids}/edit to add a hyperlinked image at the end of a question. It works if I use the default dimensions of the image. However, if I specify the width using width="320" or style="width:320px", the image becomes invisible. I have a feeling that Stack Exchange only supports a limited set of HTML attributes and width and style are not among them. Below is an Objective-C (iOS) example of how specifying a width causes the image to not show up. 

[self.httpEditQuestion
    requestWithUrl:[NSURL URLWithString:[NSString stringWithFormat:
        @"%@questions/%@/edit",
        API_BASE_URL,
        self.currentQuestion.identifier
    ]]
    post:@{
        @"key": APP_KEY,
        @"access_token": self.accessToken,
        @"id": self.currentQuestion.identifier,
        @"preview": @"false", // TODO
        @"site": self.currentQuestion.siteIdentifier,
        @"tags": [self implode:self.currentQuestion.hashTags],
        @"title": self.currentQuestion.name,
        @"body": [NSString stringWithFormat:
            @"%@ <p><a href=\"%@\"><img width=\"320\" src=\"%@\" /></a></p>",
            self.currentQuestion.body,
            self.currentUrl,
            self.currentThumbnail
        ]
    }
];
Improve this question

2 Answers 2

Reset to default
3

  1. Stack Exchange supports the width attribute; see "What HTML tags are allowed on Stack Exchange sites?".

  2. The answer to that question emphatically states:

    You must enter the tags exactly as shown. Any deviation from this list—adding extra spaces, using single quote or no quotes, etc.—means the tag will be stripped.

    and:

    The attribute order is important! Using a different order (e.g., height before width) will strip the tag!

This means that your example code, above, should use:

<img src=\"%@\" width=\"320\">


However, don't post/link images this way!
Resize the image to the desired dimensions and link to that. That is a standard best practice for a variety of usability, speed and efficiency reasons.

Also, images should be hosted on Stack Exchange's partner host. This ensures that the image is not lost sometime (soon) in the future.
Images are hosted on the special i.sstatic.net domain, although I'm not sure if the SE API makes this easy.

If you upload images to Stack Exchange's host, it makes handling different sizes easy.

For example, if you upload an image to Stack Exchange's host and get a base URL of:

https://i.sstatic.net/GLbK3.jpg

You can use the m suffix for a 320 px (half width) image and the l suffix for a 640 px (full width) image. EG:

https://i.sstatic.net/GLbK3m.jpg
https://i.sstatic.net/GLbK3l.jpg

This allows you to easily do neat, user-friendly tricks like this post markup:

[(Click for a larger image)  
![Puppies!][3]][4]

[3]: https://i.sstatic.net/GLbK3m.jpg "Click for a larger view."
[4]: https://i.sstatic.net/GLbK3.jpg "Click for a larger view."

(Note that there are two spaces at the end of the [(Click for a larger image) line.)


Which looks like this (hover over and click the image):

(Click for a larger image)
Puppies!

Improve this answer
-2

You can set your image like this. <img src = @"yourimage.png">

Steps: 
1. Set your image file path in image src tag in correct manner
2. Then set the width and height of the image
3. Accessing your image file path and configure in your project.

Suppose you want to load the image inside the body to a web view content. you can go with the following code::

Step 1: NSString *localPath = [[NSBundle mainBundle]
pathForResource:@"demo.html" ofType:nil]; NSString *html = [NSString stringWithContentsOfFile: localPath encoding:NSUTF8StringEncoding error:NULL];
NSString *path = [[NSBundle mainBundle] bundlePath]; NSURL *baseURL = [NSURL fileURLWithPath:path]; [mywebview loadHTMLString:html baseURL:baseURL];

Step 2: demo.html contains the following one.

NSString *htmlString = [NSString stringWithFormat:@"<html>\ <head>\ <style type=\"text/css\">\ html {height:%@;}\ body {height:%@; margin:0; padding:0; color:white; font-size:40px;}\ #bg {position:fixed; top:0; left:0; width:%@; height:%@;}\ #content {position:relative; z-index:1;}\ </style>\ </head>\ <body>\ <div id=\"bg\"><img src=\"%@\" width=\"%@\" height=\"%@\"></div>\ <div id=\"content\"><font color=\"#DAF899\" size=\"+4\"><b>%@</b></font><p>%@</p></div>\ </body>\ </html>", size, size, size, size, url, size, size, self.navigationItem.title, content]; [mywebview loadHTMLString:htmlString baseURL:nil]

Screenshots have given below in attachment.

enter image description here Try out this. surely will help you.

Improve this answer
1
  • 1
    This question is about editing questions via the Stack Exchange API. The kind of HTML generated by this answer is not supported.
    – Brock Adams
    Commented Apr 24, 2014 at 10:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .