Textpattern CMS

#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

#2 2015-08-18 12:55:50

ruud

Developer Emeritus

From: a galaxy far far away

Registered: 2006-06-04

Posts: 5,068

Website

Re: plugin Owl Carousel

Did you follow the Howto for that plugin?
Please post the complete code for that page.

#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}

#4 2015-08-19 18:35:22

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,596

Website

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

#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?

#6 2015-08-19 18:57:59

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,596

Website

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

#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

#8 2015-08-20 06:40:08

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,596

Website

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:

1. 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).
2. 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

#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)

#10 2015-08-21 19:16:37

ruud

Developer Emeritus

From: a galaxy far far away

Registered: 2006-06-04

Posts: 5,068

Website

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.

#11 2015-08-21 19:58:04

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,596

Website

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