Media

Repetitive components for blog comments, tweets, etc.

How To

  1. Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.
Simple Example

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

The default media displays a media object (images, video, audio) to the left or right of a content block.

Logi XML
<Division Class="media" HtmlDiv="True">
  <Division Class="media-left" HtmlDiv="True">
    <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="media-object" />
  </Division>
  <Division Class="media-body" HtmlDiv="True">
    <Label Caption="Top aligned media" Class="mt-0" HtmlTag="H5" />
    <Label Caption="..." />
  </Division>
</Division>
Media Image Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.

Media Top Alignment
Top aligned media

Lorem ipsum dolor sit amet, usu no laboramus instructior, essent instructior ea mea. Labores similique ius id. Sea explicari constituto id. Eligendi delectus vis an, erant civibus et qui. Cum veniam constituam definitiones cu, id usu liber aliquid definiebas. Dignissim rationibus complectitur est no, adhuc aeterno delicatissimi ad eam, aliquid molestie te nec. Ea soleat philosophia ius, in elitr graece causae vel. Eos perfecto temporibus eu. An justo habemus usu. In nulla voluptua conclusionemque sit, sea impedit nominavi similique ad. Tation omnium pertinacia quo et, nec tantas inimicus ne, te cibo zril argumentum nec. Error latine mandamus ad pri. Has suscipit salutatus ei, quaeque disputationi eam ad. Oratio commune id ius, probo referrentur mea at. Usu ea decore mediocrem imperdiet, debet detraxit neglegentur id vel, an duo summo philosophia. Dolor cetero maiorum est id. Per eius nobis in, in mutat tibique qualisque mei. Quot soluta sit an, no duo wisi suscipit. Est ei utinam vivendo, id enim harum nam, verear delenit duo in. Vim te possit disputationi, nam fierent patrioque dissentias ex. Velit doctus in mel, vix ad iusto aliquid invidunt, ex quidam vivendo intellegat sea. Te impetus oblique apeirian pri, nam ubique quaestio ea. Viris timeam viderer vim te.

<Division Class="media" HtmlDiv="True">
  <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="d-flex align-self-start mr-3 img-thumbnail" />
  <Division Class="media-body" HtmlDiv="True">
    <Label Caption="Top aligned media" Class="mt-0" HtmlTag="H5" />
    <Label Caption="..." HtmlTag="P" />
  </Division>
</Division>
<Division Class="media" HtmlDiv="True"> <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="d-flex align-self-start mr-3 img-thumbnail" /> <Division Class="media-body" HtmlDiv="True"> <Label Caption="Top aligned media" Class="mt-0" HtmlTag="H5" /> <Label Caption="..." HtmlTag="P" /> </Division> </Division>
Media Middle Alignment
Middle aligned media

Lorem ipsum dolor sit amet, usu no laboramus instructior, essent instructior ea mea. Labores similique ius id. Sea explicari constituto id. Eligendi delectus vis an, erant civibus et qui. Cum veniam constituam definitiones cu, id usu liber aliquid definiebas. Dignissim rationibus complectitur est no, adhuc aeterno delicatissimi ad eam, aliquid molestie te nec. Ea soleat philosophia ius, in elitr graece causae vel. Eos perfecto temporibus eu. An justo habemus usu. In nulla voluptua conclusionemque sit, sea impedit nominavi similique ad. Tation omnium pertinacia quo et, nec tantas inimicus ne, te cibo zril argumentum nec. Error latine mandamus ad pri. Has suscipit salutatus ei, quaeque disputationi eam ad. Oratio commune id ius, probo referrentur mea at. Usu ea decore mediocrem imperdiet, debet detraxit neglegentur id vel, an duo summo philosophia. Dolor cetero maiorum est id. Per eius nobis in, in mutat tibique qualisque mei. Quot soluta sit an, no duo wisi suscipit. Est ei utinam vivendo, id enim harum nam, verear delenit duo in. Vim te possit disputationi, nam fierent patrioque dissentias ex. Velit doctus in mel, vix ad iusto aliquid invidunt, ex quidam vivendo intellegat sea. Te impetus oblique apeirian pri, nam ubique quaestio ea. Viris timeam viderer vim te.

<Division Class="media" HtmlDiv="True"> <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="d-flex align-self-center mr-3 img-thumbnail" /> <Division Class="media-body" HtmlDiv="True"> <Label Caption="Middle aligned media" Class="mt-0" HtmlTag="H5" /> <Label Caption="..." HtmlTag="P" /> </Division> </Division>
<Division Class="media" HtmlDiv="True">
  <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="d-flex align-self-center mr-3 img-thumbnail" />
  <Division Class="media-body" HtmlDiv="True">
    <Label Caption="Middle aligned media" Class="mt-0" HtmlTag="H5" />
    <Label Caption="..." HtmlTag="P" />
  </Division>
</Division>
Media Bottom Alignment
Bottom aligned media

Lorem ipsum dolor sit amet, usu no laboramus instructior, essent instructior ea mea. Labores similique ius id. Sea explicari constituto id. Eligendi delectus vis an, erant civibus et qui. Cum veniam constituam definitiones cu, id usu liber aliquid definiebas. Dignissim rationibus complectitur est no, adhuc aeterno delicatissimi ad eam, aliquid molestie te nec. Ea soleat philosophia ius, in elitr graece causae vel. Eos perfecto temporibus eu. An justo habemus usu. In nulla voluptua conclusionemque sit, sea impedit nominavi similique ad. Tation omnium pertinacia quo et, nec tantas inimicus ne, te cibo zril argumentum nec. Error latine mandamus ad pri. Has suscipit salutatus ei, quaeque disputationi eam ad. Oratio commune id ius, probo referrentur mea at. Usu ea decore mediocrem imperdiet, debet detraxit neglegentur id vel, an duo summo philosophia. Dolor cetero maiorum est id. Per eius nobis in, in mutat tibique qualisque mei. Quot soluta sit an, no duo wisi suscipit. Est ei utinam vivendo, id enim harum nam, verear delenit duo in. Vim te possit disputationi, nam fierent patrioque dissentias ex. Velit doctus in mel, vix ad iusto aliquid invidunt, ex quidam vivendo intellegat sea. Te impetus oblique apeirian pri, nam ubique quaestio ea. Viris timeam viderer vim te.

<Division Class="media" HtmlDiv="True">
  <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="d-flex align-self-end mr-3 img-thumbnail" />
  <Division Class="media-body" HtmlDiv="True">
    <Label Caption="Bottom aligned media" Class="mt-0" HtmlTag="H5" />
    <Label Caption="..." HtmlTag="P" />
  </Division>
</Division>
<Division Class="media" HtmlDiv="True"> <Image Caption="_SupportFiles/favicon/apple-touch-icon.png" Class="d-flex align-self-end mr-3 img-thumbnail" /> <Division Class="media-body" HtmlDiv="True"> <Label Caption="Bottom aligned media" Class="mt-0" HtmlTag="H5" /> <Label Caption="..." HtmlTag="P" /> </Division> </Division>
Media List
Example
  • Heading 1

    Lorem ipsum dolor sit amet, usu no laboramus instructior, essent instructior ea mea. Labores similique ius id. Sea explicari constituto id. Eligendi delectus vis an, erant civibus et qui. Cum veniam constituam definitiones cu, id usu liber aliquid definiebas. Dignissim rationibus complectitur est no, adhuc aeterno delicatissimi ad eam, aliquid molestie te nec. Ea soleat philosophia ius, in elitr graece causae vel. Eos perfecto temporibus eu. An justo habemus usu. In nulla voluptua conclusionemque sit, sea impedit nominavi similique ad. Tation omnium pertinacia quo et, nec tantas inimicus ne, te cibo zril argumentum nec. Error latine mandamus ad pri. Has suscipit salutatus ei, quaeque disputationi eam ad. Oratio commune id ius, probo referrentur mea at. Usu ea decore mediocrem imperdiet, debet detraxit neglegentur id vel, an duo summo philosophia. Dolor cetero maiorum est id. Per eius nobis in, in mutat tibique qualisque mei. Quot soluta sit an, no duo wisi suscipit. Est ei utinam vivendo, id enim harum nam, verear delenit duo in. Vim te possit disputationi, nam fierent patrioque dissentias ex. Velit doctus in mel, vix ad iusto aliquid invidunt, ex quidam vivendo intellegat sea. Te impetus oblique apeirian pri, nam ubique quaestio ea. Viris timeam viderer vim te.

  • Heading 2

    Cum veniam constituam definitiones cu, id usu liber aliquid definiebas. Dignissim rationibus complectitur est no, adhuc aeterno delicatissimi ad eam, aliquid molestie te nec. Ea soleat philosophia ius, in elitr graece causae vel. Eos perfecto temporibus eu. An justo habemus usu. In nulla voluptua conclusionemque sit, sea impedit nominavi similique ad. Tation omnium pertinacia quo et, nec tantas inimicus ne, te cibo zril argumentum nec. Error latine mandamus ad pri. Has suscipit salutatus ei, quaeque disputationi eam ad. Oratio commune id ius, probo referrentur mea at. Usu ea decore mediocrem imperdiet, debet detraxit neglegentur id vel, an duo summo philosophia. Dolor cetero maiorum est id. Per eius nobis in, in mutat tibique qualisque mei. Quot soluta sit an, no duo wisi suscipit. Est ei utinam vivendo, id enim harum nam, verear delenit duo in. Vim te possit disputationi, nam fierent patrioque dissentias ex. Velit doctus in mel, vix ad iusto aliquid invidunt, ex quidam vivendo intellegat sea. Te impetus oblique apeirian pri, nam ubique quaestio ea. Viris timeam viderer vim te.

<DataList Class="list-unstyled" ID="listDefault" Ordered="False">
  <DataLayer ID="sdlDefault" Type="Static">
    <StaticDataRow content="..." content2="..." heading="Heading 1" image="favicon/apple-touch-icon.png" />
    <StaticDataRow content="..." content2="..." heading="Heading 2" image="favicon/apple-touch-icon.png" />
  </DataLayer>
  <ListItem Class="media">
    <Image Caption="[at]Data.image[tilde]" Class="d-flex mr-3 img-thumbnail" />
    <Division Class="media-body" HtmlDiv="True">
      <Label Caption="[at]Data.heading[tilde]" Class="media-body" HtmlTag="H5" />
      <Label Caption="[at]Data.content[tilde]" HtmlTag="P" />
      <Label Caption="[at]Data.content2[tilde]" HtmlTag="P" />
    </Division>
  </ListItem>
</DataList>
<DataList Class="list-unstyled" ID="listDefault" Ordered="False"> <DataLayer ID="sdlDefault" Type="Static"> <StaticDataRow content="..." content2="..." heading="Heading 1" image="favicon/apple-touch-icon.png" /> <StaticDataRow content="..." content2="..." heading="Heading 2" image="favicon/apple-touch-icon.png" /> </DataLayer> <ListItem Class="media"> <Image Caption="[at]Data.image[tilde]" Class="d-flex mr-3 img-thumbnail" /> <Division Class="media-body" HtmlDiv="True"> <Label Caption="[at]Data.heading[tilde]" Class="media-body" HtmlTag="H5" /> <Label Caption="[at]Data.content[tilde]" HtmlTag="P" /> <Label Caption="[at]Data.content2[tilde]" HtmlTag="P" /> </Division> </ListItem> </DataList>