CMS Automne

Forum de la communauté du CMS Automne
Nous sommes actuellement le Dim Mai 05, 2024 11:16 am

Le fuseau horaire est UTC [Heure d’été]




Publier un nouveau sujet Répondre au sujet  [ 9 messages ] 
Auteur Message
MessagePublié: Jeu Nov 17, 2011 10:26 pm 
Hors-ligne

Inscrit(e) le : Jeu Nov 03, 2011 10:24 am
Message(s) : 12
Bonjour,

Je suis en train de créer un site et j'aimerais utilisé la barre de rangée texte plus média à droite. J'aimerais y inséré une image et quand on y clique dessus il ouvre un fichier .PDF par exemple je met une image de casserole et quand on y clique dessus on ouvre un fichier pdf avec la recette. J'aimerais faire cela avec un modèle de rangée que j'utiliserais très fréquemment cette fonction.

J'ai essayé mais je n'y arrive pas ... de plus quel taille doit avoir l'image pour aller à droite ? car après de nombreux essais, je n'y arrive pas. Elle s'affiche toujours au dessus.

Merci d'avance


Haut
 Profil  
 
 Sujet du message: Re: Modèle de rangée
MessagePublié: Ven Nov 18, 2011 10:00 am 
Hors-ligne
Administrateur
Avatar de l’utilisateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France
Tu peux faire ça avec la rangée 'Texte et media à droite' fournie par défaut

Dans le module médiathèque, tu isères ton fichier PDF comme fichier source et une image comme vignette, puis tu publies le média.

Tu peux définir la taille de ta vignette dans le code source XML de la rangée en spécifiant une largeur fixe par exemple.
Voir l'aide du module médiathèque dans Automne.

On affiche la vignette avec
Code :
 {Media:Fichier:thumb|width,height}
qui peut prendre des paramètres facultatifs : largeur et hauteur.

Pour forcer le redimensionnement des vignettes à 180px de large par exemple on écrira donc simplement :

Code :
{Media:Fichier:thumb|180}


Voir le billet de blog sur le redimensionnement des images à la volée : http://blog.automne-cms.org/?item=1476

Tu inséres ensuite la rangée "texte et media à droite" dans ta page.

Pour le reste c'est du CSS, tu peux reprendre le code de la démo à ce niveau et le personnaliser.

Le positionnement est fait avec un élément <div> qui possède deux classes CSS : right et media-item

La classe right fait flotter le conteneur à droite
la classe media-item ajoute une marge à gauche pour espacer le media et le texte.

Tout ceci est illustré dans la capture d'écran ci-jointe :
Pièce jointe:
Description du fichier : Inspection du div .right .media-item dans webkit
right media-item.png
right media-item.png [ 257.62 Kio | Consulté 45136 fois ]


Voilà avec ça tu devrais t'en sortir ;)

_________________
Frank
http://www.automne-cms.org


Haut
 Profil  
 
 Sujet du message: Re: Modèle de rangée
MessagePublié: Lun Nov 21, 2011 11:30 am 
Hors-ligne

Inscrit(e) le : Jeu Nov 03, 2011 10:24 am
Message(s) : 12
Merci beaucoup pour votre aide


Haut
 Profil  
 
 Sujet du message: Re: Modèle de rangée
MessagePublié: Lun Nov 21, 2011 11:36 am 
Hors-ligne

Inscrit(e) le : Jeu Nov 03, 2011 10:24 am
Message(s) : 12
J'aimerais bien modifier le model de rangée : Texte et Média à Droite pour avoir la vignette du fichier en 1er et après le liens vers le fichier source.

je m'explique:

Image

j'aimerais que dans chaque rangée utilisant ce model, l'image soit en dessus du liens.

Je me permet de demander votre aide car je n'ai pas envie de modifier ce modèle et que plus rien ne fonction.

Merci d'avance


Haut
 Profil  
 
 Sujet du message: Re: Modèle de rangée
MessagePublié: Lun Nov 21, 2011 11:43 am 
Hors-ligne
Administrateur
Avatar de l’utilisateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France
Là c'est juste une question de XHTML/CSS, c'est plus vraiment lié à Automne.

Aurais-tu une URL accessible de la page en question ?

_________________
Frank
http://www.automne-cms.org


Haut
 Profil  
 
 Sujet du message: Re: Modèle de rangée
MessagePublié: Lun Nov 21, 2011 1:02 pm 
Hors-ligne

Inscrit(e) le : Jeu Nov 03, 2011 10:24 am
Message(s) : 12
Voilà

http://www.lepetitjardinier.ch/nouvelle ... emaine.php


merci d'avance


Haut
 Profil  
 
 Sujet du message: Re: Modèle de rangée
MessagePublié: Lun Nov 21, 2011 1:42 pm 
Hors-ligne
Administrateur
Avatar de l’utilisateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France
Il te suffit d'inverser l'ordre de l'affichage de l'image et du lien vers le fichier.

Un exemple rapide de ce que ça peut donner en code final :

Pièce jointe:
Description du fichier : Modification de texte et media droite dans Webkit Inspector
Capture d’écran 2011-11-21 à 13.40.23.png
Capture d’écran 2011-11-21 à 13.40.23.png [ 475.89 Kio | Consulté 45125 fois ]

_________________
Frank
http://www.automne-cms.org


Haut
 Profil  
 
MessagePublié: Lun Nov 21, 2011 1:55 pm 
Hors-ligne

Inscrit(e) le : Jeu Nov 03, 2011 10:24 am
Message(s) : 12
Formidable mais comment as tu fais tu as modifié le modèle de rangée ? ou c'est dans le css ??


Haut
 Profil  
 
MessagePublié: Lun Nov 21, 2011 2:16 pm 
Hors-ligne
Administrateur
Avatar de l’utilisateur

Inscrit(e) le : Jeu Juin 16, 2005 8:05 am
Message(s) : 628
Localisation : Toulouse, France
Non là j'ai juste modifié le HTML généré avec l'outil de développement de Safari.

En effet ensuite il faut aller modifier en conséquence le code XML de la rangée associée.
Je n'ai pas eu à toucher au CSS simplement au HTML.

Si tu regardes bien le code, l'appel au media se fait avant le lien vers le fichier que je fais dans un paragraphe pour forcer le retour à la ligne.
Avec ça tu dois pouvoir faire tes tests.

Normal que tu aies peur de tout casser puisque c'est en ligne.

Une solution est de faire une copie de cette rangée et de l'utiliser sur une page de test non accessible aux visiteurs (sous une page dépubliée donc), ainsi tu pourras travailler plus sereinement.

C'est vraiment un couper-coller et une insertion de balise HTML, rien de bien compliqué.

_________________
Frank
http://www.automne-cms.org


Haut
 Profil  
 
Afficher les messages publiés depuis :  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 9 messages ] 

Le fuseau horaire est UTC [Heure d’été]


Qui est en ligne ?

Utilisateur(s) parcourant ce forum : Aucun utilisateur inscrit et 13 invité(s)


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas insérer de pièces jointes dans ce forum

Recherche de:
Aller vers :  
cron
Powered by phpBB® Forum Software © phpBB Group
Traduit par Maël Soucaze et Elglobo © phpBB.fr