Recadrer et redimensionner automatiquement thumbnails (image à la une)

Statut : non résolu

Ce sujet contient 4 réponses, 2 participants et a été mis à jour pour la dernière fois par Miracle, le il y a 8 années et 1 mois.

5 sujets de 1 à 5 (sur un total de 5)

Auteur

Messages
21 avril 2015 à 15 h 48 min #549082
Miracle
Participant

Padawan WordPress
77 contributions
Bonjour,

Ma configuration WP actuelle
– Version de WordPress : 4.1.1
– Version de PHP/MySQL : 5.1
– Thème utilisé : Vertex (child)
– Extensions en place :
– Nom de l’hebergeur : OVH
– Adresse du site : http://www.avocats-anstett-pavolini.com

Problème(s) rencontré(s) :

Je voudrais que les vignettes des articles sur la page Actualités (http://www.avocats-anstett-pavolini.com/actualites/) soient carrées. Ces vignettes correspondent à l’image à la une ou, à défaut, à la première image dans l’article.

J’ai essayé de régler ça avec le CSS, en vain. Le code :
```
.thumbnail:before {
float:left; 
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); 
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5); 
content: «  »; 
top: 0; left: 0; 
width: 100%; height: 100%;
}

.thumbnail { 
margin: 7px 25px 30px 0; 
padding: 0; 
float: left; 
width: 14.1em;
height: 14.1em;
position: relative;
}
```
(J’ai essayé aussi avec « clip », sans plus de succès.)

On m’a suggéré de créer une nouvelle taille d’image, avec redimensionnement à l’upload.
```
add_image_size( ‘custom_size’, 200, 200, array( ‘center’, ‘center’ ) );
```
J’ai consulté le Codex à ce sujet (https://codex.wordpress.org/Function_Reference/add_image_size) mais je n’arrive pas à tester cette solution car mes connaissances en PHP sont limitées et je ne sais où/comment intégrer cette ligne de code. 😳

Je suppose que ça concernerait ce passage du fichier functions.php :
```
function et_attach_bg_images() {
	$template_directory = get_template_directory_uri();
	$header_bg = et_get_option( ‘vertex_header_bg_image’, $template_directory .  ‘/images/bg.jpg’ );

	if ( is_single() || is_page() || ‘project’ === get_post_type() && has_post_thumbnail() ) {
		if ( ( $et_custom_image = get_post_meta( get_the_ID(), ‘_et_single_bg_image’, true ) ) &&  » !== $et_custom_image ) {
			$header_bg = $et_custom_image;
		} else if ( has_post_thumbnail() ) {
			$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), ‘full’ );
			$header_bg = $image_attributes[0];
		}
	}
```
Ne trouvant pas la solution, je pourrais me contenter de vignettes juste redimensionnées MAIS celles-ci, pour une raison que j’ignore, apparaissent recadrées de manière, pour moi, aléatoire (donc moche).

Je n’ai pas eu plus de succès avec la méthode manuelle de recadrage des images à la une (dans les Médias).

Quelqu’un aurait-il la bonté de m’aider ? Je sèche ! Merci d’avance.
21 avril 2015 à 15 h 50 min #1002555

Miracle
Participant

Padawan WordPress
77 contributions

(mot de passe pour Actualités : chocolat) 😋

21 avril 2015 à 18 h 08 min #1002554
Li-An
Modérateur

Maître WordPress
27655 contributions
Le codex sur les images à la une et les miniatures qui vont avec: https://codex.wordpress.org/Post_Thumbnails. Il y a de nombreux tutos pour les utiliser.

Dans votre code
```
add_image_size( ‘custom_size’, 200, 200, array( ‘center’, ‘center’ ) );
```
array( ‘center’, ‘center’ ) n’a aucun sens pour moi.
```
add_image_size( ‘carre’, 200, 200);
```
suffira largement. À mettre dans le fichier functions.php juste en dessous de
```
add_theme_support( ‘post-thumbnails’ );
```
21 avril 2015 à 18 h 09 min #1002556
Li-An
Modérateur

Maître WordPress
27655 contributions
Remplacer la ligne
```
$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), ‘full’ );
```
par
```
$image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), ‘carre’ );
```
et je pense que ça devrait le faire – vous devriez d’ailleurs utiliser un thème enfant pour ce genre de manip.
21 avril 2015 à 19 h 03 min #1002557
Miracle
Participant

Padawan WordPress
77 contributions
Bonsoir et merci de votre réponse.

J’ai testé votre proposition et cela aboutit à nouveau à un site totalement inaccessible (page blanche).

J’utilise effectivement un thème enfant. Le problème peut-il venir de là ? Je procède comme suit :

Je remplace ‘full’ par ‘carre’ dans functions.php (fichier du thème enfant).

En revanche,
```
add_theme_support( ‘post-thumbnails’ );
```
se trouve dans un fichier post_thumbnails_vertex.php situé dans un sous-dossier du thème parent (dossier « epanel »).

J’ai donc ajouté la ligne
```
add_image_size( ‘carre’, 200, 200);
```
dans une copie du fichier post_thumbnails_vertex.php que j’ai mise dans le dossier du thème enfant. J’ai essayé en le mettant à la racine de ce dossier ou dans un sous-dossier reproduisant l’architecture du thème parent : ça revient au même, page blanche, site HS.

D’où cela peut-il venir ?
Merci d’avance.
Auteur

Messages