Affichage de contenu ordre aléatoire

4 septembre 2019 à 12:19:39

Bonjour,

J'ai une page avec ce code :

<div class="vc_row wpb_row vc_row-fluid vc_custom_1566557204091 vc_row-has-fill"><div class="wpb_column vc_column_container vc_col-sm-12 vc_col-has-fill"><div class="vc_column-inner vc_custom_1566509456890"><div class="wpb_wrapper">
<div class="stm-trophy-carousel stm-trophy-carousel-3400">

	<div class="clearfix">
		<div class="stm-title-left">
			<h3 class="stm-main-title-unit">Découvrir tout</h3>
		</div>
		<div class="stm-carousel-controls-right stm-thophies-controls">
			<div class="stm-carousel-control-prev"><i class="fa fa-angle-left"></i></div>
			<div class="stm-carousel-control-next"><i class="fa fa-angle-right"></i></div>
		</div>
	</div>

	<div class="stm-trophy-carousel-init-unit">
		<div class="stm-trophy-carousel-init ">		
			<a href="https://www.monnom.fr/page1/" class="trophy_link">
				<div class="stm-single-trophy">
					<div class="image" >
						<img src="https://www.monnom.fr/wp-content/uploads/2019/09/image1.jpg" class="attachment-full" alt="Image 1" />
					</div>
					<div class="stm-year h6">XXX</div>
					<div class="stm-title heading-font">Page 1	</div>
					<div class="stm-border stm-animated"></div>
				</div>
			</a>
			<a href="https://www.monnom.fr/page2/" class="trophy_link">
				<div class="stm-single-trophy">
					<div class="image" >
						<img src="https://www.monnom.fr/wp-content/uploads/2019/09/image2.jpg" class="attachment-full" alt="Image 2" />
					</div>
					<div class="stm-year h6">XXX</div>
					<div class="stm-title heading-font">Page 2	</div>
					<div class="stm-border stm-animated"></div>
				</div>
			</a>	
			<a href="https://www.monnom.fr/page3/" class="trophy_link">
				<div class="stm-single-trophy">
					<div class="image" >
						<img src="https://www.monnom.fr/wp-content/uploads/2019/08/image3.jpg" class="attachment-full" alt="Image 3" />
					</div>
					<div class="stm-year h6">XXX</div>
					<div class="stm-title heading-font">Page 3</div>
					<div class="stm-border stm-animated"></div>
				</div>
			</a>	
		</div>
	</div>
</div>
</div>
</div>
</div>
</div>

Cela forme donc un carousel avec des images et un texte en dessous. On peut cliquer sur l'image pour aller vers une page. J'ai volontairement couper le code pour éviter que ce soit trop long mais il faut imaginer que tout ce qui est entre <a> et </a> est répété (on a donc : image4, image5 etc jusqu'à 22).

Tel que le code est, cela m'affiche toujours mes images dans l'ordre dans lequel je les ai écrit (normal). Genre : image1, image2, image3, etc.

J'aimerai pouvoir faire de l'affichage aléatoire : si j'actualise ma page, je pourrais très bien avoir : image3,image2,image1 puis ensuite image2,image1,image3 et ainsi de suite...

Comment faire ?

J'ai testé ceci tout en sachant que cela n'allait pas vraiment répondre à mon truc mais bon, peut être est ce une piste ?

$image1 = '<a href="https://www.monnom.fr/page1/" class="trophy_link">
				<div class="stm-single-trophy">
					<div class="image" >
						<img src="https://www.monnom.fr/wp-content/uploads/2019/09/image1.jpg" class="attachment-full" alt="Image 1" />
					</div>
					<div class="stm-year h6">XXX</div>
					<div class="stm-title heading-font">Page 1	</div>
					<div class="stm-border stm-animated"></div>
				</div>
			</a>';
$image2 ='<a href="https://www.monnom.fr/page2/" class="trophy_link">
				<div class="stm-single-trophy">
					<div class="image" >
						<img src="https://www.monnom.fr/wp-content/uploads/2019/09/image2.jpg" class="attachment-full" alt="Image 2" />
					</div>
					<div class="stm-year h6">XXX</div>
					<div class="stm-title heading-font">Page 2	</div>
					<div class="stm-border stm-animated"></div>
				</div>
			</a>';
$image3 = '	
			<a href="https://www.monnom.fr/page3/" class="trophy_link">
				<div class="stm-single-trophy">
					<div class="image" >
						<img src="https://www.monnom.fr/wp-content/uploads/2019/08/image3.jpg" class="attachment-full" alt="Image 3" />
					</div>
					<div class="stm-year h6">XXX</div>
					<div class="stm-title heading-font">Page 3</div>
					<div class="stm-border stm-animated"></div>
				</div>
			</a>	';
             
echo ${'image' . rand(1, 3)};

Merci pour vos idées !

arnosos

4 septembre 2019 à 19:34:26

Bonjour,

A ta place j'utiliserais des tableaux pour sélectionner de façon random les images. Voici le principe auquel j'ai pensé :

Etape 1) Tu places tes images dans un tableau

Etape 2) Tu sélectionnes aléatoirement une image en utilisant la fonction rand

Etape 3) Tu ajoute le code de l'image ( qui doit être sous forme de chaîne de caractères dans le tableau )

Etape 4) Suppression de la ligne située à l'index sélectionné et réindexation du tableau

Etape 5) Affichage des images

Selon devrait ressembler à ça :

<?

$images = "";

while(sizeof($tableau)){

    // Choix d'un idex aléatoire 
    $îndexAleatoire = rand(0, sizeof($tableau));

    // Construction partielle du code qui affichera les images 
    $images .= $tableau[$indexAleatoire];

    // Suppression de l'image sélectionnée du tableau
    unset($tableau[$indexAleatoire]); 

    // Réindexation du tableau
    $tableau = array_values($tableau); 
}

?>

Pour afficher les images :

// Méthode une 

<? php 
    echo $images;
?>


// Méthode 2
<?= $images; ?>

Tu peux faire la même chose avec Javascript.

zazzou

5 septembre 2019 à 13:36:06

Merci pour cette première réponse.

Je n'arrive pas à trop à la mettre en place pour le moment : je ne vois pas trop où faut il que je lui dise que :

- j'ai plusieurs images, donc mettre mes images dans un tableau
- je veux les afficher 4 par 4 de manière aléatoire... parce que j'ai l'impression que ce code permet d'afficher une à une les images

Merci

arnosos

7 septembre 2019 à 12:24:01

Pas de quoi, on est là pour aider ?

As-tu pu avancer ?

Quand je parle de mettre les images dans un tableau je parle de mettre le code HTML en chaînes de caractères dans ce tableau. Le but sera ensuite de "construire" ton carousel en concaténant de façon aléatoire ces chaînes de caractères pour en créer une seul qui contiendra le code relatif aux images du carousel. Et à chaque actualisation cette chaîne sera différente et donc l'ordre des images le sera aussi.

Quand tu dis "4 à 4" tu veux dire une image puis une autre 4 fois ? Ou bien tu veux dire que tu veux voir 4 images apparaître puis 4 autres et 4 autres etc. ?

zazzou

10 septembre 2019 à 9:57:32

Oui ce que je veux dire c'est que je veux voir 4 images apparaitre puis en cliquant sur la flèche du carrousel, on voit 4 autres images et ainsi de suite.

Là pour le moment, je n'arrive à afficher qu'une seule image par une seule image.

zazzou

11 septembre 2019 à 15:21:26

Un petit coup de main ?

philodick

12 septembre 2019 à 14:16:09

Bonjour,

Je n'arrive pas trop à voir en quoi c'est un problème php. C'est parce que tu ne veux pas charger toutes les images ?

N'oubliez pas d'activer les erreurs PDO.

zazzou

16 septembre 2019 à 14:50:16

Salut

Et bien je ne sais pas. Peut être qu'en effet je peux faire ça différemment...

Je m'en fiche de charger toutes les images ou non.

Je veux simplement pouvoir faire de l'aléatoire. Afficher 4 images et si on veut les 4 suivantes on clique sur une flèche en format carousel.
Si j'ai 4 images A B C D et que je recharge ma page j'aimerai que ce soit aléatoire du genre D E F G par exemple.

Merci