Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2015-08-18 12:17:53
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
plugin Owl Carousel
Hi the section articulates “arrivals” I have planned him with the plugin owl-carousel.
I have written the following code:
<div class="arrivi">
<txp:article_custom section="arrivi" limit="20">
<div id="owl-example" class="owl-carousel">
<div>
<txp:article_image escape="" thumbnail="1" />
<txp:excerpt />
</div>
</div> <!--owl-example-->
</txp:article_custom>
</div> <!--arrivi-->
I believe to have mistaken something since that doesn’t come that wanted
_EDIT: show code properly
Offline
Re: plugin Owl Carousel
Did you follow the Howto for that plugin?
Please post the complete code for that page.
Offline
#3 2015-08-19 12:54:03
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,304
Re: plugin Owl Carousel
pierlu wrote #294195:
that doesn’t come that wanted
Don’t let us stumble about in the dark. Describe what you expected to come and how that failed.
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: plugin Owl Carousel
I’m guessing – but this may be what you want:
<div class="arrivi">
<!-- this is the containing own-carousel div -->
<div id="owl-example" class="owl-carousel">
<!-- this is the repeating div for each article in the carousel -->
<txp:article_custom section="arrivi" limit="20">
<div>
<txp:article_image escape="" thumbnail="1" />
<txp:excerpt />
</div>
</txp:article_custom>
</div> <!-- /.owl-example -->
</div> <!-- /.arrivi -->
You had the article_custom
around the containing div#owl-example
, so you get lots of multiple new carousels instead of one carousel with separate article previews.
TXP Builders – finely-crafted code, design and txp
Offline
#5 2015-08-19 18:51:27
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: plugin Owl Carousel
If I wanted to add the body to the various articles so that cliccando on the photo does it open me the whole article, is it late? how does he do?
Offline
Re: plugin Owl Carousel
Not sure if I understood you correctly. If you mean, how can you make each article preview link to the full article, use txp:permlink
around the items that should be clickable, e.g.:
<!-- this is the repeating div for each article in the carousel -->
<txp:article_custom section="arrivi" limit="20">
<div>
<txp:permlink>
<txp:article_image escape="" thumbnail="1" />
</txp:permlink>
<txp:excerpt />
</div>
</txp:article_custom>
If you just want the whole body to show instead of the excerpt, use <txp:body />
in place of <txp:excerpt />
.
TXP Builders – finely-crafted code, design and txp
Offline
#7 2015-08-19 19:33:12
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: plugin Owl Carousel
in the plugin “carousel” I have the photo with under the excerpt, I would want that when him clicca on the photo (of the article) opens the page with the body
Offline
Re: plugin Owl Carousel
Did you try the code I posted? That should do what you want. This is the code all together:
<div class="arrivi">
<!-- this is the containing own-carousel div -->
<div id="owl-example" class="owl-carousel">
<!-- this is the repeating div for each article in the carousel -->
<txp:article_custom section="arrivi" limit="20">
<div>
<txp:permlink>
<txp:article_image escape="" thumbnail="1" />
</txp:permlink>
<txp:excerpt />
</div>
</txp:article_custom>
</div> <!-- /#owl-example -->
</div> <!-- /.arrivi -->
The main differences to your original code are:
- Wrap
txp:article
around the bit of code you want to repeat for each article. Here the wrapper containing div is not included. (see further note below). - Wrap
txp:permlink
around the item that should link to the main article. You can also construct your own links if you prefer: See Examples 1 and 3 in the docs
If you don’t need the #owl-example id attribute for owl-carousel, you can simplify the code further by using the wraptag
, class
, and break
attributes like this (see the docs):
<div class="arrivi">
<!-- the article_custom tag makes the wrapper div, and also wraps each repeating item with a div -->
<txp:article_custom section="arrivi" limit="20" wraptag="div" class="owl-carousel" break="div">
<!-- this bit is just the repeating content that changes with each post -->
<txp:permlink>
<txp:article_image escape="" thumbnail="1" />
</txp:permlink>
<txp:excerpt />
</txp:article_custom>
</div> <!-- /.arrivi -->
The advantage here is that if there are no articles in the “arrivi” section, the entire carousel will not show. Because the carousel no longer has an id (article_custom can’t put one in there with the attribute), you’ll need to start the carousel via the class and not the id, so your javascript/jQuery will need to look like this:
$(document).ready(function() {
$(".owl-carousel").owlCarousel();
});
TXP Builders – finely-crafted code, design and txp
Offline
#9 2015-08-21 17:19:58
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: plugin Owl Carousel
I have written the following code:
<div class="arrivi">
<!-- this is the containing own-carousel div -->
<txp:if_article_list>
<div id="owl-example" class="owl-carousel">
<!-- this is the repeating div for each article in the carousel -->
<txp:article_custom section="arrivi" limit="20">
<div>
<txp:permlink>
<txp:article_image escape="" thumbnail="1" />
</txp:permlink>
<txp:excerpt />
</div>
<txp:else/>
<txp:body />
</txp:article_custom>
</txp:if_article_list>
</div> <!-- /#owl-example -->
</div> <!-- /.arrivi -->
Only that when click on the various imgs comes me an empty pag, because?
edit: made code readable (Ruud)
Offline
Re: plugin Owl Carousel
Apart from the improper nesting of div tags (the closing div for #owl-example should be above the closing if_article_list tag), I wonder what the resulting HTML code is when you view that page and what happens if you disable that plugin… because if you’re getting a blank page, it could be that this also happens without the plugin.
Offline
Re: plugin Owl Carousel
I may be mistaken, but I don’t think you can use txp:else
for article_custom
. If you wanted it for if_article_list
do this:
<div class="arrivi">
<txp:if_article_list>
<!-- this is the containing own-carousel div -->
<div id="owl-example" class="owl-carousel">
<!-- this is the repeating div for each article in the carousel -->
<txp:article_custom section="arrivi" limit="20">
<div>
<txp:permlink>
<txp:article_image escape="" thumbnail="1" />
</txp:permlink>
<txp:excerpt />
</div>
</txp:article_custom>
</div> <!-- /#owl-example -->
<txp:else/>
<txp:body />
</txp:if_article_list>
</div> <!-- /.arrivi -->
I assumed (because you are using txp:article_custom
) that this appears on another section’s template, so how the full articles display is determined by the template for the arrivi section.
If this template is for the arrivi section, then you can use the normal txp:article
with the form
and listform
attributes…
TXP Builders – finely-crafted code, design and txp
Offline
Pages: 1