Skip to content
● Grav 2.2 is out: 2x faster cold starts and 96% less memory on big sites. Read the announcement →

Shortcode Owl Carousel Image Descriptions

Started by Muut Archive 10 years ago · 1 replies · 861 views
10 years ago

Can't figure out how to add image descriptions/names...does anybody know?

10 years ago

You mean text over the image? The docs have a sample:

HTML
[owl-carousel items=2 margin=10 loop=true]
<div style="background: url({{ page.media['image-1.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 1</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image-2.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 2</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image-3.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 3</h2>
  <p>foo</p>
</div>
[/owl-carousel]

I think the CSS provided with owl-carousel plugin should handle this. If you want other styling, you will need to add it.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 2572 9 years ago
Archive · by Muut Archive, 9 years ago
2 1692 9 years ago
Archive · by Muut Archive, 9 years ago
2 4985 9 years ago
Archive · by Muut Archive, 9 years ago
1 3810 9 years ago
Archive · by Muut Archive, 9 years ago
3 1802 9 years ago