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...