as I'm trying to customize a Hugo template, I'm trying to make the scrolling logos move faster (see the picture below), meaning they can change every 2 seconds or so.
Here is the picture of the template that I'm trying to make changes to.
Also, you can refer to the full template here: https://docs.gethugothemes.com/copper/
I'm new to Hugo so I'm not sure how can I make changes to the default state.
If I go into the Hugo code, here is the carousel that belongs to the logo images. So basically I have to make changes to it. Does anyone know how to make the logos move faster?
clients_logo_slider:
enable: false
logos:
- images/brands/01-colored.png
- images/brands/02-colored.png
- images/brands/03-colored.png
- images/brands/04-colored.png
- images/brands/05-colored.png
- images/brands/06-colored.png
- images/brands/01-colored.png
- images/brands/02-colored.png
- images/brands/03-colored.png
- images/brands/04-colored.png
- images/brands/05-colored.png
- images/brands/06-colored.png
You need to add your changes into theme. I found carousel by the path themes/copper/layouts/partials/testimonial.html:
<!-- start of brand-carousel -->
{{ if $data.homepage.clients_logo_slider.enable }}
{{ with $data.homepage.clients_logo_slider }}
<section class="section-padding bg-white overflow-hidden">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-9 text-center mb-30">
<span class="section-title fw-extra-bold fs-36">{{ .title | markdownify }}</span>
</div>
</div>
<div class="row">
<div class="col-md-12" data-aos="fade-left">
<div class="brand-carousel">
{{ range .logos }}
<div class="brand-item d-flex align-items-center justify-content-center">
<img class="img-fluid" src="{{ . |absURL}}" alt=""></div>
{{ end }}
</div>
</div>
</div>
</div>
</section>
{{ end }}
{{ end }}
<!-- end of brand-carousel -->
Here I see css class <div class="brand-carousel">
And logic I found by the path themes/copper/assets/js/script.js:
// brandCarousel fix
function brandCarousel() {
$('.brand-carousel').slick({
dots: false,
arrows: false,
infinite: true,
speed: 500,
autoplay: true,
autoplaySpeed: 3000,
mobileFirst: true,
slidesToScroll: 1,
responsive: [{ ...
So, function brandCarousel() take div with class .brand-carousel and make it slick. I didn't check it, but I recommend you try to change some of this option, and start with autoplaySpeed.
Related
I am trying to write code in “moto” list.html section. I would like to display all pages from “auta” section with paging. So, I need to display posts from another section with paging.
I use hugo v0.96.
I am not sure, why it’s not working with paging.
Not working code with paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ $paginator := .Paginate $cars }}
{{ range $paginator.Pages}}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Working code without paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ range $cars }}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Where’s the problem?
Please, help me. Thank you very much
The problem has been solved. .Paginate can be only one time on same page.
I had .Paginate in header (out of this code). And it's not posibble override (by official docs of Hugo)
I am using React, Redux and Bootstrap setup. I am building book website that have different tabs in that tabs are items(books) that have the same id through the different tabs. All my data is stored in a store and passed down to panel like so: TabsContainer(here I filter the books and pass down via props)->[All, Favorites, ...]->List of Books (all the same for every one) -> Book (all the same).
It is hard to post all the code and also basic concepts since I don't have idea what could be wrong. I instead post the result.
This is where it is ok. I can also fix the bug by resizing the window, but then it bugges the other 4 tabs.
This is clearly a bug. Bugg happens always when I move aways from inital tab.
What could be wrong? Should I set different keys? But if I understand correctly the react would do necessary rendering.
Update Found the root of the evil is the react Equalizer that I used to match column sizes (bootstrap responsive) so that button row appeared on the bot. I believe that has to do with incompatibility with React. So the problem now is how to put button row on the bottom of the panel.
<div className="col-md-12 col-lg-6">
<div className="panel panel-default no-padding">
<div className="panel-body contentRow" style={book_item.mainContainer}>
<Equalizer>
<div className="col-xs-12 col-sm-6" style={book_item.imageContainer}>
<div>
<FavoriteIcon reading={reading} style={book_item.favorites}
onFavoriteChanged={this.onFavoriteChanged}/>
<Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}>
<img
src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'}
height="210px" style={book_item.bookImage}/>
</Link>
</div>
</div>
<div className="col-xs-12 col-sm-6" style={book_item.textContainer}>
<div className="bookTitle">
<strong>{reading.book.title}</strong><br/>
</div>
<div className="bookSubtitle">
{(() => {
if (reading.book.subtitle)
return (<div><em>{reading.book.subtitle}</em> <br/></div>);
})()}
</div>
<div className="bookAuthors">
<div>{authors ? authors : "Unknown author"}<br/></div>
</div>
<div className="bookDescription hidden-xs" style={book_item.bookDescription}>
{truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")}
</div>
<div className="bookTags hidden-xs row" style={book_item.bookTags}>
{reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)}
</div>
<div className="buttonRow"
style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary"
handleClick={this.onReadingDelete} style={book_item.buttonRemove} />
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/>
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/>
</div>
</div>
</div>
</Equalizer>
</div>
</div>
</div>
Creator of react-equalizer here. It is possibly an issue with the equalization happening before the image is loaded. I just published a new verion that fixes this issue (1.0.5).
Here is a working example with react-bootstrap tabs:
http://jsbin.com/mayanakiqo/edit?js,output
class MyComponent extends React.Component {
render() {
let colStyles = {
float: 'left',
width: '50%',
padding: '10px',
background: '#ddd',
border: '4px solid white',
boxSizing: 'border-box'
}
return (
<div>
<Tabs defaultActiveKey={2}>
<Tab eventKey={1} title="Tab 1">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={2} title="Tab 2">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={3} title="Tab 3">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
</Tabs>
</div>
)
}
}
The other option would be to use flexbox to equalize the heights see https://codepen.io/imohkay/pen/gpard for example however it will depend on what browsers you need to support.
I think before answering this there are some things we need to know:
1. Do these Bootstrap tabs implement some sort of non-React JavaScript in terms of switching between them? I know that Bootstrap not only provides CSS files for installation, but it also can provide some JavaScript too to use some of its components.
2. I am guessing that in the pictures you posted, you are navigating from the Favorites Tab, to the All tab? If so, what SHOULD the All tab show? (It is possible that it is actually rendering the intended elements, and it is just the css that is making it look wrong.)
3. If the top two points are not the source of the problem, then we will need to see some code, at least for the render functions of the components involved, as well as what their states look like.
In ionic i want to show multiple images in a single row. right now it shows only one image that took the entire width.My requirement is showing below as an image
ion-slidebox is deprecated. Use ion-slides that uses Swiper. The minimum IONIC version required would be 1.2.
Here's a post I wrote that you could use to implement it
Btw, ion-slides uses the awesome SwiperJs, so for your requirement, in your controller when you define the swiper, you could just use their slidesPerView and set it to a number of slides that you want to show like below!
$scope.swiperOptions = {
/* Whatever options */
effect: 'slide',
initialSlide: 0,
slidesPerView: 3,
/* Initialize a scope variable with the swiper */
onInit: function(swiper){
$scope.swiper = swiper;
// Now you can do whatever you want with the swiper
},
onSlideChangeEnd: function(swiper){
console.log('The active index is ' + swiper.activeIndex);
}
};
</div>
<ion-slide ng-controller="HomeCtrl" ng-init="';ary1=[0,1,2];ary2=[3,4,5];ary3=[6,7,8]">
<ion-slide-box show-pager="false" auto-play="false" style="width:100%" does-continue="false">
<ion-slide ng-repeat="i in [1,2,3]" style="height:180px;">
<div ng-if="i==1" ng-repeat="n in ary1" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
<div ng-if="i==2" ng-repeat="n in ary2" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
<div ng-if="i==3" ng-repeat="n in ary3" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-slide>
I have a list of search options grouped by their section and collapsed using accordion. The user expands a section and drags their selections to the "Saved List". These fields are saved and used for custom columns on tables in my site. Everything is working quite nicely except for a couple minor things.
I want to lock down the parents (Personal, Education, Subject) and only have the li elements inside be draggable. Right now the user can drag the whole group to the top which isn't desirable because I have a limit of fields they can search. Dragging a whole section can exceed that limit and break my tables.
In IE, after collapsing a parent, the li elements "blip" visible for a second before becoming hidden.
Not a huge deal but can be annoying, especially to some of my finicky users :)
Code is below. For styling see the Fiddle of my setup.
I've gotten to the point where I can't see the forests for the trees so if I could just be pointed in the right direction, that would be much appreciated!
HTML:
<div class="demo">
<div id="swaplist" style="height: 0;"></div>
<ul id="sortable2" class='saved'>
<div class="container" style="overflow:auto;">
<div align='center'>
<h2>Saved List</h2>
</div>
<div class="group"></div>
</div>
</ul>
<br />
<ul id="sortable1" class='available'>
<div align='center'>
<h2>Available Fields</h2>
</div>
<br />
<div id="accordion" style="width:950px;">
<div class="group">
<h2><span class="text">Personal</span></h2>
<div class="container">
<ul id="sortable1" class='available' style="width:850px;">
<li class='ui-state-default'><b>First Name</b>
<br />Section: A</li>
<li class='ui-state-default'><b>Last Name</b>
<br />Section: A</li>
<li class='ui-state-default'><b>Date of Birth</b>
<br />Section: A</li>
</ul>
</div>
</div>
<br />
<div class="group">
<h2><span class="text">Education</span></h2>
<div class="container">
<ul id="sortable1" class='available' style="width:850px;">
<li class='ui-state-default'><b>Associate's</b>
<br />Section: B</li>
<li class='ui-state-default'><b>Bachelor's</b>
<br />Section: B</li>
<li class='ui-state-default'><b>Master's</b>
<br />Section: B</li>
<li class='ui-state-default'><b>Doctorate</b>
<br />Section: B</li>
<li class='ui-state-default'><b>Other</b>
<br />Section: B</li>
</ul>
</div>
</div>
<br />
<div class="group">
<h2><span class="text">Subject</span></h2>
<div class="container">
<ul id="sortable1" class='available' style="width:850px;">
<li class='ui-state-default'><b>Science</b>
<br />Section: C</li>
<li class='ui-state-default'><b>Business</b>
<br />Section: C</li>
<li class='ui-state-default'><b>Liberal Arts</b>
<br />Section: C</li>
</ul>
</div>
</div>
<br />
</div>
<!-- End accordion -->
</ul>
<br clear="both" />
</div>
javascript:
$(function () {
$("#accordion")
.accordion({
active: false,
collapsible: true,
animate: false,
heightStyle: "content",
autoHeight: false,
header: "> div > h2"
})
.sortable({
axis: "y",
handle: "h2",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h2").triggerHandler("focusout");
}
});
$("ul.available").sortable({
connectWith: "ul",
scroll: true,
helper: 'clone', //keeps children visible when pulling out of container
appendTo: '#swaplist' //temporarily stores children in hidden div
});
$("ul.saved").sortable({
connectWith: "ul",
receive: function (event, ui) {
if ($(this).children().length > 9) {
//ui.sender: will cancel the change.
//Useful in the 'receive' callback.
$(ui.sender).sortable('cancel');
}
},
items: "li[id!=nomove]",
update: function () {
var order = $(this).sortable("serialize") + '&action=update';
$.post("ajax_file", order, function (theResponse) {
$("#info").html(theResponse);
});
},
helper: 'clone', //keeps children visible when pulling out of container
appendTo: '#swaplist' //temporarily stores children in hidden div
});
$("#sortable1, #sortable2").disableSelection();
$("#sortable1, #sortable2").disableSelection();
});
UPDATE:
I found out a third thing I needed to fix. I need to make sure the user doesn't select duplicate options. See the answer below for this.
I figured out a way to lock down the parents! It may not be the most ideal way but it works. See the full Fiddle here.
For #1, I applied the answer at How to implement a button on a jQuery Sortable accordion header to lock the parents in place. I made a class called "DontMove" and placed them on <h2> and then set that as my cancel option in every sortable, cancel: ".DontMove". Below is a snippet for implementing it.
$("#accordion")
.accordion({
active: false,
collapsible: true,
animate: false,
heightStyle: "content",
autoHeight: false,
header: "> div > h2"
})
.sortable({
axis: "y",
handle: "h2",
cancel: ".DontMove",
stop: function (event, ui) {
ui.item.children("h2").triggerHandler("focusout");
}
});
For #3 there was a solution thanks to prevent duplicated item in jQueryUI sortable.
This snippet is what did the trick. I placed it in the receive section.
var id = ui.item.attr('id');
var ele = $('#sortable2').find('li[id="'+id+'"]');
if (ele.length != 1) {
$(ui.sender).sortable('cancel');
}
The problem was initially that I couldn't get a list of current elements in the Saved List before the sortable receive function would fire and add the new element. So whenever I would check to see if the added element already existed, it would always cancel since it was already added, thus meeting the condition.
Instead of fighting it, I just got all line elements with the same id. If there were more than 1 then length > 1 so cancel the drop. I know it's not good practice to have duplicate id's but since the lists are database driven there is a chance of that happening and I want to cover all bases.
As far as issue #2, I don't see it happening in Firefox or Chrome so I'm going to leave it alone since I was most worried about #1 and #3.
I have a basic widget block:
<div class="matter ng-controller="ProductsCtrl">
<div class="container-fluid">
<div class="widget">
<div class="widget-head">
<div class="pull-left">Browse live products</div>
<div class="widget-icons pull-right">
<a class="wminimize" href="#" ng-click="showContent = !showContent"><i class="icon-chevron-up"></i></a>
</div>
<div class="clearfix"></div>
</div><!--widget-head-->
<div class="widget-content" ng-class="{ 'hidden': !showContent }">
<div class="padd">
<div>
{{content}}
</div>
</div>
<div class="widget-foot"></div>
</div><!--widget-content-->
</div><!--widget-->
</div>
</div>
And here is the empty controller:
appAdmin.controller("ProductsCtrl", function($scope){
});
I'm using ng-click to hide/show the content, but I am trying to default the content to be visible, and also try to swap the image for the icon chevron down whenever it's hidden. I am very new to Angular and am looking for some direction in adding models and things to make these simple features work.
Any help would be appreciated.
EDIT: Made default visible by switching ng-class="{ 'hidden' : !showContent }" to ng-class="{ 'hidden' : showContent }"
For the content to be visible by default, I would set $scope.showContent to true in the controller. You can use ng-class to change the chevron icon class based on the value of showContent in the following way: <i ng-class="{'icon-chevron-up': showContent, 'icon-chevron-down': !showContent}"></i>. Only the keys of the truthy values will be applied, so it will be either icon-chevron-up or icon-chevron-down. Let me know if I misunderstood your question!