Aller au contenu

Flexible Content - Image + Text

Ce composant permet d’afficher une image à côté d’un texte. On peut choisir la proportion de l’image par rapport à la largeur totale, et la disposition (gauche ou droite du texte). En mobile, l’image est toujours affichée en premier, avec le texte en dessous. L’image peut être cliquable.

Exemples d'Image + Texte

Clavier Mac
Ce clavier brille dans le noir pour une utilisation nocturne

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar aliquam volutpat. Duis mattis tempor varius. Maecenas luctus arcu eget orci tincidunt elementum.

Proin at sodales leo. Morbi scelerisque, nulla sit amet tincidunt suscipit, lectus lorem sodales odio, ut imperdiet velit ipsum ut leo. Fusce fermentum nisl leo, a rhoncus tellus mollis non. Duis a leo lobortis, efficitur turpis vitae, tincidunt turpis.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Sed in semper ex, et iaculis nibh.

Phasellus tincidunt nisl sed fermentum ullamcorper. Nullam ultrices, velit a lobortis eleifend, mauris turpis luctus leo, id bibendum eros velit ut risus. Vivamus eget congue nibh.

Vivamus ultrices sapien quis mi posuere ultrices. Integer a consectetur diam, eget malesuada leo.

Etiam tristique dui venenatis erat commodo hendrerit. Vestibulum in massa commodo, mollis turpis nec, gravida neque. Donec pulvinar, ex nec dapibus sollicitudin, magna erat aliquet urna, sit amet tempus quam ex ac elit.

Etiam dignissim massa eu sem fringilla, eget condimentum neque vestibulum. Maecenas lobortis sollicitudin metus id sollicitudin. In ut magna non est posuere accumsan ut ut libero.

Aliquam ut felis sit amet mauris volutpat fringilla vitae nec nulla. Cras et justo convallis, tincidunt ipsum eu, condimentum eros. Ut aliquet lectus nec tellus mattis tempus.

Vue back office

Composant image et texte

Tutoriel

Appel du composant Image + Texte hors Flexible Content

PHP
<?= ifc_render_component'image-text', [
  
'image'          => $id// ID d'une image Wordpress
  
'image_url'      => ""// URL du lien sur l'image
  
'image_position' => 'left'// ou 'right'
  
'image_width'    => "1/2"// ou tiers, quarts, cinquièmes, sixièmes, septièmes ou huitièmes
  
'text'           => ""// Texte
  
'text_width'     => "1/2"// Complément à 1 de l'image_width
  
'classes'        => ""// Classes CSS supplémentaires
]) ?>