Discussion :

[artenis]

Bonjour,

je ne suis pas certain que ce soit le bon language qu'il faille utiliser pour générer une div background-image afin de remplacer une balise img src et de pouvoir utiliser un style background-size:cover et background-position.

Si cela ne peut ce faire qu'avec du javascript/jquery, merci de déplacer ce post.

Je prends l'exemple général de wordpress :
Lorsque l'on veut ajouter une image on utilise "ajouter un media" ce qui va automatiquement ajouter une balise img src.
Le seul problème c'est que pour un novice, il ne pourra pas modifier une image de ce type pour respecter une certaine hauteur tout en gardant sa proportion.
Il y a en effet le system parallax, mais ce ne me convient pas

Je souhaiterais donc pouvoir remplacer

Code :

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

<img src="mon-image.png">

et générer pour certaine image de mon site une balise

Code :

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

 <div style="background:url('mon-image.png'); background-size:cover; background-position:50% 50%;"></div>

POuvez-vous d'abord me dire si c'est possible et ensuite me diriger éventuellement vers un post qui donne une solution ou alors m

[Invité]

Bonjour,

au lieu d'un "exemple général", as-tu un exemple PRECIS à donner ?

• est-ce bien l'exemple de Wordpress ?
• es-tu le "novice" en question ?

Dans quelles conditions as-tu besoin de faire cette transformation ?

• toujours (pour tous les articles ?)
• occasionnellment : à quelles occasion ?....)

Sinon, je te répondais de façon générale : "m".

[artenis]

Merci Jreaux62 pour ton intervention,

est-ce bien l'exemple de Wordpress ?
Oui

es-tu le "novice" en question ?
Non, le novice serait l'utilisateur final. Je me débrouille en php et javascript, mais ne sais pas quel langage est le mieux adapté pour ce genre d'opération.

toujours (pour tous les articles ?)
essentiellement pour tous les articles d'un custom post type

occasionnellment : à quelles occasion ?....)
sinon sur tous les sites que je serais amené à créé et où il serait utile de pouvoir avoir une image qui garde ses proportions tout en ayant une hauteur déterminée pour des articles précis donc en général des custom post type , ou bien toutes les images d'une page .

Pour tout ce que tu pourrais m'apporter comme connaissance ou solution, je te remercie

[Invité]

Bonjour,
Je n'ai utilisé Wordpress qu'une fois ou deux...

...utile de pouvoir avoir une image qui garde ses proportions tout en ayant une hauteur déterminée...

Je comprends mal.
Les images importées via "médias" peuvent être configurées pour l'affichage dans le contenu d'un article : hauteur, largeur, tout en conservant leurs proportions.

1/ As-tu un exemple précis : un dessin / copie d'écran /... qui montre ce que tu as, et ce que tu veux obtenir à la place ?


2/ D'abord, de quelle image parles-tu ?
Car s'il s'agit de l'"image à la une", oui, il serait possible d'automatiser en ajoutant un bout de code dans le bon fichier pour remplacer l'affichage <img...> par un background-image CSS.

3/ D'autre part, tu voudrais mettre l'image en background de quoi ?

• de l'article lui-même ?
• d'un div ? auquelle tu imposerais une hauteur ?

[artenis]

merci de t'interesser à mon probleme,
je n'ai sans doute pas été assez précis :

Les images importées via "médias" peuvent être configurées pour l'affichage dans le contenu d'un article : hauteur, largeur, tout en conservant leurs proportions.
lors de l'ajout d'un média (image) celle-ci s'ajoute avec une balise img src, par conséquent on peut modifier sa taille proportionnellement -> toutefois je souhaite pouvoir afficher l'image en largeur 100% et une hauteur de 250 px. avec img src celle-ci sera déformé voir pixèlisé, aec un background cover et position je peux définir l'image dans taille originale en voyant une zone définie

1/ As-tu un exemple précis : un dessin / copie d'écran /... qui montre ce que tu as, et ce que tu veux obtenir à la place ?
la première image (image avec le titre "chimie analytique") : est une image à la une : taille définie en pixel dans une balise img src


la seconde est une image dans une div background-size: cover; et background-position: 50% 50%; - cette image est ajoutée avec "ajouter un média" mais je ne récupère que le lien pour pouvoir l'incorporer dans la div
https://mega.nz/#F!LZUW2bqA!f49y_eYsJoUZHIJhjZ1nsQ


2/ D'abord, de quelle image parles-tu ?
n'importe qu'elle image : png; jpg, provenant de la bibliothèque d'image de wordpress de mon theme

Car s'il s'agit de l'"image à la une", oui, il serait possible d'automatiser en ajoutant un bout de code dans le bon fichier pour remplacer l'affichage <img...> par un background-image CSS.
c'est bien cela que je souhaite et si possible ciblée un custom post type et ou une page

3/ D'autre part, tu voudrais mettre l'image en background de quoi ? les deux
de l'article lui-même ? oui, de l'article , de la page , d'un custom post type
d'un div ? auquelle tu imposerais une hauteur ? oui

[Invité]

Je vois ce que tu veux dire.

Je viens de "bricoler" un peu sur le (seul) site Wordpress que j'ai fait (et dont j'ai accès à l'admin )

Ce que tu veux est déjà possible, mais MANUELLEMENT.

Dans un article, par exemple, après import d'une image, en affichant le code source (onglet "Texte" en haut à droite du contenu), on peut manuellement remplacer l'<img...> par un div et obtenir l'effet voulu.

Par contre, de là à l'"automatiser" pour que ce soit accessible à un "novice", je ne vois qu'un "plugin" adapté.
Il s'agirait peut-être d'ajouter une icone dans la barre de menu (du contenu), faisant appel à un script JS (très certainement).
Il y a une piste à creuser...

[artenis]

merci pour ta réponse,

si je comprends bien les développeurs de wordpress n'ont jusqu'à présent pas pensé qu'il serait utile de pouvoir obtenir les compléments de styles d'un background (cover et position dans une balise img ?
Wordpress est quand même utilisé par une dizaine de million d'internaute !

Je sais bien qu'on ai pas sur un forum dédié à wordpress.

du côté de javascript, penses tu qu'un lien existe déjà ?

[Invité]

Il ne faut pas confondre :
une image <img /> a une valeur sémantique différente d'une image en background.

• <img /> est bien une image, avec du sens (on peut y joindre des attributs alt, title,...) ; elle ajoute du sens au contenu.
• un background-image est lui considérer comme de la "décoration".

Le fait de vouloir changer une "image" en "décoration" n'a donc pas vraiment de sens en pratique.

Cela dit, en faisant des recherches, je suis tombé sur ça :

• WP-Backgrounds Lite

Là, pour le coup, ça génère des backgrounds !

[Invité]

Houlà !
Il me vient une idée toute simple ! (pour ne pas dire "de génie" )
Et sans background !

1/ Sur l'image, une fois qu'elle est dans le contenu, afficher le mode "Texte" (onglet, en haut à droite du contenu) :
Ca ressemble à :

Code :

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

1
2
<a href="http://mon-site.fr/wp-content/uploads/2015/07/image.jpg">
<img class="aligncenter wp-image-129 size-full" src="http://mon-site.fr/wp-content/uploads/2015/07/image.jpg" alt="..." width="1000" height="600" /></a>

Ajouter sur le <a> class="fullimg", et supprimer les données de l'img width="..." height="..." :

Code :

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

1
2
<a class="fullimg" href="http://mon-site.fr/wp-content/uploads/2015/07/image.jpg">
<img class="aligncenter wp-image-129 size-full" src="http://mon-site.fr/wp-content/uploads/2015/07/image.jpg" alt="..." /></a>

Il suffit alors, dans le fichier CSS, de définir :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.fullimg {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 240px; /* à ajuster (peut prendre des valeurs différente via media queries) */
}
.fullimg img {
    position: absolute;
    width: 100%;
    top:0; /* à ajuster : on peut mettre une valeur négative pour "remonter" l'image */
}

Intérêts :

• on conserve la valeur sémantique de l'image.
• la modification est TRES simple : ajout d'une classe "fullimg" + suppression des attributs height et width de l'image

[artenis]

merci pour le temps passé à trouver cette solution et pour ton eclair de génie

je vais la tester, mais elle me semble très bien.( si elle a été testée)

je crois qu'en ajoutant ce bout de code je pourrais l'appliquer à la zone désirée :

toutes corrections éventuelles sur le code ci-dessous sont là bienvenue

legende : fullimg = fullsize; fullimg img = fullimg

Code :

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

1
2
3
4
5
6
7
8
 
<?php if(is_page('ma-page')){  ou is_custom_post_type('macustomposttype')    ou is_single( 'letitredelarticle' )
<script> 
$('#madiv ou .maclass img').css("width":"", "height" :"");
$('#madiv a').addClass('fullsize');
$('#madiv img').addClass('fullimg');
</script>
} ?>