Gallery

Archive
1

Im interested in injecting the gallery which is available in the photographer skeleton into a website using the deliver theme. What would be the best way to go about doing this?

2

Really it’s probably a matter of copying the markdown pages that have the appropriate frontmatter, then copying and adjusting the gallery specific twig templates from the theme so that the pages have the appropriate templates to render.

Last part is to port any css/js to make this happen.

3

Hey thanks for the roadmap, I have pulled the functionality & the styling. The only issue now is that for some reason it is calling all of the stylesheets twice, which messes up the Header & Footer. I know that it is because the gallery is a page type in the photographer theme, and I have converted it into a modular element in Deliver. How can I block the gallery.html.twig from reloading stylesheets that have already been loaded, but still load the necessary stylesheets for the gallery element? If you need to take a look I have a dummy site where I am working here: http://avoiddailyfantasybans.org/portfolio

thanks.

4

Make sure that your site only does one each of the {{ assets.css() }} and {{ assets.js() }} calls, which really should only happen in your main file (base.html.twig in several themes, otherwise known as the index).

Any modular part or other template should do {% do assets.addCss() %} or {% do assets.addJs() %} to add to this queue (equivalent to wp_enqueue_style and wp_enqueue_script in WordPress, which might be familiar to many).

5

So I duplicated the required stylesheets and put them into the deliver/css folder. Now i am trying to call them from the module, and they are not being added into the base.html.twig head tag. Here is what I have for the css calls
—code{% block head %}

{% block stylesheets %}
    {% do assets.addCss('theme://css/gallery/gallerybootstrap.css') %}
    {% do assets.addCss('theme://css/gallery/gallerystyle.css') %}
    {% do assets.addCss('theme://css/gallery/gallerytouchTouch.css') %}

    {% if browser.getBrowser == 'msie' and browser.getVersion < 9 %}
     {% do assets.addCss('theme://assets/tm/css/tm_docs.css') %}
 {% endif %}

{% endblock %}
—code

6

What does your module look like? Does it embed or extendbase.html.twig (eg {% embed 'partials/base.html.twig' %}) at some point?

7

using embed didnt make any change. Im just not sure why these directions arent being recognized… Am I missing something here?? Here is the block I have for CSS & JS
—code
{% block head %}

{% block stylesheets %}
    {% do assets.addCss('theme://css/gallery/gallerybootstrap.css') %}
    {% do assets.addCss('theme://css/gallery/gallerystyle.css') %}
    {% do assets.addCss('theme://css/gallery/gallerytouchTouch.css') %}

    {% if browser.getBrowser == 'msie' and browser.getVersion < 9 %}
     {% do assets.addCss('theme://assets/tm/css/tm_docs.css') %}
 {% endif %}

{% endblock %}

{% block javascripts %}
{% do assets.add(‘jquery’,101) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery-migrate-1.2.1.js’) %}
{% do assets.addJs(‘theme://js/gallery/gallerysuperfish.js’) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery.mobilemenu.js’) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery.easing.1.3.js’) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery.ui.totop.js’) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery.touchSwipe.min.js’) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery.equalheights.js’) %}
{% do assets.addJs(‘theme://js/gallery/gallerytouchTouch.jquery.js’) %}
{% do assets.addJs(‘theme://js/gallery/galleryjquery.isotope.min.js’) %}

{% if browser.getBrowser == 'msie' and browser.getVersion < 9 %}
    {% do assets.addJs('theme://assets/assets/js/html5shiv.js') %}
    {% do assets.addJs('theme://assets/assets/js/respond.min.js') %}
{% endif %}

{% endblock %}
—code

8

Oops, This was a caching issue. Seems to be operating correctly now. Does anyone know why my header & footer are being manipulated in an odd way? It seems that the social buttons, and some of the text are being minified?

9

Ok, this is all solved, I just had to resolve an argument between rules in the gallery layout & the original theme template.css

10

Glad you got it sorted.