Syntaxe conditionnelle selon device

**stofkri** · 28/03/2014, 18h05

bonjour, pour optimiser l'affichage de mes images sur mon portfolio, je compte utiliser la classe mobile_detect
avec une condition selon le device utilisé
si c'est un iphone : on affiche les images dans tel chemin
sinon, on affiche d'autres images

voici le code de ma galerie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php    
$tableau_vignettes = explode("|",trim($donnees['UR_1180x787']));
for ($i = 0; $i < count($tableau_vignettes); $i++) {
  if (!empty($tableau_vignettes[$i])) {
  ?>
  <div class="image">
      <div class="inner">
        <img src="galeries/1180/<?php echo $tableau_vignettes[$i]; ?>"  />
     </div>    
   </div>
<?php
  }
}
?>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<?php
if ( $detect->isMobile() ) {
afficher les images optimisées iphone
}  
else {
afficher les images standard
}
?>

je ne parviens pas à intégrer le premier code dans le second, pourriez-vous m'aider pour la syntaxe ? par avance merci

**rawsrc** · 28/03/2014, 18h22

Salut,

c'est quoi le chemin pour le mobile et pour les images standard ?
Et d'où tu récupères le $donnees['UR_1180x787'] ?

Cela devrait donner quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$src = ($detect->isMobile()) ? 'iphone' : 'standard';
 
$tableau_vignettes = explode('|', trim($donnees['UR_1180x787']));
foreach ($tableau_vignettes as $v)
{
    echo <<<html
<div class="image">
  <div class="inner">
    <img src="galeries/{$src}/{$v}" />
  </div>    
</div>
html;
}

**stofkri** · 28/03/2014, 18h35

en fait, je comptai faire une redirection mais comme le site est adaptatif, je trouve inutile de réaliser toutes les pages de mon site pour smartphone ou tablette, j'aimerai seulement ajouter la classe mobile_detect pour chaque requête, et afficher les images selon le device, ordinateur ou smartphone

je ne sais pas si je suis très clair...

le chemin a de l'importance ?

la requête est visible dans mon premier post :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="galeries/1180/<?php echo $tableau_vignettes[$i]; ?>"  />

j'aimerai simplement créer un nouveau dossier pour les images optimisées pour smartphone, voila

je récupère $donnees d'une requête préalable

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php 
// on se connecte à MySQL 
$db = mysql_connect('localhost', 'root', 'root'); 
// on sélectionne la base 
mysql_select_db('galerie',$db); 
// on crée la requête SQL 
$news_sql = "SELECT * FROM galerie ORDER BY id DESC LIMIT 1";
$news_query = mysql_query($news_sql) or die(mysql_error());
$donnees = mysql_fetch_assoc($news_query);
// on fait une boucle qui va faire un tour pour chaque enregistrement
// on ferme la connexion à mysql 
mysql_close(); 
?>

**stofkri** · 29/03/2014, 11h30

merci à rawsrc, ça à l'air de marcher.

**stofkri** · 29/03/2014, 12h35

une dernière question, isMobile concernant tous les périphériques mobiles (iphone et tablette), peut-on ajouter une troisième condition à ce code ? j'ai tenté de l'ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$src = ($detect->isMobile()) ? 'iphone' : 'ipad' : 'standard';

sans succès

sinon je peux toujours exclure les tablettes de la condition, avec ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if( $detect->isMobile() && !$detect->isTablet() )

mais tant qu'à faire, autant créer des images optimisées pour ipad...

**rawsrc** · 29/03/2014, 13h17

Oui c'est parfait.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if ($detect->isMobile())
{
    if ($detect->isTablet())
    {
 
    }
    else
    {
 
    }
}
else
{
 
}

**stofkri** · 29/03/2014, 13h32

désolé mais pourrais-tu compléter ce code ? il n'a rien à voir avec ta précédente proposition qui fonctionne, je suis perplexe (désolé, je suis un vrai néophyte en php)

**rawsrc** · 29/03/2014, 13h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if ($detect->isMobile())
{
    if ($detect->isTablet())
    {
          $src = 'tablet';
    }
    else
    {
          $src = 'mobile sauf tablet'; 
    }
}
else
{
      $src = 'standard';
}

En gros tu détermines la partie du chemin désignant l'endroit où tu vas piocher tes ressources adaptées au support cible.
Ensuite tu colles le code des vignettes avec le chemin adéquate.

**stofkri** · 29/03/2014, 14h15

je vois, un peu comme ça ? :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
if ($detect->isMobile())
{
    if ($detect->isTablet())
    {
          $src = 'tablet';
		  $tableau_vignettes = explode('|', trim($donnees['UR_1180x787']));
foreach ($tableau_vignettes as $v)
{
    echo <<<html
<div class="big">
  <div class="inner">
    <img src="galeries/{$src}/{$v}" />
  </div>    
</div>
html;
}
    }
    else
    {
          $src = 'iphone';
		  $tableau_vignettes = explode('|', trim($donnees['UR_1180x787']));
foreach ($tableau_vignettes as $v)
{
    echo <<<html
<div class="big">
  <div class="inner">
    <img src="galeries/{$src}/{$v}" />
  </div>    
</div>
html;
}
    }
}
else
{
      $src = '1180';
	  $tableau_vignettes = explode('|', trim($donnees['UR_1180x787']));
foreach ($tableau_vignettes as $v)
{
    echo <<<html
<div class="big">
  <div class="inner">
    <img src="galeries/{$src}/{$v}" />
  </div>    
</div>
html;
}
}
?>

ça a l'air de marcher, enfin je n'ai pas d'ipad pour tester, mais sur iphone, les images s'affichent correctement, encore merci à toi, je vais essayer de trouver un ipad

**rawsrc** · 29/03/2014, 14h24

Tu peux sacrément factoriser du coup ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$src = '1180'; // défaut
if ($detect->isMobile())
{
    $src = ($detect->isTablet()) ? 'tablet' : 'iphone';
}
 
$tableau_vignettes = explode('|', trim($donnees['UR_1180x787']));
foreach ($tableau_vignettes as $v)
{
    echo <<<html
<div class="big">
  <div class="inner">
    <img src="galeries/{$src}/{$v}" />
  </div>    
</div>
html;
}

**stofkri** · 29/03/2014, 14h28

c'est nettement plus concis, effectivement, ça marche aussi bien

**stofkri** · 29/03/2014, 20h00

nouvelle difficulté et je l'espère, dernière question :

j'avais dans le code initial une fonction qui annulait la requête si le champs de la base de donnée ne contient rien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  if (!empty($tableau_vignettes[$i])) {

je ne parviens pas à la rétablir, $i ayant disparu

**rawsrc** · 29/03/2014, 22h25

Le mieux c'est de filtrer le tableau en veillant à supprimer les lignes sans données.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$tableau_vignettes = array_filter(explode('|', trim($donnees['UR_1180x787'])));

Ainsi si le tableau est vide, la boucle ne sera jamais exécutée.

**stofkri** · 30/03/2014, 13h36

je te remercie pour ton aide, une dernière faveur et je clos ce topic, pourrais-tu intégrer cette classe mobile_detect dans cette requête ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php 
// on se connecte à MySQL 
$db = mysql_connect('localhost', 'root', 'root');
$reponse = mysql_query("SELECT id, 585x390 FROM undo_redo WHERE ID != (SELECT MAX(ID) FROM undo_redo) ORDER BY id DESC LIMIT 4");
while ($donnees = mysql_fetch_array($reponse))
{
?>
 
	<div class="vignette">
		         <div class="inner">
                 <div class="boutonn">
   <a class="visit" href="ur.php?id=<?php echo $donnees ['id']; ?>">voir la galerie</a>
    </div><!-- bouton -->
                       <div class="DO"><img src="css/img/bleu.png"></div>
                       <h1 style="font-size: 3em; filter : alpha(opacity=60); opacity : 0.60; color: #F9F9F9; width: 100%; margin-top: 30px; margin-left: 30px; position:absolute; z-index:2; text-align:left; font-family:'Exo 2', sans-serif">#<?php echo $donnees ["id"]?></h1>
              <img src="<?php echo $donnees ["585x390"]; ?>">
   	</div><!-- inner -->
	</div><!-- vignette -->
    <?
}
mysql_close();
?>

**rawsrc** · 30/03/2014, 18h07

Je ne saisis pas ton besoin ^^

Premièrement il n'y a aucune difficulté à transposer en adaptant légèrement mon bout de code à ton dernier extrait de code et deuxièmement, j'aurais l'impression de te priver de tes devoirs.
Comme j'ai à cœur que les étudiants ne se la jouent pas tire au flanc, je vais donc te laisser faire ta cuisine dans ton coin.

**stofkri** · 30/03/2014, 18h11

je sentais bien que je tirais sur la corde...je vais me débrouiller seul alors, merci pour ta précieuse assistance

Syntaxe conditionnelle selon device

Langage PHP

Discussions similaires

Partager

Partager