Comment puis je obtenir qu’une image de fond d’écran soit toujours redimensionnée par le forum

[marie ange]

Bonjour,

Grâce à certains des membres du forum Taiga, dont voici l’adresse
http://www.taigapassionordiques.org
Nous avons la chance de pouvoir changer l’image du fond d’écran et ce au fil des saisons et des fêtes annoncées.
Cependant, à chaque fois, il me faut corriger les images proposées.
N’étant pas graphiste, je passe beaucoup de temps à les redimensionner et ce, afin que l’image soit cadrée et visible par les membres possédant un grand ou un petit écran.
Plus exactement afin d’éviter que celle-ci ne soit pas dupliquée.
Aussi, quelque soit l’image proposée, il serait souhaitable que je puisse l’enregistrer telle que……. Au forum de la redimensionner aux proportions requises.
Pour mieux comprendre
Une image proposée en 1200x650 sera redimensionnée au même titre qu’une image en 1024x650.
Je pense que celles-ci pourraient être du 1024x650 …Cependant, j’attends de vous que vous puissez me donner votre avis sur cette dernière proposition

N’étant pas très douée en informatique, vous comprendrez aisément qu’il m’est aussi difficile d’utiliser le langage usuel.
Aussi, j’espère que vous comprendrez ma demande dans son ensemble.

Voici le dernier ajout à la feuille CSS du forum
.bodyline {
min-width: 79%;
width: 79%;
}
.bodylinewidth {
min-width: 79%;
width: 79%;
}
.forumline2 {
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
}

[marie ange]

petit up

[Adam_sfp]

Bonjour

Vous pouvez essayer ceci ICI

Cordialement.

[marie ange]

kikou

Avant tout, je vous remercie pour l'aide apportée à ma demande. C'est vraiment très sympa de votre part.
Je viens à l'instant de mettre le code notifié mais je ne peux pas, malheureusement, me rendre compte du rendu.
En effet, sur mon écran qq soit l'image, j'avais tjrs celle-ci en plein écran.
(Je m'explique: Elle n'est pas dupliquée comme sur les écrans des membres).
Aussi, pourriez vous, s'il vous plait, jeter un coup d'oeil sur le forum et me dire si l'image du fond est pleine ou tjrs en 4x ?
Dans l'attente,

Cordialement

[marie ange]

euh j'ai tenté de mettre une autre image .....


Cependant, elle apparait sur mon écran comme suit


Comme vous pouvez le constater les 3chiens vers le bas ne sont plus visible et l'image se duplique sur la largeur de quelques centimètres
Pourriez vous, s'il vous plait, m'informer de ce qu'il faudrait que je fasse pour, quelque soit l'image proposée, le forum la redimensionne aux proportions requises?
Dans l'attente,

Cordialement

[Adam_sfp]

Bonjour

Pourriez vous coller le code que vous avez utilisé?

Cordialement.

[marie ange]

Voici celui-ci
(function(a){a.backstretch=function(k,i,l){function m(c){try{g={left:0,top:0},d=e.width(),b=d/j,b>=e.height()?(h=(b-e.height())/2,f.centeredY&&a.extend(g,{top:"-"+h+"px"})):(b=e.height(),d=b*j,h=(d-e.width())/2,f.centeredX&&a.extend(g,{left:"-"+h+"px"})),a("#backstretch, #backstretch img:last").width(d).height(b).filter("img").css(g)}catch(o){}typeof c=="function"&&c()}var n={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),f=c.data("settings")||n;c.data("settings");var e="onorientationchange"in window?a(document):a(window),j,d,b,h,g;i&&typeof i=="object"&&a.extend(f,i);a(document).ready(function(){if(k){var b;c.length==0?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var d=a(this),e;d.css({width:"auto",height:"auto"}); e=this.width||a(b.target).width();b=this.height||a(b.target).height();j=e/b;m(function(){d.fadeIn(f.speed,function(){c.find(".deleteable").remove();typeof l=="function"&&l()})})}).appendTo(c);a("body #backstretch").length==0&&a("body").append(c);c.data("settings",f);b.attr("src",k);a(window).resize(m)}});return this}})(jQuery);$.backstretch("http://brimborion2.free.fr/b/band_of_brothers_01.jpg");


Je tiens à vous préciser que l'image qui apparaît sur Taiga actuellement, a été redimensionnée aux mesures 2000x550
ceci afin que tous les personnages, chiens ...etc puissent être lisibles
Seulement, comme je vous l'ai précisé plus haut, je ne peux voir si celle-ci remplie le plein écran ou elle est encore dupliquée

Merci infiniment pour votre aide

Cordialement

[marie ange]

Je reviens vers vous avec les informations sur l'image du fond d'écran.
Effectivement, certains membres la voient en 4x!!
Que faire ?
Dans l'attente de vos propositions

Cordialement

[Adam_sfp]

Bonjour

Le code que vous donnez est celui de l'exemple non modifié.

Essayez ce code (il comporte le lien de votre image)

Code:

(function($){$.backstretch=function(src,options,callback){var settings={centeredX:0,centeredY:0.5,speed:0},rootElement=("onorientationchange"in window)?$(document):$(window),imgRatio,bgImg,bgWidth,bgHeight,bgOffset,bgCSS;_parseOptions();$(document).ready(_init);return this;function _parseOptions(){if(options&&typeof options=="object"){$.extend(settings,options);if(settings.centeredX===true){settings.centeredX=0.5;}else if(settings.centeredX===false){settings.centeredX=0;};if(settings.centeredY===true){settings.centeredY=0.5;}else if(settings.centeredY===false){settings.centeredY=0;};if(settings.center!=undefined&&settings.center.constructor==Array){if(settings.center[0]!=undefined){settings.centeredX=settings.center[0];};if(settings.center[1]!=undefined){settings.centeredY=settings.center[1];}}}};function _init(){if(src){var container=$("<div />").attr("class","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-9999}),img=$("<img />").css({position:"relative",display:"none"}).bind("load",function(e){var self=$(this);imgRatio=$(e.target).width()/$(e.target).height();_adjustBG(function(){self.fadeIn(settings.speed,function(){if(typeof callback=="function")callback();});});}).appendTo(container);$("body").prepend(container);img.attr("src",src);$(window).resize(_adjustBG);}};function _adjustBG(fn){try{bgCSS={left:0,top:0};bgWidth=rootElement.width();bgHeight=bgWidth/imgRatio;if(bgHeight>=rootElement.height()){if(settings.centeredY>0){bgOffset=(bgHeight-rootElement.height())*settings.centeredY;$.extend(bgCSS,{top:"-"+bgOffset+"px"});}}else{bgHeight=rootElement.height();bgWidth=bgHeight*imgRatio;if(settings.centeredX>0){bgOffset=(bgWidth-rootElement.width())*settings.centeredX;$.extend(bgCSS,{left:"-"+bgOffset+"px"});}};$(".backstretch img").width(bgWidth).height(bgHeight).css(bgCSS);}catch(err){};if(typeof fn=="function")fn();}};})(jQuery);$.backstretch("http://i49.servimg.com/u/f49/12/69/24/33/image_10.jpg");

Il faut le mettre dans

Modules-->Gestion des codes Javascript

Cochez oui pour Activer la gestion des codes Javascript et enregistrez
Cliquez sur créer un nouveau javascript
mettez un nom et cliquez sur toutes les pages

Dans la partie code javascript collez le code donné plus haut et validez.

verifiez aussi que le :+html: est activé
https://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle?highlight=html

Cordialement.

[marie ange]

Bonjour Adam,

Suite à des pbs de connexion, je n'ai pu répondre à votre message dans les délais appropriés.
Aussi, je vous prie sincèrement de m’en excuser.
J’ai donc procédé aujourd’hui au remplacement du code donné.
Il est bon que vous sachiez qu'auparavant, le code HTML a bien été activé sur le forum .
Je pense, que dorénavant, l’image sera vue plein écran par la plus part des membres qui ont activé cette case dans leur profil et que d’autres ne l’ayant pas fait, auront toujours le même problème.
A moi donc de le signaler dans le forum technique du forum Taiga.
Cependant, avant de clore le sujet, j’aimerai avoir 24h et ce afin de m’assurer que le code fonctionne pour toutes les images de fond d’écran (tailles Lxl).
Merci infiniment pour votre aide

Cordialement

[marie ange]

Bonjour Adam,

J'ai une question qui me tracasse un peu...vous aurez deviné que malgré le code donné,
je n'ai pu voir si les dimensions requises pour toutes les images du fond d'écran, seront toujours en 2000x550?
Est il possible que qq soit l'image, nous puissions avoir des dimensions plus adéquates se résumant telles que: 1200x600
Dans l'attente de votre réponse et en m'excusant d’abuser encore, de votre gentillesse,

Cordialement

[Adam_sfp]

Bonjour

Avec le code que je vous ai donné plus haut
le script redimensionne l'image en fonction de la taille de l'écran....

la taille initiale de l'image peut varier elle sera redimensionnée.
1200 par 600 c'est tout bon...

*mais apparemment vous ne l'avez pas mis en place car je vois toujours votre fond se dédoubler...

Cordialement.

[marie ange]

Re bonjour,

J'ai mis le code comme convenu et ce dès que vous m'avez donné celui-ci.
Je vais donc faire une capture d'écran afin que vous puissiez en juger.
Aurais je fait une erreur qq part?
Voici le code donné
(function($){$.backstretch=function(src,options,callback){var settings={centeredX:0,centeredY:0.5,speed:0},rootElement=("onorientationchange"in window)?$(document):$(window),imgRatio,bgImg,bgWidth,bgHeight,bgOffset,bgCSS;_parseOptions();$(document).ready(_init);return this;function _parseOptions(){if(options&&typeof options=="object"){$.extend(settings,options);if(settings.centeredX===true){settings.centeredX=0.5;}else if(settings.centeredX===false){settings.centeredX=0;};if(settings.centeredY===true){settings.centeredY=0.5;}else if(settings.centeredY===false){settings.centeredY=0;};if(settings.center!=undefined&&settings.center.constructor==Array){if(settings.center[0]!=undefined){settings.centeredX=settings.center[0];};if(settings.center[1]!=undefined){settings.centeredY=settings.center[1];}}}};function _init(){if(src){var container=$("<div />").attr("class","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-9999}),img=$("<img />").css({position:"relative",display:"none"}).bind("load",function(e){var self=$(this);imgRatio=$(e.target).width()/$(e.target).height();_adjustBG(function(){self.fadeIn(settings.speed,function(){if(typeof callback=="function")callback();});});}).appendTo(container);$("body").prepend(container);img.attr("src",src);$(window).resize(_adjustBG);}};function _adjustBG(fn){try{bgCSS={left:0,top:0};bgWidth=rootElement.width();bgHeight=bgWidth/imgRatio;if(bgHeight>=rootElement.height()){if(settings.centeredY>0){bgOffset=(bgHeight-rootElement.height())*settings.centeredY;$.extend(bgCSS,{top:"-"+bgOffset+"px"});}}else{bgHeight=rootElement.height();bgWidth=bgHeight*imgRatio;if(settings.centeredX>0){bgOffset=(bgWidth-rootElement.width())*settings.centeredX;$.extend(bgCSS,{left:"-"+bgOffset+"px"});}};$(".backstretch img").width(bgWidth).height(bgHeight).css(bgCSS);}catch(err){};if(typeof fn=="function")fn();}};})(jQuery);$.backstretch("https://i.servimg.com/u/f49/12/69/24/33/image_10.jpg");

pour visu




Dans l'attente de vos suggestions,

Cordialement

[Adam_sfp]

Bonjour

Tout à l'air bon au niveau de la mise en place du script.

Si vous avez des templates modifiés assurez vous que c'est à jour
https://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript#edit-temp

Vous avez bien enlevé votre image de fond dans gestion des images images du fond de page??

Il faut aussi enlever votre image de fond dans votre CSS
cette partie

Code:

body{background-attachment:fixed;background-color:#666;background-image:url(http://i41.servimg.com/u/f41/09/01/18/66/image_13.jpg)}

Cordialement

[marie ange]

Re

Il n'y a pas d'image de fond à proprement dit sur Taiga
le fond est gris foncé et ce, pour faciliter la mise en place de multiple images de fond d'écran.
Donc que faut il faire pour que les images soient en conformité avec le code donné?
Dans l'attente,
Cordialement

[Adam_sfp]

Bonjour

Dans votre CSS vous avez cette image

c'est bien votre image de fond?
Il faudrait donc enlever cette partie dans votre CSS pour voir si le code javascript fonctionne..

Code:

        body{background-attachment:fixed;background-color:#666;background-image:url(http://i41.servimg.com/u/f41/09/01/18/66/image_13.jpg)}

C'est dans affichage-->couleur-->feuille de style CSS

Cordialement.

[marie ange]

j'ai donc cherché dans les templates et j'ai effectivement le code
comme suit:
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
Me reférant à la demande: "Si vous avez des templates modifiés assurez vous que c'est à jour
https://forum.forumactif.com/t308422-nouveaute-forumactif-gestion-des-codes-javascript#edit-temp"
Si j'applique le code comme suit : {HOSTING_JS}
pouvez vous m'assurer que celui-ci représente l'étape à suivre ?
{HOSTING_JS}<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
Dans l'attente,

Cordialement

[marie ange]

Désolée nous avons posté en même temps.

Je vais donc voir tout de suite sur la feuille CSS

[Adam_sfp]

Bonjour
Oui si {HOSTING_JS} n'est pas présent dans votre template il faut le rajouter comme vous l'avez indiqué.

Cordialement.

[marie ange]

voici ce que je trouve sur la feuille CSS
body {
background-color: #666666;
background-image: url("https://i.servimg.com/u/f41/09/01/18/66/image_13.jpg");background-attachment: fixed;
}
* html {
scrollbar-face-color: #;
scrollbar-highlight-color: #;
scr.................

Est ce bien ce code qu'il me faut enlever ?
Je trouve qu'il ne correspond pas tout à fait à celui noté plus haut
Dans l'attente,

Cordialement

[Adam_sfp]

Bonjour

Vous pouvez enlever cette partie

Code:

background-image: url("http://i41.servimg.com/u/f41/09/01/18/66/image_13.jpg");background-attachment: fixed;

Cordialement.

[marie ange]

Je suis désolée, mais après maintes tentatives, je n'arrive toujours pas à retirer le code
background-image: url("https://i.servimg.com/u/f41/09/01/18/66/image_13.jpg");background-attachment: fixed;
du CSS de base de mon forum, et ce, malgré l'acceptation des modifications apportées.
De plus, je suis toujours dans l'attente de l'overall_header modifié

S'il vous plait, auriez vous une suggestion afin de régler le problème cité ci-dessus?
Dans l'attente,

Cordialement

[Adam_sfp]

Bonjour

eh ben on va finir par y arriver...
Si vous voulez copiez tout votre CSS et collez le ici
entre les balises codes

Vous cliquez sur vous collez le code et vous recliquez sur

et faites de même avec votre overall_header.
je ferai les modifs vous aurez plus qu'à les remettre aux bons endroits..

Cordialement.

[marie ange]

Puis je me permettre d'être un peu interrogative?
Qu'entendez vous par tout copier ? Dois je vraiment vous donner l'intégralité du CSS de base ou, juste la partie qui vous intéresse?

[marie ange]

Dans l'attente de votre réponse à ma demande précisée ci-dessus,
je peux d'orenavant vous notifier que l'overall_header a été modifié et accepté

Cordialement

[marie ange]

Pouvez voir le pb qui se présente actuellement sur Taiga ?
Suite à la modification notée ci-dessus, il survient comme un décalage dans "l'image".
Celle-ci semble se "déformer" entre le moment où on clique sur le forum et l'instant où, nous cliquons sur une rubrique
Pardonnez moi de ne pas mieux vous expliquez, mais, j'avoue n'avoir que ses termes pour vous démontrer ce qui se passe actuellement

[Adam_sfp]

Bonjour

Et bien le script à l'air de fonctionner..

C'est déjà bien c'est normal que vous voyez ce décalage vous avez toujours votre image dans le CSS...
elle apparait donc 2 fois provoquant ce décalage...

Soit vous arrivez à enlever la partie citée plus haut..
Sinon oui il vaut mieux me donner le CSS entier et je vous enlève la partie qui dérange...

Cordialement.

[marie ange]

Bonsoir Adam,

Je vous ai envoyé un MP concernant le CSS
Dans l'attente,

Cordialement

[marie ange]

Merci infiniment Adam
Je le réitère ici, sans votre incroyable patience et vos explications des plus claires, jamais, je n'aurai pu arriver à mes fins. :thanks: :thanks:

Cordialement