From fc469245b3be95299767a5c3a135710c003efbea Mon Sep 17 00:00:00 2001 From: Damien Dillon Date: Tue, 23 Jan 2024 11:23:54 +0100 Subject: [PATCH] Match the new `source_url` on the reference document The `source_url` of the images on the reference document has changed. As a result the `check_google_doc_export` fails. We would normally expect these to be static, if there is another change down the line we can consider comparing the export without the `source_url` --- spec/article_json/import/google_doc/html/parser_spec.rb | 2 +- spec/fixtures/google_doc_image_with_link.html | 2 +- spec/fixtures/reference_document.html | 2 +- spec/fixtures/reference_document_exported.amp.html | 2 +- spec/fixtures/reference_document_exported.facebook.html | 2 +- spec/fixtures/reference_document_exported.html | 2 +- spec/fixtures/reference_document_parsed.json | 6 +++--- 7 files changed, 9 insertions(+), 9 deletions(-) diff --git a/spec/article_json/import/google_doc/html/parser_spec.rb b/spec/article_json/import/google_doc/html/parser_spec.rb index 74d6144..64438b4 100644 --- a/spec/article_json/import/google_doc/html/parser_spec.rb +++ b/spec/article_json/import/google_doc/html/parser_spec.rb @@ -112,7 +112,7 @@ "content": [ { "type": "image", - "source_url": "https://lh7-us.googleusercontent.com/H28MfU2_fPpHJ2UP16JLs7nWHvRAN0fEguVpp9ZOmtLNvxp4oNgKNn_fycYVcb1ScgdQ-UPLjBdoKdl5hsmsPxhfOZ3RiheScNhIw68UAHYfmuzObdnfxidlph1o0rbxKzE1n6s3_wivLsU", + "source_url": "https://lh7-us.googleusercontent.com/7bgjcEQ6DWAfTzeb-RY5ExlTBWkHdqQf9PSK7ck3IxzI2sVDrm_hfI6jT-c04tenqOWWtWMxMQyWX0fEZeN3aVbBC_YsCCKm0vmddGeRgIETJ5yJbQoGCzh4dwCo0bPGfh5rTljMk8PEvwQ", "float": "left", "caption": [ { diff --git a/spec/fixtures/google_doc_image_with_link.html b/spec/fixtures/google_doc_image_with_link.html index 8dc52fa..d4a396b 100644 --- a/spec/fixtures/google_doc_image_with_link.html +++ b/spec/fixtures/google_doc_image_with_link.html @@ -1 +1 @@ -

[image-link-to: http://www.devex.com] This is the caption of the image

+

[image-link-to: http://www.devex.com] This is the caption of the image

diff --git a/spec/fixtures/reference_document.html b/spec/fixtures/reference_document.html index 71646af..1333829 100644 --- a/spec/fixtures/reference_document.html +++ b/spec/fixtures/reference_document.html @@ -1 +1 @@ -

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  1. And here we have a numbered list
  2. This time, with three entries.
  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag [image-link-to: http://devex.com] with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

http://vimeo.com/42315417 [devex]

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

https://www.youtube.com/watch?v=_ZG8HBuDjgc [comedy]

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

http://www.slideshare.net/Devex/the-best-global-development-quotes-of-2012

The paragraph following the URL is the slideshow’s caption.

Please note that currently only slideshows on slideshare are recognized.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twitter Tweets

Individual tweets can be embedded by providing the URL:

https://twitter.com/d3v3x/status/554608639030599681

A nice caption...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quotes

A subtitle named “Quote:” indicates the start of a quote which continues until the first occurring horizontal line. The last paragraph is formatted to be the quoted source. Quotes can be aligned to the left, right or center. Centered quotes will span the whole width of the article while left- and right-aligned are smaller and have text floating around it.

Quote:

Operator! Give me the number for 911!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quote:

Marge, don't discourage the boy! Weaseling out of things is important to learn. It's what separates us from the animals! Except the weasel.

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quote:

Oh, so they have internet on computers now!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Boxes

Text boxes include internal excerpts from the article (Story Highlights) or additional information related to the article and are displayed either on the left or on the right. A subtitle named “Textbox:” indicates the start of a text box which continues until the first occurring horizontal line. Text boxes can contain headers which have to be in the formatting “Heading 2”.

Textbox:

A nice title for our left-aligned text box

A first paragraph with some text

which continues here in the second paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To make the text box appear on the right side of the article just align it’s text to the right.

Textbox:

Story Highlights

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Textbox: [highlighted]

It will generate a textbox with the words inside the brackets as tags, which could be used later to generate css classes, for example

+

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  1. And here we have a numbered list
  2. This time, with three entries.
  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag [image-link-to: http://devex.com] with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

http://vimeo.com/42315417 [devex]

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

https://www.youtube.com/watch?v=_ZG8HBuDjgc [comedy]

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

http://www.slideshare.net/Devex/the-best-global-development-quotes-of-2012

The paragraph following the URL is the slideshow’s caption.

Please note that currently only slideshows on slideshare are recognized.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twitter Tweets

Individual tweets can be embedded by providing the URL:

https://twitter.com/d3v3x/status/554608639030599681

A nice caption...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quotes

A subtitle named “Quote:” indicates the start of a quote which continues until the first occurring horizontal line. The last paragraph is formatted to be the quoted source. Quotes can be aligned to the left, right or center. Centered quotes will span the whole width of the article while left- and right-aligned are smaller and have text floating around it.

Quote:

Operator! Give me the number for 911!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quote:

Marge, don't discourage the boy! Weaseling out of things is important to learn. It's what separates us from the animals! Except the weasel.

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quote:

Oh, so they have internet on computers now!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Boxes

Text boxes include internal excerpts from the article (Story Highlights) or additional information related to the article and are displayed either on the left or on the right. A subtitle named “Textbox:” indicates the start of a text box which continues until the first occurring horizontal line. Text boxes can contain headers which have to be in the formatting “Heading 2”.

Textbox:

A nice title for our left-aligned text box

A first paragraph with some text

which continues here in the second paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To make the text box appear on the right side of the article just align it’s text to the right.

Textbox:

Story Highlights

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Textbox: [highlighted]

It will generate a textbox with the words inside the brackets as tags, which could be used later to generate css classes, for example

diff --git a/spec/fixtures/reference_document_exported.amp.html b/spec/fixtures/reference_document_exported.amp.html index 65c1484..664d0d3 100644 --- a/spec/fixtures/reference_document_exported.amp.html +++ b/spec/fixtures/reference_document_exported.amp.html @@ -1 +1 @@ -

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  1. And here we have a numbered list

  2. This time, with three entries.

  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

The paragraph following the URL is the slideshow’s caption.

Please note that currently only slideshows on slideshare are recognized.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twitter Tweets

Individual tweets can be embedded by providing the URL:

A nice caption...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quotes

A subtitle named “Quote:” indicates the start of a quote which continues until the first occurring horizontal line. The last paragraph is formatted to be the quoted source. Quotes can be aligned to the left, right or center. Centered quotes will span the whole width of the article while left- and right-aligned are smaller and have text floating around it.

Operator! Give me the number for 911!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Marge, don't discourage the boy! Weaseling out of things is important to learn. It's what separates us from the animals! Except the weasel.

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Oh, so they have internet on computers now!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Boxes

Text boxes include internal excerpts from the article (Story Highlights) or additional information related to the article and are displayed either on the left or on the right. A subtitle named “Textbox:” indicates the start of a text box which continues until the first occurring horizontal line. Text boxes can contain headers which have to be in the formatting “Heading 2”.

A nice title for our left-aligned text box

A first paragraph with some text

which continues here in the second paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To make the text box appear on the right side of the article just align it’s text to the right.

Story Highlights

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

It will generate a textbox with the words inside the brackets as tags, which could be used later to generate css classes, for example

+

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  1. And here we have a numbered list

  2. This time, with three entries.

  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

The paragraph following the URL is the slideshow’s caption.

Please note that currently only slideshows on slideshare are recognized.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twitter Tweets

Individual tweets can be embedded by providing the URL:

A nice caption...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quotes

A subtitle named “Quote:” indicates the start of a quote which continues until the first occurring horizontal line. The last paragraph is formatted to be the quoted source. Quotes can be aligned to the left, right or center. Centered quotes will span the whole width of the article while left- and right-aligned are smaller and have text floating around it.

Operator! Give me the number for 911!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Marge, don't discourage the boy! Weaseling out of things is important to learn. It's what separates us from the animals! Except the weasel.

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Oh, so they have internet on computers now!

Homer Simpson

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Boxes

Text boxes include internal excerpts from the article (Story Highlights) or additional information related to the article and are displayed either on the left or on the right. A subtitle named “Textbox:” indicates the start of a text box which continues until the first occurring horizontal line. Text boxes can contain headers which have to be in the formatting “Heading 2”.

A nice title for our left-aligned text box

A first paragraph with some text

which continues here in the second paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To make the text box appear on the right side of the article just align it’s text to the right.

Story Highlights

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

It will generate a textbox with the words inside the brackets as tags, which could be used later to generate css classes, for example

diff --git a/spec/fixtures/reference_document_exported.facebook.html b/spec/fixtures/reference_document_exported.facebook.html index 6497f07..b887558 100644 --- a/spec/fixtures/reference_document_exported.facebook.html +++ b/spec/fixtures/reference_document_exported.facebook.html @@ -1,4 +1,4 @@ -

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  1. And here we have a numbered list

  2. This time, with three entries.

  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

The Best Global Development Quotes of 2012 from Devex
+

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  1. And here we have a numbered list

  2. This time, with three entries.

  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

The Best Global Development Quotes of 2012 from Devex
The paragraph following the URL is the slideshow’s caption.

Please note that currently only slideshows on slideshare are recognized.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twitter Tweets

Individual tweets can be embedded by providing the URL:

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

The Best Global Development Quotes of 2012 from Devex
+

The main content of the article starts here.

Headings

Internal headings need to be in the formatting “Heading x”, just pick it from the toolbar above.

Note that horizontal lines will not show up in the converted article format but are used to terminate certain sections like quotes or text boxes. More one this later on...

Basic Text and a Link

Text can include links and basic formatting. By using the toolbar you can define bold and italic text.

To create a link just use the button within the toolbar: Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lists

There is support for both ordered and unordered lists, just just the respective button from the toolbar and get started.

  • This is an unordered list...

  • … with two entries

  1. And here we have a numbered list

  2. This time, with three entries.

  3. Great, isn’t it?!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Images

Images can be inserted by using the insert image function of Google Docs. It allows you to upload any image from your computer or specify a URL.

When an image is smaller than the medium width of the document, it will be displayed as a small image with text floating around it.

The image’s caption resides in the paragraph following the image. So, if all goes well, this paragraph should be the caption. Also, if the caption has the following tag with a url inside, the image will have a link to that url (devex.com, in this case).

The following paragraph is then normal content again. By aligning small images to the right they will later on be displayed on the right side of the article. Let’s first add some lorem ipsum text to flow around these small images.

You can also add alt text to an image, by selecting the image and pressing CTRL+ALT+Y or right clicking, selecting the option and filling the “Description” input.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
The caption will then also be on the right, even if it’s not properly aligned within this document.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large images that are supposed to take up the full width within the article format are also big ones within the Google Document.

And of course, also the big images have captions...

Embedded Elements

Different types of multimedia elements can be embedded in this document. It is enough to provide the URL of the element you want to embed. Embeddings can be tagged as well, just provide a space-separated list of tags in brackets, after the URL - we’ll see some examples further down.

Videos: Vimeo

Videos are just referenced by the URL. It doesn’t matter if the URL is a hyperlink or just normal text. The important thing is that it has its own paragraph with nothing else in it. The alignment (centered  in this example) doesn’t really matter.

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Videos: YouTube

The paragraph following the URL is the video’s caption.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshows

Slideshows are, like videos, referenced by an URL:

The paragraph following the URL is the slideshow’s caption.

Please note that currently only slideshows on slideshare are recognized.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Twitter Tweets

Individual tweets can be embedded by providing the URL:

diff --git a/spec/fixtures/reference_document_parsed.json b/spec/fixtures/reference_document_parsed.json index 6d07ac5..a55bdb7 100644 --- a/spec/fixtures/reference_document_parsed.json +++ b/spec/fixtures/reference_document_parsed.json @@ -285,7 +285,7 @@ }, { "type": "image", - "source_url": "https://lh7-us.googleusercontent.com/H28MfU2_fPpHJ2UP16JLs7nWHvRAN0fEguVpp9ZOmtLNvxp4oNgKNn_fycYVcb1ScgdQ-UPLjBdoKdl5hsmsPxhfOZ3RiheScNhIw68UAHYfmuzObdnfxidlph1o0rbxKzE1n6s3_wivLsU", + "source_url": "https://lh7-us.googleusercontent.com/7bgjcEQ6DWAfTzeb-RY5ExlTBWkHdqQf9PSK7ck3IxzI2sVDrm_hfI6jT-c04tenqOWWtWMxMQyWX0fEZeN3aVbBC_YsCCKm0vmddGeRgIETJ5yJbQoGCzh4dwCo0bPGfh5rTljMk8PEvwQ", "float": "left", "caption": [ { @@ -325,7 +325,7 @@ }, { "type": "image", - "source_url": "https://lh7-us.googleusercontent.com/svyDNS3iMlsKGdEnuoCHLJlN0p7xGu6wQOR83GAR88xz9-4t0OCkMbsZKGHRb6hRfJmmYjhjX4G_ws2IrYIy9Tyvz5zaXGIoQGKslm57Red3TBQRSBsi9nYOP4mQ-WA1E44NkyWMJ7frs40", + "source_url": "https://lh7-us.googleusercontent.com/TUa7V3jix4UVQPZBW7NV4vbN0cos0XiHaKCBzlY0qZSSmOD9CBsEIVo1XbxpTGDwElOiNTthnJxSHVaQ2MoSY0tKcV2NYBswCUeeI8FCO_BbTOj3IQ-dAWuxoTLAGov9AQjckAYlhSz8zIY", "float": "right", "caption": [ { @@ -365,7 +365,7 @@ }, { "type": "image", - "source_url": "https://lh7-us.googleusercontent.com/xl0QcgKbyoOpU-3ISbnCw8DoLsVtSa2YanuYOjn1GFTvHFg8u1ebdPlE1wIqy1cjvmpeAZcABO3yGt1LgcPqw1UmyVPNjIvJMfB7SgYf1CavIkJIAqXrC9zuQNWVAAav8rVXx_0C21UUm-c", + "source_url": "https://lh7-us.googleusercontent.com/9iLRuiHNW66DDyP0pP-4xkiGmxcDp7D1a526AGyuTnMWbrX89YRxABC9iDkoKS0p-sQtOBAxCPzcb9Kvpd08gE6JHOCxNnEu7tnJLDpIRj2g8ME3jNcrimi8_HqJcIT9Bjd_2pZURwC0_Ts", "float": null, "caption": [ {