I would like to be able to use a CRM to add new pages that can easily add images to a carousel. I have my files set up as a leaf bundle which seems to allow me to range over them as they show up on the page. Problem is, every method i have tried either doesn’t allow the range or doesn’t populate inside of a carousel.
This is my carousel.html partial
<script>
document.addEventListener('DOMContentLoaded', function () {
var carousels = bulmaCarousel.attach();
});
</script>
{{ with .Page.Resources.ByType "image" }}
<div class="carousel carousel-animated carousel-animate-slide" data-autoplay="true" data-delay="7500">
<div class="carousel-container">
{{ range . }}
{{ $scaled := .Resize "800x" }}
<div class="carousel-item has-background">
<a class="" href="{{ .RelPermalink }}"><img class="is-background" src="{{ $scaled.RelPermalink }}" alt="Template Gallery`Preformatted text`"/></a>
<div class="title is-size-6 is-italic has-text-esolia-blue-3"><a class="" href="{{ .RelPermalink }}"><span class="icon has-text-esolia-yellow-1"><i class="fas fa-search-plus"></i></span></a>
{{ .Title }}</div>
</div>
{{ end }}
</div>
<div class="carousel-navigation is-overlay">
<div class="carousel-nav-left">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>
<div class="carousel-nav-right">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</div>
</div>
</div>
{{ end }}
And this is how i am implementing it in the page layout.
{{ partial "carousel.html"}}
Everything seems to be working but it is not populating correctly. I tried script tags to include the style sheet and js files for the bulma pluggin that is in the static folders css and js respectively. At this point I am open to anything that works!
You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.
See https://discourse.gohugo.io/t/requesting-help/9132.
Let us see your code
Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.
If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.
This is also suspicious:
{{ partial "carousel.html" }}
Your aren’t passing any context to the partial. I would expect to see:
{{ partial "carousel.html" . }}
1 Like
That makes sense! I appreciate you getting back to me
Current Github Repo
Here’s what I did:
git clone --recurse-submodules https://github.com/robertstrey/VintageBrass
cd VintageBrass/
hugo
Here’s what I got:
Error: “/home/jmooring/temp/VintageBrass/config.yaml:17:1”: failed to unmarshal YAML: yaml: line 17: mapping values are not allowed in this context
Let me know when the site is buildable.
1 Like
Should be buildable, I’ll stop pushing to the remote repo for now.
To test if the site builds:
git clone --recurse-submodules https://github.com/robertstrey/VintageBrass
cd VintageBrass/
hugo
Alright! I apologize for that, i was using a remote theme module that was being ignored so i just forked the theme and cloned it locally. All that to say, it should work now
The goal is to have instrument taxonomies with categories and individual instruments as “terms”. Im attempting to build a layout structure or archetype for the “terms” that will have a carousel of images for that instrument.
The deliverable is a simple way to add/remove instruments and its content on forestry.
However I am struggling on the carousel part, and I’m very sure that its user error.
It builds, but I can’t find a carousel partial.
Also, the browser’s dev tools is emitting a bunch of errors…
1 Like
sidemenu>trumpets>custom trumpet
and the code is “slickSlider.html”
I noticed that but was struggling to link the jquery or slick module. I should say that I’m very green with Hugo and go for that matter
I kept refactoring after i posted looking for a simpler solution. It’s all in the root layouts/instruments/single.html down below.
<!DOCTYPE html>
<html>
<head>
{{ partial "meta.html" . }}
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
{{ partial "css.html" . }}
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href= "slick/slick.css"/>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>
{{ block "main" . }}
{{ partial "single/single.html" . }}
{{ with .Resources.ByType "image" }}
<div id="fade">
{{ range . }}
{{ $scaled := .Resize "200x" }}
<script> $('fade').slick('slickAdd',"<div></div>");</script>
<a class="" href="{{ .RelPermalink }}"><img src="{{ $scaled.RelPermalink }}" alt="Vintage Brass"/></a>
</div>
{{end}}
{{end}}
{{ if .Params.include_footer }}
{{ partial "footer.html" . }}
{{ end }}
<!-- Back To Top Button -->
<div id="backtotop"><a href="#"></a></div>
{{ if .Params.sidebar }}
{{ partial "single/sidebar.html" . }}
{{ end }}
{{end}}
{{ partial "javascript.html" . }}
<script type="text/javascript">
$(document).ready(function(){
$('#fade').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>
</html>
ps i hope im not wasting your time 
Yeah, it’s a bit of a mess, requiring more time than I can budget at the moment.
On your own:
- Resolve all of the the errors that appear in the browser’s dev tools console.
- Use https://validator.w3.org to find and fix your HTML errors.
I appreciate your time! I’ll keep working it out
I got it figured out, the real issue was linking css and js files so i just found a package hosted with a CDN. And luckily forestry offers FMT’s so templating is a piece of cake now. I appreciate all of your help yesterday
<!DOCTYPE html>
<html>
<head>
{{ partial "meta.html" . }}
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
{{ partial "css.html" . }}
<style>
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel-container {
display: flex;
}
.carousel {
background: #FAFAFA;
margin-bottom: 40px;
flex-grow: 1;
}
.carousel-cell {
width: 50%;
height: 400px;
margin-right: 10px;
background: white;
border-radius: 5px;
counter-increment: carousel-cell;
display: flex;
align-items: center;
justify-content: ;
object-fit: contain;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
line-height: 300px;
font-size: 80px;
color: white;
}
.carousel-nav {
width: 120px;
margin-left: 10px;
max-height: 400px;
overflow-y: scroll;
}
.carousel-nav .carousel-cell {
height: 80px;
width: 100px;
margin: 0 0 5px 0;
cursor: pointer;
display: flex;
}
.carousel-nav .carousel-cell:before {
font-size: 50px;
line-height: 80px;
}
.carousel-nav .carousel-cell.is-nav-selected {
background: white;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css" media="screen" >
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>
{{ block "main" . }}
{{ partial "single/single.html" . }}
<div class="carousel-container">
{{ with .Resources.ByType "image"}}
<div class="carousel carousel-main">
{{range .}}
<div class="carousel-cell"><img src = "{{ .RelPermalink }}"></div>
{{end}}
</div>
<div class="carousel-nav">
<div class="carousel-cell is-nav-selected"></div>
{{range .}}
<div class="carousel-cell"><img src = "{{ .RelPermalink }}"></div>
{{end}}
</div>
</div>
{{end}}
{{partial "section1.html" .}}
{{partial "section5.html" .}}
{{ partial "footer.html" . }}
<!-- Back To Top Button -->
<div id="backtotop"><a href="#"></a></div>
{{if .Page.Params.include_sidebar}}
{{ partial "single/sidebar.html" . }}
{{end}}
{{end}}
{{ partial "javascript.html" . }}
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js">></script>
<script type="text/javascript">
var $carousel = $('.carousel').flickity();
var $carouselNav = $('.carousel-nav');
var $carouselNavCells = $carouselNav.find('.carousel-cell');
$carouselNav.on( 'click', '.carousel-cell', function( event ) {
var index = $( event.currentTarget ).index()-1;
$carousel.flickity( 'select', index );
});
var flkty = $carousel.data('flickity');
var navTop = $carouselNav.position().top;
var navCellHeight = $carouselNavCells.height();
var navHeight = $carouselNav.height();
$carousel.on( 'select.flickity', function() {
// set selected nav cell
$carouselNav.find('.is-nav-selected').removeClass('is-nav-selected');
var $selected = $carouselNavCells.eq( flkty.selectedIndex )
.addClass('is-nav-selected');
// scroll nav
var scrollY = $selected.position().top +
$carouselNav.scrollTop() - ( navHeight + navCellHeight ) / 2;
$carouselNav.animate({
scrollTop: scrollY
});
});
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>
</html>
and then i obviously condensed as per one of Hugo’s greatest strengths
<!DOCTYPE html>
<html>
<head>
{{ partial "meta.html" . }}
<title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
{{ partial "css.html" . }}
{{ partial "gallerycss.html" }}
<!-- Add the slick-theme.css if you want default styling -->
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"></div>
</div>
{{ block "main" . }}
{{ partial "single/single.html" . }}
{{partial "gallery.html" . }}
{{partial "section1.html" .}}
{{partial "section5.html" .}}
{{ partial "footer.html" . }}
<!-- Back To Top Button -->
<div id="backtotop"><a href="#"></a></div>
{{if .Page.Params.include_sidebar}}
{{ partial "single/sidebar.html" . }}
{{end}}
{{end}}
{{ partial "javascript.html" . }}
{{ partial "galleryjs.html" . }}
</body>
</html>
