Download "Embed":https://github.com/oscarotero/Embed/releases by Oscar Otero, rename the src folder to embed and paste it in your textpattern/vendors folder;

July 7, 2016 · View on GitHub

h1. oui_embed

"Embed":https://github.com/oscarotero/Embed everything…

Get information from any web page (using oembed, opengraph, twitter-cards, scrapping the html, etc). It's compatible with any web service (youtube, vimeo, flickr, instagram, etc) and has adapters to some sites like (archive.org, github, facebook, etc).

"Download":https://github.com/NicolasGraph/oui_embed/releases | "Donate":https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PREHX3MZMXEUN

h2. Table of contents

  • "Plugin requirements":#requirements
  • "Installation":#installation
  • "Preferences":#prefs
  • "Tags":#tags ** "oui_embed":#oui_embed ** "oui_embed_info":#oui_embed_info
  • "Examples":#examples ** "Single tag use":#single ** "Conatiner tag use":#container
  • "Styling":#styling
  • "Author":#author
  • "Licence":#licence

h2(#requirements). Plugin requirements

oui_embed’s minimum requirements:

h2(#installation). Installation

Download "Embed":https://github.com/oscarotero/Embed/releases by Oscar Otero, rename the src folder to embed and paste it in your textpattern/vendors folder;

paste the content of the plugin file under the Admin > Plugins, upload it and install.

h2(#prefs). Preferences

Visit the plugin prefs to add additional parameters or key needed for some providers.

h2(#tags). Tags

h3(#oui_embed). oui_embed

Single or container tag use to embed your stuff.

bc. <txp:oui_embed url="…" />

h4. Attributes

h5. Required

  • @url="…"@ - Default: unset - The url from which you want to get any information.

h5. Recommended

  • @cache_time="…"@ — Default: 0 - Duration of the cache in seconds; during this time the result of the tags request will be stored in the Txp cache folder and read from there, avoiding too many external requests.

h5. Optional

h6. Single tag use

  • @class="…"@ – Default: unset - The css class to apply to the HTML tag assigned to @wraptag@.
  • @type="…"@ – Default: code - The information to retrieve from the url feed. Valid values are title, description, url, type, tags, images, image, imageWidth, imageHeight, code, width, height, aspectRatio, authorName, authorUrl, providerName, providerUrl, providerIcons, providerIcon, publishedDate ("More informations":https://github.com/oscarotero/Embed).
  • @label="…"@ – Default: unset - The label used to entitled the generated content.
  • @labeltag="…"@ - Default: unset - The HTML tag used around the value assigned to @label@.
  • @responsive="…"@ - Default: unset - Uses a @div@ as wrapper if the @info@ attribute value is code and adds a @padding-top@ to it according to content ratio. You still need to "set the rest of the css rules":#styling. Useful for video embed.
  • @wraptag="…"@ - Default: ul - The HTML tag to use around the generated content.

h6. Container tag use

  • @class="…"@ – Default: unset - The css class to apply to the HTML tag assigned to @wraptag@.
  • @label="…"@ – Default: unset - The label used to entitled the generated content.
  • @labeltag="…"@ - Default: unset - The HTML tag used around the value assigned to @label@.
  • @wraptag="…"@ - Default: ul - The HTML tag to use around the generated content.

h5. Special

  • @hash_key="…"@ - Default: 194820 - A number used to hash the 32-character reference assigned to your query and to generate a key for your cache file (you shouldn't need to change that).

h3(#oui_embed_info). oui_embed_info

Single tag to use in a @oui_embed@ container tag.

bc. <txp:oui_embed url="…"> <txp:oui_embed_info info="…" /> </txp:oui_embed>

h4. Attributes

See @oui_embed@ optional attributes for single tag use.

h2(#example). Example

h3(#single). Single tag use

bc. <txp:oui_embed url="https://youtu.be/aVARdqevPfI" />

returns:

bc.

h3(#container). Container tag use

bc.. <txp:oui_embed url="https://vimeo.com/157562955" label="Embed" labeltag="h1"> <txp:oui_embed_info type="code" responsive="1" label="Video" labeltag="h2" /> <txp:oui_embed_info type="title" label="Title" labeltag="h2" wraptag="p" /> </txp:oui_embed>

p. returns:

bc..

Embed

Video

Title

The Uses of Envy

h2(#styling). Styling

h3. Responsive use

To make your embed content fit the width of its container and keep its ratio, use the @responsive@ attribute…

bc. <txp:oui_embed url="…" responsive="1" />

…and add the following css rules to your stylesheet.

bc.. .oui_embed // or your wrap class // { position: relative; width: 100%;

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

}

h2(#author). Author

"Nicolas Morand":https://github.com/NicolasGraph

h2(#licence). Licence

This plugin is distributed under "MIT license":https://opensource.org/licenses/MIT.