Search code examples
includepugmixinsimage-galleryphoto-gallery

Jade image gallery using extends, mixins and includes not working

I'm trying to build a Jade image gallery using mixins and includes, but can't get it working. Here's my setup:

layout-template.jade (the base layout template)

block vars
doctype html
  (head and all it's meta tags)...
block body
      (body content)...
block main-content
      h1 This is the default layout             
block footer
      script(src='/js/min/app-min.js')

image-gallery-page.jade (the page with the image gallery)

extends ../../__JADE/_layout-template.jade

block vars
    - var pageTitle = 'New page title'

block body
    body

block main-content
     (main page content...)

     include ../../__JADE/_include-view-original.jade
     +originalImage('http://placehold.it/800x400', 'Original Image 1')
     +originalImage('http://placehold.it/800x400', 'Original Image 2')
     +originalImage('http://placehold.it/800x400', 'Original Image 3')

image-gallery-include.jade (the include file being pulled into the image-gallery-page, with the mixin)

.row
    .large-10.columns
         .text-center Click for larger view
              .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
                   mixin originalImage(originalLink, originalTitle)
                        a(href="#{originalLink}" title="#{originalTitle}")
                            img(src="#{originalLink}")

The original images 1-3 from the mixin appear, but not inside the owl-carousel div that I need them to be in. If I indent the mixin under the include, they don't compile.

What am I doing wrong? Thank you!

Solution

  • For me personally, I would dedicate a file to my mixins or individual mixins and include them at the top of a file I wish to use them in.

    Then you can simply invoke the mixin where necessary.

    Currently, you have the following ;

    .row .large-10.columns .text-center Click for larger view .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article mixin originalImage(originalLink, originalTitle) a(href="#{originalLink}" title="#{originalTitle}") img(src="#{originalLink}")

    But altering to;

    mixin originalImage(originalLink, originalTitle) a(href="#{originalLink}" title="#{originalTitle}") img(src="#{originalLink}") .row .large-10.columns .text-center Click for larger view .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article

    Would make the difference.

    However, if you choose to do this, you could do a little shuffling and result with something like;

    extends ../../__JADE/_layout-template.jade
include ../../__JADE/_mixins.jade

block vars
    - var pageTitle = 'New Page Title'
block body
    body
block main-content
    (main page content...)
    .row
        .large-10.columns
            .text-center Click for larger view
                .owl-carousel.owl-theme.popup-gallery#owl-carousel-original-article
                    +originalImage('http://placehold.it/800x400', 'Original Image 1')
                    +originalImage('http://placehold.it/800x400', 'Original Image 2')
                    +originalImage('http://placehold.it/800x400', 'Original Image 3')

    Additionally, you could define a map and loop over them to invoke your mixins to save you more code.

    Something like the following could potentially work;

    - var images = ['http://placehold.it/800x400', 'http://placehold.it/800x400', 'http://placehold.it/800x400']
each val, index in images
    +originalImage(val, 'Original Image ' + index)

    That last bit might need a little tweaking as it's off the top of my head but hopefully that will help you out a little.

    I try to separate my Jade files into many manageable modules and pieces so that it's simple to maintain. As your project grows maybe think about having folders for the different markup components. For example, having a folder for different mixins and being able to include specific mixins for different parts of your project.

    @jh3y