[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery (/thread-3364.html)

Pages : 1 2

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Bonjour,

Je souhaiterais connaitre le code smarty pour pouvoir lui indiquer que les images du slider (bootstrap3) sont lié avec le module Gallery.

Code :
[== HTML ==]

<div class="item active">

    <img class="center" src="http://lorempixel.com/950/360/animals/1/" alt="...">

    <div class="carousel-caption">

       </div>

</div>

au lieu d'avoir <img class="center" src="http://lorempixel.com/950/360/animals/1/" alt="..."> le remplacer le code qui pointe vers les images selectionnées avec le module Gallery.

Le but est que le redacteur puisse changer les images du slider lui meme sans rentrer dans le code html.

j'ai placer mon html du slider dans un nouveau gabarit Gallery mais apres...

Merci d'avance.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Bonjour et bienvenue,
Ce tuto devrait t'aider à comprendre le fonctionnement de Gallery.
Merci de respecter les règles du forum indiquées en haut de chaque pages sous ATTENTION.

Message aux admin : à déplacer dans Modules, tags.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Merci bien mais j'ai déjà regardé ton tuto qui est bien fait d'ailleurs.

Malheureusement je ne comprend pas le fonctionnement pour récupérer les images jointe dans le module Gallery.

c'est ce code que je dois modifier :

Code :
[== Indéfini ==]

<div id='coin-slider'>

{foreach from=$images item=image}

    <a href="#"><img class="img-candidat" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>

{/foreach}

</div>

pour le css et le js tout est déjà ok pas besoin de les rentrer dans le nouveau gabarit Gallery.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Sans connaître le code du slider utilisé ni ton niveau de connaissances, c'est difficile de te répondre.
Peut-être :

Code :
<div class="item active">

{foreach from=$images item=image}

    <img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

<div class="carousel-caption">

       </div>

{/foreach}

</div>

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

J'ai des bonnes connaissance en html et css mais en smarty je débarque complétement.

le code du slider js est celui de bootstrap 3.

Code :
[== JavaScript ==]

 // CAROUSEL CLASS DEFINITION

  // =========================

  var Carousel = function (element, options) {

    this.$element    = $(element)

    this.$indicators = this.$element.find('.carousel-indicators')

    this.options     = options

    this.paused      =

    this.sliding     =

    this.interval    =

    this.$active     =

    this.$items      = null

    this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))

    this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element

      .on('mouseenter.bs.carousel', $.proxy(this.pause, this))

      .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))

  }

  Carousel.VERSION  = '3.3.1'

  Carousel.TRANSITION_DURATION = 600

  Carousel.DEFAULTS = {

    interval: 5000,

    pause: 'hover',

    wrap: true,

    keyboard: true

  }

  Carousel.prototype.keydown = function (e) {

    if (/input|textarea/i.test(e.target.tagName)) return

    switch (e.which) {

      case 37: this.prev(); break

      case 39: this.next(); break

      default: return

    }

    e.preventDefault()

  }

  Carousel.prototype.cycle = function (e) {

    e || (this.paused = false)

    this.interval && clearInterval(this.interval)

    this.options.interval

      && !this.paused

      && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

    return this

  }

  Carousel.prototype.getItemIndex = function (item) {

    this.$items = item.parent().children('.item')

    return this.$items.index(item || this.$active)

  }

  Carousel.prototype.getItemForDirection = function (direction, active) {

    var delta = direction == 'prev' ? -1 : 1

    var activeIndex = this.getItemIndex(active)

    var itemIndex = (activeIndex + delta) % this.$items.length

    return this.$items.eq(itemIndex)

  }

  Carousel.prototype.to = function (pos) {

    var that        = this

    var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))

    if (pos > (this.$items.length - 1) || pos < 0) return

    if (this.sliding)       return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"

    if (activeIndex == pos) return this.pause().cycle()

    return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))

  }

  Carousel.prototype.pause = function (e) {

    e || (this.paused = true)

    if (this.$element.find('.next, .prev').length && $.support.transition) {

      this.$element.trigger($.support.transition.end)

      this.cycle(true)

    }

    this.interval = clearInterval(this.interval)

    return this

  }

  Carousel.prototype.next = function () {

    if (this.sliding) return

    return this.slide('next')

  }

  Carousel.prototype.prev = function () {

    if (this.sliding) return

    return this.slide('prev')

  }

  Carousel.prototype.slide = function (type, next) {

    var $active   = this.$element.find('.item.active')

    var $next     = next || this.getItemForDirection(type, $active)

    var isCycling = this.interval

    var direction = type == 'next' ? 'left' : 'right'

    var fallback  = type == 'next' ? 'first' : 'last'

    var that      = this

    if (!$next.length) {

      if (!this.options.wrap) return

      $next = this.$element.find('.item')[fallback]()

    }

    if ($next.hasClass('active')) return (this.sliding = false)

    var relatedTarget = $next[0]

    var slideEvent = $.Event('slide.bs.carousel', {

      relatedTarget: relatedTarget,

      direction: direction

    })

    this.$element.trigger(slideEvent)

    if (slideEvent.isDefaultPrevented()) return

    this.sliding = true

    isCycling && this.pause()

    if (this.$indicators.length) {

      this.$indicators.find('.active').removeClass('active')

      var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])

      $nextIndicator && $nextIndicator.addClass('active')

    }

    var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"

    if ($.support.transition && this.$element.hasClass('slide')) {

      $next.addClass(type)

      $next[0].offsetWidth // force reflow

      $active.addClass(direction)

      $next.addClass(direction)

      $active

        .one('bsTransitionEnd', function () {

          $next.removeClass([type, direction].join(' ')).addClass('active')

          $active.removeClass(['active', direction].join(' '))

          that.sliding = false

          setTimeout(function () {

            that.$element.trigger(slidEvent)

          }, 0)

        })

        .emulateTransitionEnd(Carousel.TRANSITION_DURATION)

    } else {

      $active.removeClass('active')

      $next.addClass('active')

      this.sliding = false

      this.$element.trigger(slidEvent)

    }

    isCycling && this.cycle()

    return this

  }

  // CAROUSEL PLUGIN DEFINITION

  // ==========================

  function Plugin(option) {

    return this.each(function () {

      var $this   = $(this)

      var data    = $this.data('bs.carousel')

      var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)

      var action  = typeof option == 'string' ? option : options.slide

      if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))

      if (typeof option == 'number') data.to(option)

      else if (action) data[action]()

      else if (options.interval) data.pause().cycle()

    })

  }

  var old = $.fn.carousel

  $.fn.carousel             = Plugin

  $.fn.carousel.Constructor = Carousel

  // CAROUSEL NO CONFLICT

  // ====================

  $.fn.carousel.noConflict = function () {

    $.fn.carousel = old

    return this

  }

  // CAROUSEL DATA-API

  // =================

  var clickHandler = function (e) {

    var href

    var $this   = $(this)

    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7

    if (!$target.hasClass('carousel')) return

    var options = $.extend({}, $target.data(), $this.data())

    var slideIndex = $this.attr('data-slide-to')

    if (slideIndex) options.interval = false

    Plugin.call($target, options)

    if (slideIndex) {

      $target.data('bs.carousel').to(slideIndex)

    }

    e.preventDefault()

  }

  $(document)

    .on('click.bs.carousel.data-api', '[data-slide]', clickHandler)

    .on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

  $(window).on('load', function () {

    $('[data-ride="carousel"]').each(function () {

      var $carousel = $(this)

      Plugin.call($carousel, $carousel.data())

    })

  })

}(jQuery);

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

C'est le code html du slider que nous avons besoin, pas du JS Wink

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

désolé le voilà

Code :
[== HTML ==]

<div class="container slider-lg hidden-xs">

            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

              <!-- Indicators -->

              <ol class="carousel-indicators">

                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

                <li data-target="#carousel-example-generic" data-slide-to="1"></li>

                <li data-target="#carousel-example-generic" data-slide-to="2"></li>

              </ol>

              <!-- Wrapper for slides -->

              <div class="carousel-inner" role="listbox">

                <div class="item active">

                  <img class="center" src="http://lorempixel.com/950/360/animals/1/" alt="...">

                  <div class="carousel-caption">

                  </div>

                </div>

                <div class="item">

                  <img class="center" src="http://lorempixel.com/950/360/animals/2/" alt="...">

                  <div class="carousel-caption">

                  </div>

                </div>

                <div class="item">

                  <img class="center" src="http://lorempixel.com/950/360/animals/3/" alt="...">

                  <div class="carousel-caption">

                    ...

                  </div>

                </div>

              </div>

              <!-- Controls -->

              <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

              </a>

              <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

              </a>

            </div>

        </div>

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Essaye ceci :

Code :
{* Wrapper for slides *}

    <div class="carousel-inner" role="listbox">

    {foreach from=$images item=image}    

        <div class="item{if $image->active} active{/if}">

            <img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

            <div class="carousel-caption"><h3>{$image->comment}</h3>

            </div>        

        </div>

    {/foreach}

    </div>

{* Controls *}

Il faut que tu apprennes les rudiments de smarty (c'est du php simplifé) : http://www.smarty.net/docs/en/index.tpl.
En particulier : http://www.smarty.net/docs/en/language.builtin.functions.tpl

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Merci bien, je vais voir ça d'ici 1h00 ou 2 je dois m'absenter pour le moment.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Alors y a du mieux Smile

il prend bien les images envoyer via l'admin dans Gallery mais j'ai la class"active" sur toutes les images, alors que je devrais l'avoir uniquement sur l'image affichée dans le slide.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Normalement avec <div class="item{if $image->active} active{/if}"> il ne devrait mettre active que si l'image affichée est l'active.
As-tu un lien afin que je puisse avoir un peu plus d'infos ?

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Peut-être un problème d'apostrophes.
Essaye ceci (moins propre, mais plus sûr) :

Code :
<div class="carousel-inner" role="listbox">

{foreach from=$images item=image}    

{if $image->active}        

<div class="item active">

{else}

<div class="item">

{/if}

<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

<div class="carousel-caption"><h3>{$image->comment}</h3>

</div>        

</div>

{/foreach}

</div>

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

non désolé je suis en local.

voilà ou j'ai copié l'appel du gabarit Gallery

Code :
[== HTML ==]

<div class="container slider-lg hidden-xs">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <ol class="carousel-indicators">

            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#carousel-example-generic" data-slide-to="1"></li>

            <li data-target="#carousel-example-generic" data-slide-to="2"></li>

        </ol>

        <!-- Wrapper for slides -->

        <div class="item active">

            {Gallery}

        </div>

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

</div>

</div>

et voilà ce que j'ai mis dans le gabarit Gallery

Code :
[== Indéfini ==]

{* Wrapper for slides *}

    <div class="carousel-inner" role="listbox">

    {foreach from=$images item=image}    

        <div class="item{if $image->active} active{/if}">

            <img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

            <div class="carousel-caption"><h3>{$image->comment}</h3>

            </div>        

        </div>

    {/foreach}

    </div>

{* Controls *}

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Voici ton erreur :
<div class="item active">{Gallery}

A ta place, j'aurais copié l'entièreté du code dans le gabarit de Gallery.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Oui effectivement grosse erreur de ma part, mais ça ne change rien ;( j'ai toujours les 3 images avec la class"active".

Y a peut être une configuration au niveau du module Gallery à faire ?

24h00 que je galère la dessus ;(

Je viens de copier tout le code slide dans le gabarit Gallery c'est plus clair effectivement.

Code :
[== HTML ==]

<div class="container slider-lg hidden-xs">

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <!-- Indicators -->

        <ol class="carousel-indicators">

            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#carousel-example-generic" data-slide-to="1"></li>

            <li data-target="#carousel-example-generic" data-slide-to="2"></li>

        </ol>

        <!-- Wrapper for slides -->

        {* Wrapper for slides *}

        <div class="carousel-inner" role="listbox">

            {foreach from=$images item=image}

            <div class="item{if $image->active} active{/if}">

                <img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

                <div class="carousel-caption">

                    <h3>{$image->comment}</h3>

                </div>

            </div>

            {/foreach}

        </div>

        {* Controls *}

        <!-- Controls -->

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </a>

    </div>

</div>

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Dans ton gabarit de Gallery sous la source du gabarit, tu as ceci : Variable Smarty de gabarits disponibles : ?
Clique sur l'icône ? afin de connaître les différentes variables accessibles.
On va tester si $image->active est initialisé :

Code :
[== Indéfini ==]

<div class="carousel-inner" role="listbox">

{foreach from=$images item=image}    

{if $image->active}<h2>Image active</h2>

<div class="item active">

{else}<h2>Image inactive</h2>

<div class="item">

{/if}

<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

<div class="carousel-caption"><h3>{$image->comment}</h3>

</div>        

</div>

{/foreach}

</div>

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Désolé mais je colle ou ce bout de code ?

Merci de ton aide t'es vraiment super.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Oups, c'est de ma faute : $image->active n'a rien avoir avec notre cas, il s'agir seulement de savoir si l'image a été désactivée dans le module.

A première vue, je ne vois pas comment résoudre le problème de savoir quelle image est affichée à un moment précis dans le foreach.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

A la limite la boucle je peux m'en passer largement, mais avoir juste l'adresse des img activé dans le module Gallery.
Après c 'est au js de gérer la suite.
Vois-tu ?

Le rédacteur ne pourra pas ajouter plus de 4 images par exemple en fonction du nombres d img inclus dans le gabarit Gallery.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

J'ai l'impression qu'il n'y a que le premier élément du tableau qui est considéré comme "active".
Tu vas essayer ceci :

Code :
[== Indéfini ==]

{* Wrapper for slides *}

    <div class="carousel-inner" role="listbox">

    {foreach from=$images item=image}    

        <div class="item{if $image@first} active{/if}">

            <img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />

            <div class="carousel-caption"><h3>{$image->comment}</h3>

            </div>        

        </div>

    {/foreach}

    </div>

{* Controls *}

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

T'es génial mec Smile

Ca fonctionne !!!

J'adorerai des explications pas à pas sur le fonctionnement de ta boucle.

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Très simple, regarde ici : http://www.smarty.net/docs/en/language.function.foreach.tpl
N'hésite pas à poser des questions si tu ne piges pas.
Une fois que tout est nickel, n'oublie pas de modifier le titre de ton premier message pour ajouter [Résolu] en début de ligne

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Dernier souci les images ne ce centre pas ;(

Mon niveau d'english est vraiment trop faible ;( tu n'aurais pas des liens FR la dessus ?

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - Jean le Chauve - 31/12/2014

Voici la doc en français (partielle) et seulement pour la version de 2 de smarty (nous sommes à la 3).
En ce qui concerne le problème de centrage, je ne peux pas te répondre sans avoir un lien.
Il s'agit certainement d'un problème de css. Vérifie si tu as bien créé la classe img.center
As-tu un lien vers la documentation de ce slider ?

[Résolu] Recuperer l'adresse des images pour un gabarit avec Gallery - lolox - 31/12/2014

Sur mon slide en statique je n'ai pas ce problème pourtant j'ai bien le même css sur les 2.

Etrange.

Le lien sur la doc du carousel //getbootstrap.com/javascript/#carousel

j ai l impression que c'est la taille des images ne sont prises à 100% de la taille de leur conteneur ou un truc de genre.