<div class="{{ editmode ? 'footer-container-editmode' : 'footer-container' }}"> <section class="{{ editmode ? 'footer-snippet-editmode' : 'footer-section' }}"> {% if editmode %} {% block scripts %} {{ encore_entry_script_tags('app') }} {% endblock %} {% block stylesheets %} {{ encore_entry_link_tags('style') }} {% endblock %} {% block head_links %} {{ pimcore_head_link() }} {% endblock %} <br> <span>Background image:</span> <br> {{ pimcore_image('background-image', { width: 500, height: 250 }) }} <h2>Footer top section</h2> <div class="m-5 shadow-card bg-gray-100 p-5"> <h3>Items of first level navigation:</h3> {% for i in pimcore_iterate_block(pimcore_block('nav-one')) %} {{ pimcore_link('nav-one-item' ~ i) }} {% endfor %} </div> <br/><br/> <p> Facebook {{ pimcore_input('facebook', { width: 400, placeholder: 'facebook url' }) }} </p> <p> Instagram {{ pimcore_input('instagram', { width: 400, placeholder: 'instagram url' }) }} </p> <p> Youtube {{ pimcore_input('youtube', { width: 400, placeholder: 'youtube url' }) }} </p> <br> <br> <h3>Items of second level navigation:</h3> <div class="m-5 shadow-card bg-gray-100 p-5"> {% for i in pimcore_iterate_block(pimcore_block('nav-two-navigation-links')) %} {{ pimcore_link('nav-two-navigation-links' ~ i) }} {% endfor %} </div> <br> <br> <h2>Footer bottom section</h2> <p>Copyright text:</p> {{ pimcore_input('copyright-text', { width: 800 }) }} <br> <br> <div class="m-5 shadow-card bg-gray-100 p-5"> <h3>Items of bottom section:</h3> {% for i in pimcore_iterate_block(pimcore_block('nav-bottom')) %} {{ pimcore_link('nav-bottom-item' ~ i) }} {% endfor %} </div> <br> <br> {% else %} <div class="flex justify-center mt-20"> {{ pimcore_image('background-image') }} </div> <div class="bg-gray-200 dark:bg-black dark:text-white w-full"> <div class="container px-5"> <div class="flex flex-col md:flex-row gap-5 md:justify-end py-5 align-center"> <div class="flex-1 md:flex-initial"> <div class="flex flex-col"> <div class="flex-1"> <div class="flex flex-col md:flex-row gap-5 md:justify-end align-center py-5 font-mont-heavy text-xs uppercase text-dark-blue"> {% if pimcore_input('facebook') %} <div class="md:flex-none text-sm hidden md:flex"> <a href="{{ pimcore_input('facebook') }}" target="_blank" class="inline-block align-middle hover:text-blue-light transition-all"><i class="icon-facebook"></i></a> </div> {% endif %} {% if pimcore_input('instagram') %} <div class="md:flex-none text-sm hidden md:flex"> <a href="{{ pimcore_input('instagram') }}" target="_blank" class="inline-block align-middle hover:text-blue-light transition-all"><i class="icon-instagram"></i></a> </div> {% endif %} {% if pimcore_input('youtube') %} <div class="md:flex-none text-sm hidden md:flex"> <a href="{{ pimcore_input('youtube') }}" target="_blank" class="inline-block align-middle hover:text-blue-light transition-all"><i class="icon-youtube"></i></a> </div> {% endif %} {% for i in pimcore_iterate_block(pimcore_block('nav-two-navigation-links')) %} <div class="flex-1 md:flex-none"> {{ pimcore_link('nav-two-navigation-links' ~ i) }} </div> {% endfor %} </div> </div> <div class="flex-1"> <div class="flex flex-col md:flex-row gap-5 md:justify-end py-5"> {% for i in pimcore_iterate_block(pimcore_block('nav-one')) %} <div class="flex-1 md:flex-none font-mont-heavy text-xs uppercase text-dark-blue"> {{ pimcore_link('nav-one-item' ~ i) }} </div> {% endfor %} </div> </div> </div> </div> </div> </div> </div> <div class="z-10 relative bg-blue-dark dark:bg-[#171717] px-5 py-5"> <div class="container"> <div class="flex flex-col md:flex-row gap-5 text-white md:justify-end py-5"> <div class="flex-1 font-rubik-light text-xs text-white pb-5 md:pb-0"> {{ pimcore_input('copyright-text') }} </div> {% for i in pimcore_iterate_block(pimcore_block('nav-bottom')) %} <div class="flex-1 md:flex-none font-mont-heavy text-xs uppercase"> {{ pimcore_link('nav-bottom-item' ~ i) }} </div> {% endfor %} </div> </div> </div> {% endif %} </section></div>