Récupérer le titre d'une image pour l'afficher dans une page.

Version imprimable

10/03/2020, 16h58
sebgac

2 pièce(s) jointe(s)

Récupérer le titre d'une image pour l'afficher dans une page.

Bonjour,

Je suis en train de réaliser un site web pour une galerie d'art, j'utilise un thème Qode (ottar).

Sur cette page : http://arnaudlebecq.com/portfolio-item/283/

Lorsqu'on survole une image, il y a une animation qui affiche un hover avec le titre de l'image.

Pièce jointe 544730

Ce titre est défini comme le champ "title" donné à l'image dans la bibliothque media WP :

Pièce jointe 544731

C'est cette donnée que je voudrais récupérer.

Mes questions :

1. comment récupérer cette donnée ?
2. comment l'utiliser ensuite ? pour que je puisse par exemple l'inclure dans ma page sous une autre forme.

Merci d'avance pour votre aide.

Seb
11/03/2020, 13h09
rawsrc

salut,

Le pourquoi du "pas de réponse" est très souvent lié au fait que la question n'est pas claire du tout et là en occurrence c'est ton cas.
C'est toi qui est à l'origine du site ?
Après tu veux récupérer comment ? JS PHP...
Tu peux toujours dans un premier temps étudier le DOM et tu verras que c'est rangé dans :

Code:

<div style="font-size: 18px;color: #ffffff;line-height: 1.2;text-align: left;font-family:Montserrat;font-weight:400;font-style:normal">Agriculture City – acrylic on canvas – 90 x 150 cm – 2017</div>
11/03/2020, 13h18
sebgac

Oui, je suis à l'origine du site.

En gros, je voudrais récupérer cette info : "Agriculture City – acrylic on canvas – 90 x 150 cm – 2017", pour le mettre autre part sur la page.

Si c'est possible de le faire en JS ou Javascript c'est mieux car je connais un peu plus, mais je suis ouvert pour connaitre comment faire en php ...
11/03/2020, 13h36
rawsrc

la question est de savoir si tu veux le mettre autre part au rendu de la page ou une fois la page rendue ?
11/03/2020, 13h49
sebgac

au chargement de la page ou une fois la page chargée ?

je pense que c'est mieux au chargement directement.
11/03/2020, 14h00
rawsrc

donc le boulot à faire si situe du côté de PHP, il faut que tu mettes les mains dans le cambouis du template et isole comment il récupère cette valeur
11/03/2020, 14h40
sebgac

oui, c'est ça ma question, comment je peux faire :)
12/03/2020, 12h25
sebgac

1 pièce(s) jointe(s)
bon, j'ai tenté qqchose en jquery (je manipule mieux le jquery que le php ...)

avec ce bout de code, dans la console du deboggueur, j'arrive à afficher le titre de l'image :

Pièce jointe 545278

avec de bout de code
Code:

1 2 jQuery('.owl-item').append(jQuery('.edgtf-image-gallery .owl-item a').attr('title'));
sur cette page :

http://arnaudlebecq.com/portfolio-it...kul-custom-15/

Le problème, c'est que cela affiche seulement le titre de la première image affichée sur la page, sans prendre en compte les autres images.

Je suis sur le bon chemin je pense, j'ai juste besoin d'un petit coup de pouce pour arriver à mon but :)

1 pièce(s) jointe(s)

j'ai aussi tenté un truc en php. j'ai finalement trouvé l'endroit où modifié le slider et j'ai rajouté cette ligne de code :

Code:

<div class="titre_image"> <?php echo esc_attr($image['title']); ?> </div>

dans ce code :

Code:

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
<?php
$i = 0;
$rand = rand(0, 1000);
?>
<div class="edgtf-image-gallery <?php echo esc_attr($holder_classes); ?>">
    <div class="edgtf-ig-slider edgtf-owl-slider" <?php echo ottar_edge_get_inline_attrs($slider_data); ?>>
        <?php foreach ($images as $image) { ?>
            <div class="edgtf-ig-image">
                <?php if ($image_behavior === 'lightbox') { ?>
                <a itemprop="image" class="edgtf-ig-lightbox edgtf-block-drag-link" href="<?php echo esc_url($image['url']); ?>" data-rel="prettyPhoto[image_gallery_pretty_photo-<?php echo esc_attr($rand); ?>]" title="<?php echo esc_attr($image['title']); ?>">
                    <?php } else if ($image_behavior === 'custom-link' && !empty($custom_links)) { ?>
                    <a itemprop="url" class="edgtf-ig-custom-link edgtf-block-drag-link" href="<?php echo esc_url($custom_links[$i++]); ?>" target="<?php echo esc_attr($custom_link_target); ?>" title="<?php echo esc_attr($image['title']); ?>">
                        <?php } ?>
                        <?php if (is_array($image_size) && count($image_size)) :
                            echo ottar_edge_generate_thumbnail($image['image_id'], null, $image_size[0], $image_size[1]);
                        else:
                            echo wp_get_attachment_image($image['image_id'], $image_size);
                        endif; ?>
                        <?php if ($image_behavior === 'lightbox' || $image_behavior === 'custom-link') { ?>
                    </a>
                <?php } ?>
                <div class="titre_image"> <?php echo esc_attr($image['title']); ?> </div>
            </div>
        <?php } ?>
    </div>
</div>

Cela fonctionne, j'ai encore des problèmes à régler avec le CSS mais j'ai bien mon titre.

Pièce jointe 545357

Par contre, le chemin du fichier me laisse penser que je ne vais pas pouvoir l'inclure dans mon thème enfant ...

wp-content/plugins/ottar-core/shortcodes/image-gallery/templates/slider.php

Cela veut-il dire qu'à chaque mise à jour du thème, mon code customisé va disparaitre ?

10/05/2022, 11h11
clavier12AZQSWX

bonjour,

votre ligne de code jquery :

Code:

jQuery('.owl-item').append(jQuery('.edgtf-image-gallery .owl-item a').attr('title'));

vous l'avez insérée où dans wordpress ? dans un article ? dans le bloc html d'une page ?

ça fait 3h que je me bas pour faire marcher une ligne de code jquery dans un article ou un bloc html ...