ankedsgn

figure.ratio-box {
    height: 0;
    position: relative;
    background: var(--lightGrey);
    padding-top: 100%; //default. Correct padding is calculated and set inline in the module

    img {
        position: absolute;
        top: 0;
    }

ankedsgn

{# Global svg icons 'use' method see: http://css-tricks.com/svg-sprites-use-better-icon-fonts/ also: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

<svg class="icon icon-folder">
        <use xlink:href="#icon-folder"></use>
    </svg>
#}

{% spaceless %}
<svg display="none" xmlns="http://www.w3.org/2000/svg">

ankedsgn

 {% set wijken = app.config.get('contenttypes/zoekmachine/fields/wijk_toenjoy/values') %}
     <select name="wijken">
     {% for item, key in wijken %}
         <option value="{{item}}">{{ key }}</option>
     {% endfor %}
     </select>

ankedsgn

# place below in the seo.bobdenotter.yml

fields:
    title: ['title', 'name']
    description: ['introduction', 'teaser', 'description', 'body']
    keywords: []
    # prefer the OGimage field over the organic image field
    image: ['ogimage','image']

ankedsgn

jQuery(function ($) {
  
  // faq

      $('.faq-question').on('click', function(e){
        e.preventDefault();
        var thisfaq = $(this).parent('.faq-set');
        var faqQ = $(this);
        var faqA = $(this).next('.faq-answer');

ankedsgn

 //Better inline images from the wysiwyg editor

     if ($('.user-content img[style]').length > 0){
        var inlineimg = $('.user-content img[style]');
        console.log(inlineimg);
        inlineimg.css("width","").css("height","");
      }

ankedsgn

h2 a[name] { // all anchors
    scroll-margin-top: 70px;

    @supports (-webkit-overflow-scrolling: touch) { // bc ios safari is not playing along
        /* CSS specific to iOS devices only */
        padding-top: 70px;
        margin-top: -70px;
      }
}

ankedsgn

if(window.innerWidth < 768) {
        $('table.content-table').each(function( index ) {
          var ths = $( this ).find('th');
          var trs = $( this ).find('tr');
          trs.each(function(){
            $(this).find('td').each(function(i){
              var text="<span>"+ths.eq(i).html()+"</span>";
              $(this).prepend(text);
            })
          });

ankedsgn

$( document ).ready(function() {
  /**
    * breadcrumbs / history path
    */
    breadcrumbStateSaver(document.location.href, document.title);
    showBreadCrumb();

)};
                    
//breadcrumbs -> https://stackoverflow.com/questions/18998797/create-breadcrumbs-dynamically-on-client-side-using-javascript

ankedsgn

in contenttypes.yml:
  image:
    type: image
    attrib: [ alt_nl, title_nl, alt_en, title_en, alt_fr, title_fr ]

in de template: 

{% set alt = attribute(record.values.image, 'alt_'~getlanguage() )|default('') %}
{% set title = attribute(record.values.image, 'title_'~getlanguage() )|default('') %}