dukechronicle / chronjs

Source code for a former version of dukechronicle.com
dukechronicle.com
8 stars 1 forks source link

Inline image support #24

Open deanchen opened 13 years ago

deanchen commented 13 years ago

Inline images similar to http://www.bbc.co.uk/news/world-middle-east-13917291.

Ideally, the user should be able to drag and drop an image in to the browser, given the option to crop and are able to place the image visually in the text. For the time being, we'll only support floating it to the right, and the images can only be inserted in between paragraphs.

It would be fine to start off with the user specifying which paragraph the image would appear in.

We would only store the metadata for the uuid of the image, crop coordinates, size adjustment and between which paragraph it should be inserted on. Should also support floating it right or left if it's not too much trouble.

galonsky commented 13 years ago

Should I just focus on allowing the user to position the "article image" in the place they want in the text? Remember now that each article has references to an article, frontpage, and slideshow image. So we could just have a placeholder for the article image I guess?

Or did you want them to be able to specify any image? That could get more complicated.

deanchen commented 13 years ago

The way article image is defined is that it is always above the text. Inline images are different and should be able to accept anything. What I was thinking is that each article holds an array of objects containing paragraph

of image and image reference.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 12:09 AM, galonsky < reply@reply.github.com>wrote:

Should I just focus on allowing the user to position the "article image" in the place they want in the text? Remember now that each article has references to an article, frontpage, and slideshow image. So we could just have a placeholder for the article image I guess?

Or did you want them to be able to specify any image? That could get more complicated.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1896968

jodoglevy commented 13 years ago

Why store the paragraph # of image and image reference in the db? We should just render an html version of the article, with the image tags added in it the right places, and store that.

deanchen commented 13 years ago

The problem with that is that our system won't be aware of images inside the text so rendering plain html with image tags in it would not be appropriate for mobile applications and also for indexing.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 10:15 AM, jodoglevy < reply@reply.github.com>wrote:

Why store the paragraph # of image and image reference in the db? We should just render an html version of the article, with the image tags added in it the right places, and store that.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900195

jodoglevy commented 13 years ago

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

galonsky commented 13 years ago

The paragraph number thing seems very awkward to me. What's wrong with having a placeholder in the text?

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900818

galonsky commented 13 years ago

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900818

deanchen commented 13 years ago

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902024

jodoglevy commented 13 years ago

I think using our own image syntax was so writers could just specify the image names (as they are in our Couch datastore) rather than the urls to the image as markdown makes you do.

On Thu, Aug 25, 2011 at 1:38 PM, deanchen < reply@reply.github.com>wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902041

Joe Levy Duke University, Computer Science 919.886.6563 jal50@duke.edu

galonsky commented 13 years ago

If you want to use Markdown, you have to know the actual image URL.

On Aug 25, 2011, at 10:38 AM, deanchenreply@reply.github.com wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902041

deanchen commented 13 years ago

How would they know the image name? Seems like it would make a lot more sense to have a gui to enter whatever code necessary.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:42 PM, galonsky < reply@reply.github.com>wrote:

If you want to use Markdown, you have to know the actual image URL.

On Aug 25, 2011, at 10:38 AM, deanchenreply@reply.github.com wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902041

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902092

jodoglevy commented 13 years ago

I think we should have the image upload functionality in the article add page. Right now they are seperate pages. Will help with all this.

On Thu, Aug 25, 2011 at 2:09 PM, deanchen < reply@reply.github.com>wrote:

How would they know the image name? Seems like it would make a lot more sense to have a gui to enter whatever code necessary.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:42 PM, galonsky < reply@reply.github.com>wrote:

If you want to use Markdown, you have to know the actual image URL.

On Aug 25, 2011, at 10:38 AM, deanchenreply@reply.github.com wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902041

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902092

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902338

Joe Levy Duke University, Computer Science 919.886.6563 jal50@duke.edu

deanchen commented 13 years ago

Ok, the way I saw it happening is that you would be able to easily search through or upload images via a sidebar on the edit article screen. And drag and drop it in to the text between paragraphs.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 2:15 PM, jodoglevy < reply@reply.github.com>wrote:

I think we should have the image upload functionality in the article add page. Right now they are seperate pages. Will help with all this.

On Thu, Aug 25, 2011 at 2:09 PM, deanchen < reply@reply.github.com>wrote:

How would they know the image name? Seems like it would make a lot more sense to have a gui to enter whatever code necessary.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:42 PM, galonsky < reply@reply.github.com>wrote:

If you want to use Markdown, you have to know the actual image URL.

On Aug 25, 2011, at 10:38 AM, deanchenreply@reply.github.com wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902041

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902092

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902338

Joe Levy Duke University, Computer Science 919.886.6563 jal50@duke.edu

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902396

galonsky commented 13 years ago

Yep, that sounds good.

On Aug 25, 2011, at 11:17 AM, deanchen reply@reply.github.com wrote:

Ok, the way I saw it happening is that you would be able to easily search through or upload images via a sidebar on the edit article screen. And drag and drop it in to the text between paragraphs.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 2:15 PM, jodoglevy < reply@reply.github.com>wrote:

I think we should have the image upload functionality in the article add page. Right now they are seperate pages. Will help with all this.

On Thu, Aug 25, 2011 at 2:09 PM, deanchen < reply@reply.github.com>wrote:

How would they know the image name? Seems like it would make a lot more sense to have a gui to enter whatever code necessary.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:42 PM, galonsky < reply@reply.github.com>wrote:

If you want to use Markdown, you have to know the actual image URL.

On Aug 25, 2011, at 10:38 AM, deanchenreply@reply.github.com wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902041

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902092

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902338

Joe Levy Duke University, Computer Science 919.886.6563 jal50@duke.edu

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902396

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902413

deanchen commented 13 years ago

I'm not particularly tied to storing the paragaph # with the image, but hopefully my reasoning behind it makes more sense now.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 2:22 PM, galonsky < reply@reply.github.com>wrote:

Yep, that sounds good.

On Aug 25, 2011, at 11:17 AM, deanchen reply@reply.github.com wrote:

Ok, the way I saw it happening is that you would be able to easily search through or upload images via a sidebar on the edit article screen. And drag and drop it in to the text between paragraphs.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 2:15 PM, jodoglevy < reply@reply.github.com>wrote:

I think we should have the image upload functionality in the article add page. Right now they are seperate pages. Will help with all this.

On Thu, Aug 25, 2011 at 2:09 PM, deanchen < reply@reply.github.com>wrote:

How would they know the image name? Seems like it would make a lot more sense to have a gui to enter whatever code necessary.

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:42 PM, galonsky < reply@reply.github.com>wrote:

If you want to use Markdown, you have to know the actual image URL.

On Aug 25, 2011, at 10:38 AM, deanchenreply@reply.github.com wrote:

At that point, why not just use mark down instead of making up own own syntax? Don't see the value of making up own own img tags?

Dean Chen

Duke University | Trinity '12 Computer Science, Economics | Philosophy dean.chen@duke.edu (c) 203.843.8114

On Thu, Aug 25, 2011 at 1:36 PM, galonsky < reply@reply.github.com>wrote:

We're not talking about HTML img tags, but entities that can be converted to the correct HTML for desktop and mobile.

On Aug 25, 2011, at 8:20 AM, jodoglevyreply@reply.github.com wrote:

we're indexing based off of images? Also, if the mobile app were a mobile website, we could just change the css rules if a mobile browser was detected so that the html rendered in a better-for mobile-fashion on the mobile app.

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1900818

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902024

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902041

Reply to this email directly or view it on GitHub:

https://github.com/thechronicle/website/issues/24#issuecomment-1902092

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902338

Joe Levy Duke University, Computer Science 919.886.6563 jal50@duke.edu

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902396

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902413

Reply to this email directly or view it on GitHub: https://github.com/thechronicle/website/issues/24#issuecomment-1902462