Image aléatoire dans un article
J'ai construit mon propre modèle de sorte que, lorsque quelqu'un crée un article, l'image en haut (comme une image d'introduction) a un width de 100% et son propre height (pourrait être 200px ou peu importe ). Maintenant, quelqu'un a décidé de créer un nouvel article et de mettre plus d'une image dans l'article avec sa propre largeur, position, etc. Mais à cause de mon image d'introduction, ils ont tous une largeur de 100%.
Ma première pensée a été de créer un module pour ces images, mais je ne peux pas toujours créer un article pour quelqu'un et y placer un module, car il souhaite afficher sa photo par exemple à gauche avec 29,97% width (ou 65%, cela n'a pas d'importance).
Est-ce que quelqu'un connaît une solution pour cela?
J'apprécie toute l'aide et les commentaires!
EDIT: Merci à tous pour m'aider! Malheureusement, je ne peux accepter qu'une seule réponse. J'ai donc choisi @FFrewin car sa réponse indiquait quelques manières supplémentaires de traiter ce problème, mais les autres réponses m'ont également aidé!
Ce n'est peut-être pas la réponse exacte que vous recherchez, mais si c'est pour un site Web complet que vous développez et pas seulement pour un modèle que vous souhaitez distribuer, les idées suivantes pourraient bien fonctionner.
De manière générale, Johanpw suggère la solution la plus rapide et peut être appliquée facilement. Personnellement, j'aurais probablement combiné les éléments de toutes les autres réponses et peut-être même aller plus loin.
Parmi les différentes possibilités disponibles:
Une substitution de modèle est l'une de mes méthodes préférées, car je peux utiliser mes propres balises, conditions et classes sur les éléments.
De plus, en fonction des besoins, je pourrais implémenter les éléments suivants:
Champs personnalisés supplémentaires sur l'article, pour les images ou les diaporamas. Le Aixeena CCK , est une solution facile à mettre en œuvre et flexible pour de telles tâches.
Des boutons de l'éditeur personnalisés supplémentaires permettent d'insérer des images supplémentaires de tailles prédéfinies. Il existe des extensions diaporama/images qui fournissent de tels boutons pour permettre l'insertion d'images.
Il existe également des extensions permettant d'insérer des extraits de code dans le corps de l'article, avec un balisage prédéfini. Par exemple, Modèle de conten par des laboratoires standard est un outil pratique, ou RokCandy par rockettheme. Ils vous permettent de créer des blocs de code prédéfinis que l'utilisateur final peut facilement insérer. Votre code prédéfini peut contenir des balises et des classes, que vous afficherez d'une certaine manière dans le front-end.
Également dans éditeur JCE , vous pouvez créer certaines classes/certains styles, de sorte que l'utilisateur final puisse facilement les récupérer à partir d'une liste déroulante. vers le bas du champ et l'appliquer sur certains éléments de son contenu. Vous pouvez créer quelques styles, tels que petit-gauche, petit-droit, moyen-gauche, pleine largeur et former vos utilisateurs à leur utilisation.
Vous devez utiliser un sélecteur CSS plus spécifique pour ne cibler que l'image principale et non toutes les images ajoutées à un article.
L'image principale de l'article (ajoutée via l'onglet "Images et liens" dans l'éditeur d'article) est généralement affichée dans un <div class="item-image">, vous pouvez donc simplement changer votre CSS pour ne cibler que cette image:
.item-image img {
width: 100%;
height: auto;
/* Add your styles here */
}
Quelques idées:
- Utilisez le nième ou: premier sélecteur dans CSS, de sorte que seule la première image de cette zone soit 100%
- Ajoutez le ou les nouveaux styles qu’ils peuvent sélectionner via WYWIWYG à l’aide du fichier editor.css de votre modèle. Ils peuvent ensuite choisir la largeur qu’une image doit avoir.
- Utilisez l'image de l'article complet pour votre image supérieure et appliquez un style qui ne s'applique qu'à cette zone. Par défaut, je pense que ce serait une image .item-img, mais vous pouvez toujours mettre à jour la mise en page des articles dans les remplacements de votre modèle pour que cela fonctionne comme vous le souhaitez.
- Utilisez max-width au lieu de width, et dites-leur qu'ils doivent toujours créer l'image principale X pixels ou plus. Étirer des images au-dessus de leur taille naturelle n’est jamais une bonne idée, car elles pixellisent.
Si vous souhaitez forcer la conception de tous les articles, vous pouvez créer un remplacement de modèle pour les articles qui enlèvent toutes les images de l'article, placez le premier à votre guise (100%) et créez une galerie pour les autres images. De cette façon, nécessite un codage php.