Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Plugins

Multilanguages plugin - Dropdown menu

Solved by Mat View solution

Started by Mat 6 years ago · 1 replies · 842 views
6 years ago

Hello, I have some issue to format the multi-languages plugin.

I have copied langswitcher twig template to my template partials folder, added on page template using:

{% include 'partials/langswitcher.html.twig' %}

But I not intend how to format to obtain this result, using personal css dropdown:

HTML
<!-- language navigation -->
  <section class="navbar-section language-selector">
    <div class="dropdown dropdown-right">
      <a href="#" class="btn btn-primary dropdown-toggle" tabindex="0">
        en
      </a>
      <!-- menu component -->
      <ul class="menu">
        <li class="menu-item"><a href="#" class="active">english</a></li>
        <li class="menu-item"><a href="#">language 2</a></li>
        <li class="menu-item"><a href="#">language 3</a></li>
        <li class="menu-item"><a href="#">language 5</a></li>
        <li class="menu-item"><a href="#">language 5</a></li>
      </ul>
    </div>
  </section>
<!-- /language navigation -->

this is the code of lang switcher:

TWIG
<section class="navbar-section language-selector">
        {% for language in langswitcher.languages %}

                {% set show_language = true %}
                {% if language == langswitcher.current %}

                    {% set lang_url = page.url %}
                    {% set active_class = ' active' %}

                {% else %}

                    {% set base_lang_url = base_url_simple ~ grav.language.getLanguageURLPrefix(language) %}
                    {% set lang_url = base_lang_url ~ langswitcher.page_route ~ page.urlExtension %}
                    {% set untranslated_pages_behavior = grav.config.plugins.langswitcher.untranslated_pages_behavior %}
                    {% if untranslated_pages_behavior != 'none' %}
                        {% set translated_page = langswitcher.translated_pages[language] %}
                        {% if (not translated_page) or (not translated_page.published) %}
                            {% if untranslated_pages_behavior == 'redirect' %}
                                {% set lang_url = base_lang_url ~ '/' %}
                            {% elseif untranslated_pages_behavior == 'hide' %}
                                {% set show_language = false %}
                            {% endif %}
                        {% endif %}
                    {% endif %}
                    {% set active_class = '' %}

                {% endif %}

            {% if show_language %}
                <li><a href="{{ lang_url ~ uri.params }}" class="external{{ active_class }}">{{ native_name(language)|capitalize }}</a></li>
            {% endif %}

        {% endfor %}

  </section>
<!-- /language navigation -->

is not clear to me where put the dropdown button and format the menu... some suggestion?

Thanks

6 years ago Solution

of course, after posting ... i solved:

<div class="float-right">
<!-- language navigation -->

<section class="navbar-section language-selector">

TWIG
<div class="dropdown dropdown-right">
  <a href="#" class="btn btn-primary dropdown-toggle" tabindex="0">
        {{ grav.language.getLanguage }}
  </a>

    <ul class="menu">
        <li class="menu-item">
            {% for language in langswitcher.languages %}

                    {% set show_language = true %}
                    {% if language == langswitcher.current %}

                        {% set lang_url = page.url %}
                        {% set active_class = ' active' %}

                    {% else %}

                        {% set base_lang_url = base_url_simple ~ grav.language.getLanguageURLPrefix(language) %}
                        {% set lang_url = base_lang_url ~ langswitcher.page_route ~ page.urlExtension %}
                        {% set untranslated_pages_behavior = grav.config.plugins.langswitcher.untranslated_pages_behavior %}
                        {% if untranslated_pages_behavior != 'none' %}
                            {% set translated_page = langswitcher.translated_pages[language] %}
                            {% if (not translated_page) or (not translated_page.published) %}
                                {% if untranslated_pages_behavior == 'redirect' %}
                                    {% set lang_url = base_lang_url ~ '/' %}
                                {% elseif untranslated_pages_behavior == 'hide' %}
                                    {% set show_language = false %}
                                {% endif %}
                            {% endif %}
                        {% endif %}
                        {% set active_class = '' %}

                    {% endif %}

                {% if show_language %}
                    <li><a href="{{ lang_url ~ uri.params }}" class="external{{ active_class }}">{{ native_name(language)|capitalize }}</a></li>
                {% endif %}

            {% endfor %}
        </li>
    </ul>
</div>

</section>
<!-- /language navigation -->
</div>

😀

Suggested topics

Topic Participants Replies Views Activity
Plugins · by Rene, 1 week ago
2 46 1 week ago
Plugins · by Xavier, 4 weeks ago
2 55 4 weeks ago
Plugins · by Luka Prinčič, 7 years ago
3 1181 1 month ago
Plugins · by Sebastian van de Meer, 1 month ago
1 49 1 month ago
Plugins · by PIERROT Alain, 2 months ago
3 73 2 months ago