SOLVED Trouble adding a class to Owl Carousel Item
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
I have modified the owlcarousel.yaml file to add an 'itemclass' as follows:
.buttonclass: type: input.text label: Button Class description: Input the button class. default: 'button-outline' .itemclass: type: input.text label: Item Class description: Input the item class. default: 'item-outline'
This does display in the Owl Carousel Item details and I can add an item class. It does retain what I have entered.
I have modified the owlcarousel.html.twig file to add the new 'itemclass' field as follows (noticed the 'z' in front and behind the code to insert the item class field (cloned / modified from the button class):
<div id="g-owlcarousel-{{ id }}" class="g-owlcarousel owl-carousel {% if particle.imageOverlay == 'enable' %}has-color-overlay{% endif %}"> {% for item in particle.items %} <div class="g-owlcarousel-item owl-item z{{ item.itemclass|e }}z"> <div class="g-owlcarousel-item-wrapper"> <div class="g-owlcarousel-item-img"> <img src="{{ url(item.image)|e }}" alt="{{ item.title|e }}" /> </div> <div class="g-owlcarousel-item-content-container"> <div class="g-owlcarousel-item-content-wrapper"> <div class="g-owlcarousel-item-content"> {% if item.title %} <h1 class="g-owlcarousel-item-title">{{ item.title|raw }}</h1>{% endif %} {% if item.desc %} <h2 class="g-owlcarousel-item-desc">{{ item.desc|raw }}</h2>{% endif %} {% if item.link %} <div class="g-owlcarousel-item-link"> <a target="_self" class="g-owlcarousel-item-button button {{ item.buttonclass|e }}" href="{{ item.link|e }}"> {{ item.linktext|raw }} </a> </div> {% endif %} </div> </div> </div> </div> </div> {% endfor %} </div>
Here is the rendered HTML code - noticed the 'zz' class which is the beginning 'z' and the ending 'z' so I know it's recognizing my code but just not inserting the field content.
<div class="g-owlcarousel-item owl-item zz"> <div class="g-owlcarousel-item-wrapper"> <div class="g-owlcarousel-item-img"> <img src="/newdesign/images/banners/bg-author-1800x1280.jpg?58dd7caf" alt="&nbsp;"> </div> <div class="g-owlcarousel-item-content-container"> <div class="g-owlcarousel-item-content-wrapper"> <div class="g-owlcarousel-item-content"> <h1 class="g-owlcarousel-item-title"> </h1> <h2 class="g-owlcarousel-item-desc"><span class="owlcarousel-name width100 text-left fontsize-150 w3-animate-right">Author</span><br><span class="owlcarousel-subtitle width100 text-left w3-animate-left"><span class="text-uppercase">Young Adult - Women’s Literature - Non-Fiction</span><br><small> Escape the day to day with a space trip, some humorous romance, or a dose of comically real life.</small></span></h2> <div class="g-owlcarousel-item-link"> <a target="_self" class="g-owlcarousel-item-button button button-outline" href="https://kathryndfuller.com/newdesign/index.php?option=com_content&view=article&id=27"> Read More </a> </div> </div> </div> </div> </div> </div>
Can you tell me what I need to do in order to assign a class to each individual Owl Carousel item?
Thanks.
Luke - Last Edit: 8 years 3 weeks ago by Luke Douglas.
- Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Please post your URL, Username and Password in Secure Tab and i will take a look and maybe figure out what the problem is.
For posting sensitive information you hit the Blue Reply Button and then you will see Secure Tab. Post all info that is sensitive in there, only Fellow Mods, Staff and I can see that! - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Damir,
I have checked the indentation in the YAML file and it is all spaces, no tabs. It matches up with what was originally there for the button class (which I simply copied, pasted and changed).
Correct me if I am wrong but the only files I have to change to add a new field is the YAML and the TWIG. Is that correct? - Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- The Admin Tools blocked me, can you disable them maybe for a little so i can take a look.. Yes that is correct YAML and TWIG.
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Damir,
I have disabled 'all' AdminTools add-on's (plugins / component).
Luke - Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
Hmm still cant get in in what country are you located? Do you have any firewall on the hosting control panel?
This image is hidden for guests.
Please log in or register to see it. - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Damir,
I have the ConfigServer firewall on my server. If you can provide me with the IP's to whitelist, I'll be glad to add them. If necessary, I can disable it for a short while but it's been doing such a great job, I really hate to do that.
- Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Well i am on dynamic address but this one is current i use VPN so i will be on it for say 3 hours if you still online.
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Damir,
I allowed all ranges for the last two sets so you should be good to go even if your IP is changed as most assignments are in certain ranges. - Just another old hacker!
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Can you turn it off tomorrow?
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
Time to create page: 0.077 seconds