Tekst (met afbeeldingen)

Afbeeldingen integreren in tekst in de CKEditor... Eigenlijk tegen alle spelregels van Drupal, maar toch..

Nodige modules

  • IMCE
  • Insert
  • Inline image attach
  • Inline responsive Images
  • CKEditor Upload image
  • Background Images Formatter
  • Background rotate
  • Image resize filter
  • Simple Background image formatter
  • JQuery Auto height

Zonder extra modules te installeren

  • Swiper Coverflow
  • Ruitvoorstelling (diamond)

Deze afbeelding werd met de ingebouwde knop ingevoerd. Er is een formaatgreep beschikbaar onderaan.test Je kunt uitlijnen. We gebruiken de Image Resize Filter (op dit ogenblik enkel beschikbaar op Github) 

De foto is automatisch aangepast qua pixels..

Deze foto is dan weer met IMCE Ingevoerd. Ook daar kan men de pixels aanpassen. Er wordt een kopie aangemaakt zodanig dat je telkens weer kunt van afmetingen wijzigen.

rendering-2454658_960_720_0.jpg

Grote afbeeldingen zijn responsive in dit thema als je ze niet resized.

test

 

Deze afbeeldingen zijn met de Insert module ingevoerd.

Je kunt er een afbeeldingsstijl mee gebruiken.

Inline Image attach tekst

ttDeze afbeeldingen zijn op de gewone manier ingebracht in dit tekstveld. Automatisch worden de afbeeldingen ook opgeslagen in een afbeeldingsveld. Handig om later in views te gebruiken. Het werkt enkel met de ingebouwde imageuploader van CKEditor, niet met IMCE 

 

 

 

tt

 

Inline attach afb
Achtergrond afbeelding
Tekst met achtergrondafb

Dit is tekst met een achtergrondfiguur. Background images formatter zorgt daar voor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Donec fermentum, felis non elementum fermentum, tortor nulla dapibus justo, quis tristique massa lorem quis enim. In a ligula molestie, mattis lacus quis, tristique nulla. Integer eros quam, sagittis vel mollis eget, pretium at eros. Vestibulum mauris neque, porttitor vitae pellentesque quis, tincidunt quis nibh. Quisque vel cursus sem. Morbi aliquam lacus vel consequat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Donec fermentum, felis non elementum fermentum, tortor nulla dapibus justo, quis tristique massa lorem quis enim. In a ligula molestie, mattis lacus quis, tristique nulla. Integer eros quam, sagittis vel mollis eget, pretium at eros. Vestibulum mauris neque, porttitor vitae pellentesque quis, tincidunt quis nibh. Quisque vel cursus sem. Morbi aliquam lacus vel consequat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rotatie achtergrond

Deze tekst heeft een achtergrond die na een minuut zal wijzigen als je de pagina weer bezoekt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Donec fermentum, felis non elementum fermentum, tortor nulla dapibus justo, quis tristique massa lorem quis enim. In a ligula molestie, mattis lacus quis, tristique nulla. Integer eros quam, sagittis vel mollis eget, pretium at eros. Vestibulum mauris neque, porttitor vitae pellentesque quis, tincidunt quis nibh. Quisque vel cursus sem. Morbi aliquam lacus vel consequat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Donec fermentum, felis non elementum fermentum, tortor nulla dapibus justo, quis tristique massa lorem quis enim. In a ligula molestie, mattis lacus quis, tristique nulla. Integer eros quam, sagittis vel mollis eget, pretium at eros. Vestibulum mauris neque, porttitor vitae pellentesque quis, tincidunt quis nibh. Quisque vel cursus sem. Morbi aliquam lacus vel consequat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Afbeeldingen plakken

Een straffe module...CKEditor upload image. Je moet niet meer uploaden. Gewoon plakken van uit de verkenner van je computer. Het ding wordt automatisch opgeslagen. Om veiligheidsredenen kan je niet van websites plakken blijkbaar...Chrome doet het zelfs niet vanuit je eigen computer.

Gouden tip. Doe via de broncode de hoogte van de afbeelding weg. Zo blijft hij mooi zijn verhouding behouden in elke schermbreedte.

image

image

Swiper Coverflow
 
 
 
 
 
tekst met simple achtergrond

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Donec fermentum, felis non elementum fermentum, tortor nulla dapibus justo, quis tristique massa lorem quis enim. In a ligula molestie, mattis lacus quis, tristique nulla. Integer eros quam, sagittis vel mollis eget, pretium at eros. Vestibulum mauris neque, porttitor vitae pellentesque quis, tincidunt quis nibh. Quisque vel cursus sem. Morbi aliquam lacus vel consequat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

Donec fermentum, felis non elementum fermentum, tortor nulla dapibus justo, quis tristique massa lorem quis enim. In a ligula molestie, mattis lacus quis, tristique nulla. Integer eros quam, sagittis vel mollis eget, pretium at eros. Vestibulum mauris neque, porttitor vitae pellentesque quis, tincidunt quis nibh. Quisque vel cursus sem. Morbi aliquam lacus vel consequat hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis posuere vestibulum. Vivamus ac libero nulla. Duis facilisis non libero eu porta. Phasellus dictum laoreet odio eget egestas. Curabitur ut risus sit amet nisi maximus blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sed sapien vulputate, pretium elit a, vehicula leo.

JQuery autoheight
There are many patterns.. Lorem Ipsum is simply dummy text of the printing and typesetting..rendering-2454658_960_720_0.jpg
The standard chunk of Lorem Ipsum..model-2591828_960_720.jpg
Cicero are also reproduced in their exact original form, accompanied by English versions..
All the Lorem Ipsum generators on the Internet tend to..dandelion-2315284_960_720.jpg
The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic..
Diamond
dit is tekst
tekst