Annonce

#1 2008-11-30 10:20:33

galain
Former Piwigo Team
2007-09-20
32

Pouvoir styler la page diaporama

Salut

J'ai commencé un thème yoga pour Piwigo 2rc4 et j'aimerais appliquer un style particulier au diaporama.

Malheureusement il n'y a pas de class ou d'id distinguant "thePicturePage" en mode normal et en mode diaporama.

Serait-il possible d'ajouter un petit quelque chose pour cibler le diaporama en CSS ?

Dernière modification par galain (2008-11-30 10:52:00)

Hors ligne

#2 2008-11-30 10:28:56

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16813

Re: Pouvoir styler la page diaporama

galain a écrit:

Salut

J'ai commencé un thème pour Piwigo 2rc4 et j'aimerais appliquer un style particulier au diaporama.

Malheureusement il n'y a pas de class ou d'id distinguant "thePicturePage" en mode normal et en mode diaporama.

Serait-il possible d'ajouter un petit quelque chose pour cibler le diaporama en CSS ?

Pour cela tu peux utiliser template-extension qui te permet pour ton thème de personnaliser cette page et de rajouter toutes les class ou id que tu souhaites pour les diaporamas

Un petit tour dans Administration - menu Configuration - Templates (modèles) et http://demo.piwigo.net/admin/template/goto/icon/help.png pour en savoir plus.

Après lecture de l'aide viens reposer tes questions si besoin


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#3 2008-11-30 11:27:04

galain
Former Piwigo Team
2007-09-20
32

Re: Pouvoir styler la page diaporama

ça fonctionne bien mais ça veut dire que pour distribuer mon thème pour le template yoga, je dois fournir un fichier tpl que l'utilisateur devra installer lui-même en plus du thème.

C'est un peu dommage, le mode diaporama est si particulier qu'il mériterait d'office un moyen de lui appliquer un style.

Hors ligne

#4 2008-11-30 11:34:56

P@t
Ex Equipe Piwigo
Nice
2007-06-13
5695

Re: Pouvoir styler la page diaporama

Non, tu peux assignner un template extension directement dans le themeconf.inc.php ainsi:

add_event_handler('init', 'set_mytheme_template_extension');
function set_mytheme_template_extension()
{
  global $template;
  $template->set_extents(array(
    'slideshowr.tpl' => 'menubar'),
  dirname(__FILE__).'/template-extension/');
}

Ou tu auras mis ton fichier slideshow.tpl dans le dossier template-extension de ton theme.
N'oublie pas de modifier aussi les mytheme par le nom de ton theme.

Je vais quand meme regarder s'il est possible d'ajouter un id ou une class pour le slideshow...

Est-ce que quelques comme comme ca serait ok:

<div id="theImage" class="slideshow">

Dernière modification par P@t (2008-11-30 11:40:09)


P@t

Hors ligne

#5 2008-11-30 11:44:09

ddtddt
Équipe Piwigo
Quetigny (21) - France
2007-07-27
16813

Re: Pouvoir styler la page diaporama

galain a écrit:

ça fonctionne bien mais ça veut dire que pour distribuer mon thème pour le template yoga, je dois fournir un fichier tpl que l'utilisateur devra installer lui-même en plus du thème.

C'est un peu dommage, le mode diaporama est si particulier qu'il mériterait d'office un moyen de lui appliquer un style.

- Je t'invites à rédiger, en Anglais, une demande d'évolution ici

En précisant les modifications qu'il te semble intéressante de mettre en œuvre.

Si l'anglais ne te motive pas rédige la demande en réponse à ce sujet et j'effectuais la fiche ;-)


Vous aimez Piwigo alors n'hésitez pas à participer avec nous, plus d'infos sur la page "Contribuer à Piwigo". Si vous n'avez pas beaucoup de temps et que vous souhaitez nous soutenir vous pouvez aussi le faire par un don.

Hors ligne

#6 2008-11-30 11:59:26

galain
Former Piwigo Team
2007-09-20
32

Re: Pouvoir styler la page diaporama

P@t a écrit:

Est-ce que quelques comme comme ca serait ok:

<div id="theImage" class="slideshow">

Non, il me faudrait plus haut encore, au niveau de body ou the_page.

Pour l'instant j'ai modifié comme ceci header.tpl :

Code:

<body id="{$BODY_ID}"{if isset($slideshow)} class="slideshow"{/if}>

Je vais regarder comment mettre ça dans le fichier themeconf.inc.php

Edit :
Ok, ça fonctionne bien avec 'header.tpl' => 'header'
Merci P@t

Dernière modification par galain (2008-11-30 12:21:43)

Hors ligne

#7 2008-12-01 15:12:15

galain
Former Piwigo Team
2007-09-20
32

Re: Pouvoir styler la page diaporama

Alors j'ai quand même remarqué deux petits problèmes suite à cette modification de themeconf.inc.php :
* la page "à propos" sort complètement vide (apparemment c'est la seule),
* au lieu de la redirection habituelle en cas de catégorie ou image non trouvées,  j'ai le droit à : « Fatal error: Cannot redeclare set_kardon_template_extension()... ».

J'ai mis en ligne une galerie test : http://bacasable.fr/piwigo/

Mon themeconf.inc.php actuel :

Code:

$themeconf = array(
  'template' => 'yoga',
  'theme' => 'kardon',
  'template_dir' => 'template/yoga',
  'icon_dir' => 'template/yoga/theme/kardon/icon',
  'admin_icon_dir' => 'template/yoga/icon/admin',
  'mime_icon_dir' => 'template/yoga/icon/mimetypes/',
  'local_head' => '<!-- no theme specific head content -->',
);
add_event_handler('init', 'set_kardon_template_extension');
function set_kardon_template_extension()
{
  global $template;
  $template->set_extents(array(
    'header.tpl' => 'header'),
  dirname(__FILE__).'/template-extension/');
}

Si vous voulez voir le genre de modifications que je voulais apporter au diaporama, lancer le à partir d'ici par exemple :
http://bacasable.fr/piwigo/picture.php?/37/category/6
ça ne restera probablement pas tout à fait ainsi mais l'idée y est

Hors ligne

#8 2008-12-01 17:27:05

P@t
Ex Equipe Piwigo
Nice
2007-06-13
5695

Re: Pouvoir styler la page diaporama

galain a écrit:

* la page "à propos" sort complètement vide (apparemment c'est la seule),
* au lieu de la redirection habituelle en cas de catégorie ou image non trouvées,  j'ai le droit à : « Fatal error: Cannot redeclare set_kardon_template_extension()... ».

En effet... déclarer une fonction dans le themeconf.inc.php peut poser un soucis...
Dans ce cas, il faut faire:

Code:

if (!function_exists('set_kardon_template_extension')
{
  add_event_handler('init', 'set_kardon_template_extension');
  function set_kardon_template_extension()
  {
    global $template;
    $template->set_extents(array(
      'header.tpl' => 'header'),
    dirname(__FILE__).'/template-extension/');
  }
}

Je vais quand meme essayer de rajouter cette classe pour le slideshow...

Dernière modification par P@t (2008-12-01 17:27:17)


P@t

Hors ligne

#9 2008-12-01 17:51:41

galain
Former Piwigo Team
2007-09-20
32

Re: Pouvoir styler la page diaporama

ça résout effectivement les deux problèmes, merci.

Hors ligne

#10 2008-12-01 22:58:41

plg
Équipe Piwigo
Nantes, France, Europe
2002-04-05
12644

Re: Pouvoir styler la page diaporama

galain a écrit:

J'ai mis en ligne une galerie test : http://bacasable.fr/piwigo/

Wow, superbe, l'avantage d'une longue période de Release Candidate, c'est qu'on aura plusieur templates/thèmes dès la sortie de la 2.0.0 :-) (et ça c'est génial).

galain a écrit:

Si vous voulez voir le genre de modifications que je voulais apporter au diaporama, lancer le à partir d'ici par exemple :
http://bacasable.fr/piwigo/picture.php?/37/category/6
ça ne restera probablement pas tout à fait ainsi mais l'idée y est

Très prometteur en effet. Si je comprends bien, l'idée c'est d'utiliser la "taille web" dans le diaporama, mais la redimensionner selon la taille de la fenêtre du navigateur (et ça marche très bien). Ce qui est embêtant, c'est qu'on aurait tendance à vouloir mettre une photo plus grande pour le diaporama, mais cette photo sera aussi utilisée en mode normal (non diaporama) et ça prend trop de place sur le page. D'un autre côté, si on utilise la photo "high size", ça risque d'être trop grand... enfin si on utilise pwg_high telle que je l'ai envisagée au départ (mais les fonctionnalités évoluent avec les utilisateurs). Bref, il faudrait presque imaginer un format "slideshow"...


Les historiens ont établi que Pierrick était le premier utilisateur connu de Piwigo.

Hors ligne

#11 2008-12-02 00:22:40

galain
Former Piwigo Team
2007-09-20
32

Re: Pouvoir styler la page diaporama

Je souhaiterais effectivement redimensionner l'image, si nécessaire, pour que les visiteurs ne disposant pas de beaucoup de place n'aient pas à scroller, et centrer l'image pour que ceux qui en ont beaucoup  n'aient pas l'image coller en haut.

Pour l'instant (sur ma version locale) j'arrive à faire les deux avec ie7, opera et webkit/khtml (chrome, safari & konqueror). Bizarrement je bloque pour l'instant avec Firefox : j'arrive à l'un ou l'autre mais pas les deux en même temps (j'ai encore une idée à tester).
Finalement je crois qu'un brin de javascript serait le bienvenu.

Autre problème qui m'ennuie : je trouve le redimensionnent dans IE et dans gecko 1.8 vraiment moche (à la différence de geckgo 1.9/Fx 3 où il est bien, comme webkit ou opera)

Bref, il faudrait presque imaginer un format "slideshow"...

Effectivement ça serait le mieux. Pour ma galerie perso j'hésitais entre des pwg_high pas trop grandes ou des "normales" assez grandes, mon comme ma galerie ne sera pas très fournie et  vu le prix du gigaoctet, je crois que je vais opter pour un format intermédiaire

Hors ligne

#12 2008-12-02 07:23:51

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: Pouvoir styler la page diaporama

C'est réellement une belle réalisation.
Quant à la dimension, c'est effectivement une bonne piste de réflexion, laquelle devrait donner lieu à des débats avec les professionnels de la photo.
Quel format mettre en ligne (et pour quelles raisons)?



(Je ne suis cependant pas favorable à l'usage de javascript sur la galerie (sauf en admin).)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#13 2008-12-02 16:56:20

galain
Former Piwigo Team
2007-09-20
32

Re: Pouvoir styler la page diaporama

merci :-)

VDigital a écrit:

(Je ne suis cependant pas favorable à l'usage de javascript sur la galerie (sauf en admin).)

Le diaporama resterait normalement accessible sans javascript, celui-ci permettrait juste de centrer verticalement et, si nécessaire, de diminuer la taille de l'image - et ce avec tous les navigateurs.

J'ai mis en ligne une version avec javascript :
http://bacasable.fr/piwigo/picture.php? … slideshow=

En cas de javascript désactivé, le diaporama s'affichera comme dans la version précédente : image redimensionnée avec les navigateurs qui peuvent le faire en css et sans centrage vertical.

Hors ligne

#14 2008-12-02 21:31:59

plg
Équipe Piwigo
Nantes, France, Europe
2002-04-05
12644

Re: Pouvoir styler la page diaporama

Je suis de moins en moins réfractaire à utiliser Javascript même dans la partie publique de la galerie (comprendre que j'y serait plutôt favorable). Mon changement de position par rapport au passé a 2 origines:

- des frameworks Javascript stables sont disponibles, et ils gèrent eux mêmes les problèmes de compatibilités navigateur
- les utilisateurs veulent plus de dynamisme sur les pages

galain, je le trouve très sympa ton diaporama, c'est vraiment agréable d'avoir la photo centrée sur l'écran. Bravo.


Les historiens ont établi que Pierrick était le premier utilisateur connu de Piwigo.

Hors ligne

#15 2008-12-03 15:42:12

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: Pouvoir styler la page diaporama

Suite à un MP de P@t, je commence à relire ce sujet, et je me pose plus de questions que je n'ai de réponses.

Un thème de yoga pour Piwigo 2.0.0 ayant un style particulier pour la page de diaporama.

./template/yoga/slideshow.tpl n'existait pas avant Piwigo
On peut le "templater" localement
Admin > Templates (Modèles) ce qui est également nouveau avec Piwigo

On peut le "templater" via themeconf.inc.php comme l'a démontré P@t.

On peut également "templater" ailleurs que dans ./template-extension/:
  $template->set_extents(array(
    'header.tpl' => 'header'),
  dirname(__FILE__).'/template/yoga/theme/kardon/');

(Dans ce cas, je conseille de bien mettre un commentaire HTML en début du slideshow.tpl indiquant la localisation du tpl).

On peut donc par ce biais ajouter des id= ou class= mais également
introduire des blocs:
{html_head}
{/html_head}
afin d'ajouter du css ou des scripts...
Ces ajouts seront en fin de la section <head> et donc surchargeront les définitions précédentes.

display: ou/et quelques this.style.display =
et bien d'autres sauront parfaitement styler la page.


Alors quel est le problème?


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact