web-dev-qa-db-fra.com

Mise en page du blog - positionnement réactif de la grille d'images

J'utilise la présentation de blog de catégorie et la substitue pour envelopper un lien autour de l'article intro-image, qui pointe vers l'article.

Maintenant, je veux obtenir un positionnement réactif de la grille d’image, comme vous pouvez le voir ici . Cela pourrait être réalisé en utilisant CSS.

Mais je ne sais pas quel fichier CSS je dois éditer ni comment le faire fonctionner.

Quelqu'un sait comment y parvenir et aussi une astuce sur ce à quoi devraient ressembler les classes CSS?

J'utilise Joomla 3.3.6 et le modèle Afterburner2 avec Gantry.

Merci pour les solutions ... (Je l’évaluerais mais je n’ai pas assez de représentants) Après les avoir lues, j’ai réessayé et réalisé que je pouvais changer le nombre de colonnes dans les réglages de l’élément de menu. Cela me semble beaucoup plus intuitif que de faire une dérogation pour l'ensemble blog.php. Je veux dire si j'écris le nombre de colonnes statiques dans blog.php c'est très rigide!?

Avec cette approche, j'ai eu le problème que le texte d'introduction était toujours affiché. Aussi, quand je mets l'option "Afficher le texte d'introduction" dans l'article ou dans le menu pour "masquer". Donc, je mets le "plus" au début de l'article et ensuite le texte de l'article. "Show read more" J'ai également mis à cacher. Donc, sur mon site avec la catégorie blog je ne vois que des images. Une rangée avec 4 images.

Mais alors j'obtiens un autre problème:

1) Je ne pouvais pas changer l'espacement entre les images, car je voulais le rendre un peu plus petit.

2) Si je réduis la largeur de la page de sorte que seules deux images soient affichées dans une rangée, elles ne sont pas exactement côte à côte. Le droit est un peu en dessous du gauche.

Au début, je pensais que c’était la bonne façon de faire, mais au bout d’un moment, je ne savais plus trop.

Cela peut-il être un bon moyen (enregistrez-le avec une substitution CSS ou quelque chose) ou devrais-je recommencer avec une autre approche, par exemple, éditer le blog.php (au début, je voulais l’éditer, mais je ne sais pas comment changer la partie dans blog.php vers une mise en page à 3 ou 4 colonnes) !?

joomla-3.xoverridescontentgantry
5
oodoloo

Gantry prend en charge les colonnes et est réactif. Vous pouvez l'utiliser comme ceci (cet exemple vous donnera 3 colonnes de 33,33% chacune):

<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image1.jpg">
       <div class="clear"></div>
   </div>
</div>
<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image2.jpg">
       <div class="clear"></div>
   </div>
</div>
<div class="gantry-width-33 gantry-width-block">
   <div class="gantry-width-spacer">
       <img src="image3.jpg">
       <div class="clear"></div>
   </div>
</div>

Pour ajouter du code CSS à n’importe quel modèle RocketTheme, créez simplement un nouveau fichier comme celui-ci: /templates/YOURTEMPLATE/css/YOURTEMPLATE-custom.css, dans ton cas /templates/rt_afterburner2/css/rt_afterburner2-custom.css. Le fichier sera détecté automatiquement par Gantry.

Fondamentalement, pour que cela fonctionne avec la présentation du blog, vous devez créer un remplacement pour \components\com_content\views\category\tmpl\blog.php.

Généralement, vous copiez ce fichier dans \templates\rt_afterburner2\html\com_content\category\blog.php et le modifier, mais Gantry utilise une méthode différente pour gérer les remplacements, et vous devez le copier dans \templates\rt_afterburner2\html\joomla\3.3\com_content\category\blog.php _ (en supposant que vous utilisiez Joomla version 3.3 ou ultérieure).

3
johanpw

Dans Joomla, il y a généralement plusieurs façons d'obtenir le même résultat (ou un résultat similaire).

Je suggérerais qu'au lieu d'utiliser la présentation du blog, vous devriez essayer RokSprocket . C'est un module Joomla gratuit qui peut afficher votre contenu (articles) de plusieurs façons et les filtrer par catégorie, de la même manière qu'une présentation de blog. Les paramètres vous permettent de masquer le texte d’introduction, de définir le nombre de colonnes, de redimensionner les images, etc. Jetez un coup d'œil à la démo pour quelques idées.

Dans votre cas, je pense que la disposition "Grille" ou "Mosaïque" peut fonctionner, cela dépend vraiment de la façon dont vous configurez le module.

Grids Layout example

Pour afficher votre module dans un article, créez simplement un article vide et tapez {loadposition YourModulePosition} dans le contenu. Puis publiez le module RokSprocket sur YourModulePosition. (Ou jetez un oeil à la solution de @ FFrewin dans ce post ).

3
johanpw

Afterburner 2 est basé sur le cadre de Gantry. Vous pouvez donc ajouter du CSS personnalisé à l'adresse /public_html/templates/rt_afterburner2/css. Vous devrez peut-être créer le fichier s'il n'existe pas déjà.

Vous pouvez utiliser des requêtes multimédia dans votre CSS pour (par exemple) modifier le nombre de colonnes en fonction de la largeur de l'écran.

Extraire les lignes pertinentes du fichier de requêtes multimédia inclus dans le modèle à l'adresse /public_html/templates/rt_afterburner2/less/mediaqueries.less peut vous fournir un squelette comme point de départ pour créer vos présentations réactives pour chaque largeur d'écran, ce qui pourrait ressembler à ceci:

@media only screen and (min-width: 1200px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
  /* four columns */
  .columns {float: left; width: 25%;}
}

@media (min-width: 768px) and (max-width: 959px) {
  /* three columns */
  .columns {float: left; width: 33%;}
}

@media (max-width: 767px) {
  /* two columns */
  .columns {float: left; width: 50%;}
}

@media only screen and (max-width: 480px) {
  /* one column */
  .columns {float: left; width: 100%;}
}

Voir http://www.gantry-framework.org/documentation/joomla/advanced/responsive_grid_system.md pour plus de détails sur le système de grille sensible de Gantry.

2
Neil Robertson

Pas certain si cela est autorisé, car cela peut être considéré comme une auto-promotion. Si non, désolé, veuillez éditer au besoin.

Le visuel auquel vous êtes lié provient de mon nouveau modèle commercial, Fotofit . Il utilise uniquement le contenu principal, avec des remplacements, et css pour réaliser la mise en page et les styles. Il est donc entièrement personnalisable. C'est également le modèle Joomla le plus rapide jamais créé.

Le site de démonstration n'utilise aucune extension tierce. La grille d'images correspond à la vue des catégories en vedette. Si l'option "en-têtes liés" est activée, l'image d'introduction est également liée à l'article.

Le meilleur de tous, il est en vente actuellement avec 50% de réduction jusqu'à la fin de la journée. Remise appliquée à la caisse automatiquement.

1
Seth Warburton