Empiler deux images avec des légendes côte à côte et centré dans Wordpress

Question

cela me rend absolument fou. Je ne suis pas le plus expérimenté avec CSS, donc j'espère que c'est quelque chose de simple. J'utilise Wordpress 2.9.2 avec le thème "Le lendemain matin".

J'essaie d'écrire un post où je veux afficher deux petites images, avec des légendes, côte-à-côte et centré au milieu de la page.

Voici le code HTML que je utilise pour afficher les images:

[caption align="alignnone" width="150" caption="Protein rest"] 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"> 
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" /> 
</a>[/caption] 
[caption align="alignnone" width="143" caption="Saccharification rest" captionalign="center"] 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"> 
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" /> 
</a>[/caption] 

J'ai essayé d'utiliser « aligncenter » et « AlignLeft » pour l'alignement de la légende - si je l'utilise « AlignLeft » les photos sont alignés parfaitement, mais tout le chemin à la gauche de la page. Si j'utilise "aligncenter", les photos sont au centre, mais empilées l'une sur l'autre.

Ma première pensée était d'envelopper les images dans un div en utilisant:

<div style="text-align:center;">image code</div> 

mais cela ne fonctionne pas. Maintenant, si je m'enroule dans un div centré comme ça et omet les balises [légende], ça marche, mais j'ai besoin des légendes. Ces balises de légende sont traduites par Wordpress dans son propre div de classe wp-caption. J'ai également essayé d'encapsuler chaque image séparée dans son propre div dans un wrapper div centré parent.

Voici les parties pertinentes du style.css - s'il vous plaît laissez-moi savoir si vous avez besoin d'autres informations, et si vous pouvez m'aider, je vais reporter sauter du pont le plus proche!

Merci!

Style.css:

.aligncenter, div.aligncenter { display: block; margin: 14px auto; } 
.alignleft { float: left; margin: 0 14px 10px 0; } 
.alignright { float: right; margin: 0 0 10px 14px; } 
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } 
.wp-caption img { margin: 0; padding: 0; border: 0 none; } 
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 14px; padding: 5px 4px 5px 5px; margin: 0; } 

PS - Je suis conscient de la fonctionnalité Galerie disponible dans Wordpress, mais je voudrais éviter et je serais ravi de comprendre pourquoi l'emballage dans un div ne se déplace pas tout kit au centre.

Enfin, juste pour être complet, voici la source de la page lorsqu'elle est chargée en utilisant l'emballage div et le code d'image ci-dessus (vous pouvez voir comment Wordpress traduit les balises légende):

<div style="text-align:center;"> 
<div class="wp-caption alignnone" style="width: 160px"> 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"> 
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" /> 
</a> 
<p class="wp-caption-text" style="text-align:center">Protein rest</p> 
</div> 
<div class="wp-caption alignnone" style="width: 153px"> 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"> 
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" /> 
</a> 
<p class="wp-caption-text" style="text-align:center">Saccharification rest</p> 
</div> 
</div> 

Answer 1

Je ne sais pas si vous cherchez

1. A Quick Fix Editor, Wordpress en utilisant la légende et le code html
2. A Quick Fix Editor, Wordpress html recréer le code de légende à la main
3. Un correctif permanent via le fichier functions.php et le add_shortcode() dans wp-includes/media.php
4. Un correctif permanent via CSS qui peut affecter toutes les légendes.

Je donne 1 garder votre code aussi intact que possible

<div style="text-align:center;"> 
// This should align the entire block [it worked for me at least] 
    <div style="display:inline-block;"> 
     <div style="float:left;"> 
     // Takes care of the centering down the middle 
      [caption align="aligncenter" width="150" caption="Protein rest"] 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"> 
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" /> 
</a>[/caption] 
     //Your caption code above with alignnone changed to aligncenter 
     </div> 
     <div style="float:left;"> 
      [caption align="aligncenter" width="143" caption="Saccharification rest" captionalign="center"] 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"> 
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" /> 
</a>[/caption] 
     </div> 
    </div> // End the Block Div 
</div> // End the Center Div 

[EDIT: Je viens de voir que vous vous répondu -.- l'affichage de toute façon: D]

Answer 2

Le problème que vous pourriez avoir est qu'un conteneur div agit comme une boîte de dimensionnement automatique. Par conséquent, lorsque vous lui dites d'aligner le centre, il remarque automatiquement qu'il doit s'étendre vers le bas (parce que c'est le flux de page) si vous donnez au conteneur div une largeur définie et que les images sont centrées sur la page. il fera ce que vous voulez. Sur la base de votre code est ce un petit extrait de ce qu'il devrait ressembler en html:

<center> 
<div width="300"> 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"> 
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" /> 
</a> 
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"> 
<img title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" /> 
</a> 
</div> 
</center> 

Je sais que vous recherchez CSS, mais cela prendrait un peu plus longtemps et je suis juste marcher la porte au travail .

Espérons que cela aide et bonne chance. -Gale

Answer 3

Eh bien, après beaucoup de déconner, j'ai finalement réussi à le faire fonctionner.

J'ai créé quelques nouveaux éléments CSS comme suit:

.stackwrapper {max-width: 311px;margin: 0 auto;} 
#div1 {width: 162px;float: left;} 
#div2 {margin-left: 162px;} 

rendons compte que c'était juste codé pour répondre à mes demandes immédiates, de sorte que les largeurs sont codés en dur pour le poste que je travaillais. Fondamentalement, une image est de 150 pixels de large et l'autre de 137 pixels. Le code de légende ajoute un remplissage de 5px et une bordure 1px à chacun, donc la largeur totale pour mes images côte à côte est de 311px (largeur de l'image + 10px L & R rembourrage par image + 2px L & R frontière par image).

l'emballage est réglé sur cette largeur et la marge: 0 auto semble centrer (mais pas exactement pourquoi ... peut me la moindre idée de qui que ce soit dans?)

J'enveloppez image1 dans div1 (avec ses image + padding + largeur de bordure) et image2 dans div2 (avec sa marge-gauche définie à la largeur de la première image)

Cela semble fonctionner, maintenant je dois le coder dans un shortcode wordpress afin que je puisse spécifier les largeurs d'image et l'avoir générer le html à la volée.

Grâce à Gale, vous m'avez fait penser à la largeur.

Answer 4

Je ne sais pas si elle est pile appropriée étiquette pour répondre à mon propre message deux fois (!) mais je voulais mettre ce code là-bas au cas où il aide quelqu'un d'autre.

Voici une fonction personnalisée (coller dans le fichier function.php de votre thème Wordpress) et des éléments CSS qui vous permettront d'utiliser un shortcode pour placer deux images côte à côte et les aligner à gauche, à droite ou au centre le défaut est le centre si aucun alignement n'est spécifié).

Il est codé pour deux images, mais pourrait facilement être modifié pour gérer plus. Cela nécessite également que vous utilisiez les balises [caption] sur les images, puisque c'est ce dont j'avais besoin (et ce que la chaîne scinde), mais je pourrais le peaufiner plus tard pour faire face à différentes situations. Fondamentalement, il analyse le code d'image entre vos nouvelles balises [side_by_side] et le scinde sur [/ caption], créant un tableau où chaque élément est une image. Il analyse les largeurs (puisque chaque balise d'image a deux largeurs spécifiées - légende et l'image réelle - elle vérifie qui est plus grande et utilise celle-ci) et génère ensuite le code w/div correctement dimensionné.

De toute évidence, ce n'est pas une solution «attraper tout» ou je le téléchargerais en tant que plugin!Il a été codé pour mes besoins très spécifiques, mais il peut être modifié pour vos besoins spécifiques avec un peu de recodage. Utilisez avec ma bénédiction, je n'accepte aucune responsabilité pour ce qu'il pourrait faire à votre site Web :) PS - Je sais que l'utilisation de regex est généralement mauvaise pour l'analyse html, mais dans mon cas c'était un si petit travail à petite échelle que je n'ai pas pense que ce serait un problème. Si quelqu'un veut optimiser/recodage laissez-moi savoir, je me suis juste appris assez PHP pour le faire aujourd'hui, absolument pas un expert ...

/* CUSTOM FUNCTION ADDED BY JIM - 5/20/2010 TO ALLOW CENTERING SIDE-BY-SIDE IMAGES */ 

add_shortcode('side_by_side', 'side_by_side'); 

function side_by_side($attr, $content = null) { 

extract(shortcode_atts(array(
    'align' => 'center' 
), $attr)); 

$images = explode("[/caption]", $content, -1); 
foreach($images as &$image) 
{ 
    $image = $image.'[/caption]'; 
} 

$img = array(); 
foreach($images as $img_tag) 
{ 
preg_match_all('/width=\"(.*?)\"/i', $img_tag, $img[$img_tag]); 
} 

$widths = array(); 

for ($i = 0; $i < count($images); $i++) 
{ 
    $firstval = $img[($images[$i])][1][0]; 
    $secondval = $img[($images[$i])][1][1]; 
    if ($firstval >= secondval) 
     $widths[$i]=$firstval; 
    else 
     $widths[$i]=$secondval; 
} 

return '<div class="main-img-wrap wrap' . esc_attr($align) . '" style="max-width: ' . (24 + (int) $widths[0] + (int) $widths[1]) . 'px"><div class="sub-img-wrap" style="width: ' 
. (12 + (int) $widths[0]) . 'px">' . do_shortcode($images[0]) . '</div><div style="margin-left: ' . (12 + (int) $widths[0]) . '">' . do_shortcode($images[1]) . '</div></div>'; 
} 

Et les éléments CSS:

/* centered side-by-side image wrappers, added by Jim 5/20/2010 */ 

.main-img-wrap {} /* left blank for future style enhancements */ 
.sub-img-wrap {float: left;} 
.wrapcenter {margin: 0 auto;} 
.wrapright {float: right; margin: 0 0 10px 14px;} 
.wrapleft { float: left; margin: 0 14px 10px 0; }