photo dans ma page d'accueil déformées !

[dominique45]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lesaloon7080.superforum.fr/

Description du problème

bonjour à tous,

je gère ce forum depuis 2005 c'est la première fois que j'ai ça

dans la page accueil en haut du forum il y a des couv' de presse qui changent
chaque mois en automatique, pour montrer aux membres les sorties en kiosque.....
on achète ces magazines chaque mois.....

depuis quelques jours sans raison, les photos de couv' sont devenues énormes
et déforment le forum !!!!

http://lesaloon7080.superforum.fr/

[Neptunia]

Bonjour ^^


Il n'y a pas 36000 possibilités mais seulement deux.

1/ Soit la solution que vous aviez mise en place pour redimensionner ne fonctionne plus, et vous devriez vous en souvenir et nous fournir cette solution.

2/ Soit le site d'origine a modifié la taille de ses couvertures.

[dominique45]

non le site d'origine c'est journaux et revue où on peut commander des magazines par VPC

[dominique45]

relance...

[Adam_sfp]

Dans la page accueil en haut du forum il y a des couv' de presse qui changent
chaque mois en automatique, pour montrer aux membres les sorties en kiosque.....

Bonsoir

Vous dites que ces couvertures changent chaque mois en automatique ...vous avez donc un code qui réalise cela ?
Si oui pouvez vous donner ce code ?
Si non pouvez vous donnez un peu plus d'infos ?

Cdt.

[dominique45]

non j'avais rentré ces images en copié collé du site journaux et revue.fr

[Adam_sfp]

Bonsoir

En faisant le copier coller vous utilisez un code de ce style pour une image

Code:

<img src="lien image" style="width: 296px; height: 273px;" align="absmiddle" />

donc vous pouvez modifier les tailles selon vos envies..

Du coup je ne comprend pas trop votre question..c'est sur que coté esthétique c'est pas top...
Ce serait peut être plus joli avec un slide...
En hébergeant les images de votre coté  

Cdt.

[Neptunia]

Ce serait peut être plus joli avec un slide...
En hébergeant les images de votre coté  

Plus légal aussi

Hotlinking : Définition

Le hotlinking, c'est du vol, et le vol est puni par la loi.

[Adam_sfp]

Trop fort @Neptunia  

@dominique45

Vous pouvez tester ce SLIDER assez facile à mettre en place

Vous pouvez mettre le code ci dessous dans votre page d'accueil à la place de votre code actuel et juste modifier les liens images

Code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.js"></script>
<center>
 <div class="bxslider">
  
 <div>
 <img src="https://picsum.photos/800/800/?image=170" />
 </div>
  
 <div>
 <img src="https://picsum.photos/800/800/?image=200" />
 </div>
    
 <div>
 <img src="https://picsum.photos/800/800/?image=140" />
 </div>
      
 <div>
 <img src="https://picsum.photos/800/800/?image=50" />
 </div>
        
 <div>
 <img src="https://picsum.photos/800/800/?image=70" />
 </div>
          
 <div>
 <img src="https://picsum.photos/800/800/?image=90" />
 </div>
    
 </div>
</center>
   <script>
jQuery('.bxslider').bxSlider({
    auto: true,
    adaptiveHeight: true,
    slideWidth: 650 ,
    speed:2500,
    pause:1000,
    responsive:true,
    mode: 'fade',
    autoControls: true,
    stopAutoOnClick: true,
    pager: true
  
 });
 
</script>

https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

Cdt.

[dominique45]

Bonsoir

En faisant le copier coller vous utilisez un code de ce style pour une image

Code:

<img src="lien image" style="width: 296px; height: 273px;" align="absmiddle" />

donc vous pouvez modifier les tailles selon vos envies..

Du coup je ne comprend pas trop votre question..c'est sur que coté esthétique c'est pas top...
Ce serait peut être plus joli avec un slide...
En hébergeant les images de votre coté  

Cdt.

Je peux modifier la taille des images tant que je veux vous dites
et comment ?
pour vous mon sujet est inutile mais moi je n'ai pas vos compétences,
je patauge complètement ...

le code que vous me dites de mettre ce tableau je le mets ou sur la page d’accueil ?
au début ou à la fin ?

[dominique45]

Trop fort @Neptunia  

@dominique45

Vous pouvez tester ce SLIDER assez facile à mettre en place

Vous pouvez mettre le code ci dessous dans votre page d'accueil à la place de votre code actuel et juste modifier les liens images

Code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.js"></script>
<center>
 <div class="bxslider">
  
 <div>
 <img src="https://picsum.photos/800/800/?image=170" />
 </div>
  
 <div>
 <img src="https://picsum.photos/800/800/?image=200" />
 </div>
    
 <div>
 <img src="https://picsum.photos/800/800/?image=140" />
 </div>
      
 <div>
 <img src="https://picsum.photos/800/800/?image=50" />
 </div>
        
 <div>
 <img src="https://picsum.photos/800/800/?image=70" />
 </div>
          
 <div>
 <img src="https://picsum.photos/800/800/?image=90" />
 </div>
    
 </div>
</center>
   <script>
jQuery('.bxslider').bxSlider({
    auto: true,
    adaptiveHeight: true,
    slideWidth: 650 ,
    speed:2500,
    pause:1000,
    responsive:true,
    mode: 'fade',
    autoControls: true,
    stopAutoOnClick: true,
    pager: true
  
 });
 
</script>

https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

Cdt.

je ne comprends pas comment modifier les liens images

[Adam_sfp]

pour vous mon sujet est inutile mais moi je n'ai pas vos compétences,

Bonsoir

Voila pas que je me fais engueuler
Je n'ai jamais dis que votre sujet était inutile...
Au contraire on essaie de vous aider c'est pour cette raison que je vous ai mis un code tout fait sans trop rentrer dans les détails...

Le code oui vous pouvez le mettre en page d'accueil tout en haut ou après votre texte:
Le café 1970-80 prend chaque mois et vous conseille en kiosques

*il faut bien sur enlever votre code avec les images actuelles

Ensuite pour mettre vos propres images je prend l'exemple d'une ligne actuelle pour une image

Code:

<div>
 <img src="https://picsum.photos/800/800/?image=170" /></div>

le lien de l'image est celui ci
https://picsum.photos/800/800/?image=170

pour mettre votre image par exemple celle ci
https://i.servimg.com/u/f64/12/69/24/33/m5730_10.jpg

Vous remplacez le lien comme ceci

Code:

<div>
 <img src="https://i.servimg.com/u/f64/12/69/24/33/m5730_10.jpg" /></div>

Vous pouvez déjà tester ceci?

[dominique45]

ok je viens de mettre le code en dessous de " vous conseille en kiosques "
il apparait comme ça
https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

ça n'a pas marché du tout

j'ai effacé toutes les images et résultat celle que j'ai remis de la couv" de première est très grande
et votre code ne marche pas s'affichant avec son nom sur la page d'accueil !

[Adam_sfp]

Bonsoir

Il faut copier juste ce code
Essayez déjà de le copier tel quel sans rien modifier..
Si il fonctionne ensuite vous mettrez vos images...

Code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.js"></script>
<center>
 <div class="bxslider">
  
 <div>
 <img src="https://picsum.photos/800/800/?image=170" />
 </div>
  
 <div>
 <img src="https://picsum.photos/800/800/?image=200" />
 </div>
    
 <div>
 <img src="https://picsum.photos/800/800/?image=140" />
 </div>
      
 <div>
 <img src="https://picsum.photos/800/800/?image=50" />
 </div>
        
 <div>
 <img src="https://picsum.photos/800/800/?image=70" />
 </div>
          
 <div>
 <img src="https://picsum.photos/800/800/?image=90" />
 </div>
    
 </div>
</center>
   <script>
jQuery('.bxslider').bxSlider({
    auto: true,
    adaptiveHeight: true,
    slideWidth: 650 ,
    speed:2500,
    pause:1000,
    responsive:true,
    mode: 'fade',
    autoControls: true,
    stopAutoOnClick: true,
    pager: true
  
 });
 
</script>

et rien d'autres

vous avez copier ceci ( *en fait je crois que vous avez juste copié ce lien en dessous mais pas le code....
ce lien en dessous c'est pour vous montrer le résultat IL NE FAUT PAS LE COPIER
https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

[*Splash*]

Hi Dominique,

Le code laissé par Adam fonctionne très bien, pour le copier sur ton forum il faut faire ainsi :

Panneau d'Administration > Affichage > Page d'accueil > Généralités



Pense bien à avant de quitter

Résultat ici > Clique

[dominique45]

Bonsoir

Il faut copier juste ce code
Essayez déjà de le copier tel quel sans rien modifier..
Si il fonctionne ensuite vous mettrez vos images...

Code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.js"></script>
<center>
 <div class="bxslider">
  
 <div>
 <img src="https://picsum.photos/800/800/?image=170" />
 </div>
  
 <div>
 <img src="https://picsum.photos/800/800/?image=200" />
 </div>
    
 <div>
 <img src="https://picsum.photos/800/800/?image=140" />
 </div>
      
 <div>
 <img src="https://picsum.photos/800/800/?image=50" />
 </div>
        
 <div>
 <img src="https://picsum.photos/800/800/?image=70" />
 </div>
          
 <div>
 <img src="https://picsum.photos/800/800/?image=90" />
 </div>
    
 </div>
</center>
   <script>
jQuery('.bxslider').bxSlider({
    auto: true,
    adaptiveHeight: true,
    slideWidth: 650 ,
    speed:2500,
    pause:1000,
    responsive:true,
    mode: 'fade',
    autoControls: true,
    stopAutoOnClick: true,
    pager: true
  
 });
 
</script>

et rien d'autres

vous avez  copier ceci ( *en fait je crois que vous avez juste copié ce lien en dessous mais pas le code....
ce lien en dessous c'est pour vous montrer le résultat IL NE FAUT PAS LE COPIER
https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

j'ai fait copié collé du code dans le tableau en version codes
ça ne marche pas, regardez ça me marque
https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

[Adam_sfp]

Bonsoir

Vous n'avez pas copié le code..

mais ce lien qu'il ne faut pas copier
https://jsfiddle.net/adam_sfp/fdtxj1ns/2/embedded/result

Assurez vous de bien copier coller le code et uniquement le code.

Cdt

[dominique45]

merci j'avais pas compris que je devais copier coller ce qui était dans le tableau...

ok j'(ai remis une couv' dedans entre les balises mais je ne comprends pas comment faire pour les autres ?

[dominique45]

up

[dominique45]

j'ai fait comme vous m'avez dit et bing, une couverture que je viens de rentrer déforme à nouveau le forum
tellement elle est immense alors que pas du tout sur le site internet !
j'ai fait tout ça pour rien !!

https://www.journaux.fr/empire_anglais-americain_revues-internationales_89481.html

[Neptunia]

j'ai fait comme vous m'avez dit et bing, une couverture que je viens de rentrer déforme à nouveau le forum
tellement elle est immense alors que pas du tout sur le site internet !
j'ai fait tout ça pour rien !!

https://www.journaux.fr/empire_anglais-americain_revues-internationales_89481.html

C'est ce que je vous disais depuis le début !

Il n'y a pas 36000 possibilités mais seulement deux.

1/ Soit la solution que vous aviez mise en place pour redimensionner ne fonctionne plus, et vous devriez vous en souvenir et nous fournir cette solution.

2/ Soit le site d'origine a modifié la taille de ses couvertures.

Le site d'origine utilisant une image de 2657px sur 3449px, c'est normal d'avoir cette dimension sur votre forum si vous réutilisez la même image et surtout le même lien.

[dominique45]

Pourtant, je postais ces couvertures presse depuis des années et jamais elles n'étaient immenses comme ça,
ça ne dure que depuis une semaine....

[Neptunia]

Bah le site d'origine a le droit de modifier ses pages aussi !

Peut-être parce qu'il souhaitait se simplifier la tâche (au survol de l'image on a une loupe permettant de la voir aux dimensions maximum permises par l'écran)
Peut-être pour se protéger contre le vol de ses liens (action dont j'ai aussi parlé plus haut dans ce sujet)

[dominique45]

bon je viens de résoudre tout ça comme je l'avais fait la semaine dernière
en passant par internet explorer car la fonction ne marche pas sur mozilla
en copiant collant directement les photos en image dans le code que vous m'aviez donné qui ne me sert à rien
et ensuite j'ai réduit manuellement image par image en resserrant leur cadre...

c'est pas parfait mais j'avais tout supprimé pour insérer votre code
mais ensuite il ne servait à rien..

regardez =
http://lesaloon7080.superforum.fr/

.

[Neptunia]

Le code d'Adam_sfp fonctionne toujours mais vaudrait mieux que les images aient une hauteur uniforme, sinon ça donne ça



Je n'ai modifié que la première image.

---

Et faut veiller à ne pas être trop gourmand parce que la couverture d'Empire fait 1.5 mo à elle toute seule et on a tôt fait de faire ramer la page si on a trop d'images de ce type. Surtout pour une page d'accueil !

[*Splash*]

Le code d'Adam_sfp fonctionne toujours mais vaudrait mieux que les images aient une hauteur uniforme, sinon ça donne ça



Je n'ai modifié que la première image.

---

Et faut veiller à ne pas être trop gourmand parce que la couverture d'Empire fait 1.5 mo à elle toute seule et on a tôt fait de faire ramer la page si on a trop d'images de ce type. Surtout pour une page d'accueil !

Il me semble qu'elle ne veut rien entendre à ce sujet, bref

[Neptunia]

Il me semble qu'elle ne veut rien entendre à ce sujet, bref

Le problème avec dominique45 ? IL comprend vite, mais faut lui expliquer longtemps

[*Splash*]

Il me semble qu'elle ne veut rien entendre à ce sujet, bref

Le problème avec dominique45 ? IL comprend vite, mais faut lui expliquer longtemps

C'est moche

[dominique45]

pour là j'en suis exactement au meme point que lorsque j'ai ouvert le sujet

[*Splash*]

pour là j'en suis exactement au meme point que lorsque j'ai ouvert le sujet

Rien d'étonnant, tu ne veux pas admettre/comprendre ce que nous t'expliquons !