Discussion :

[sebgac]

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.



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



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

[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 html :

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

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

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

[rawsrc]

la question est de savoir si tu veux le mettre autre part au rendu de la page ou une fois la page rendue ?

[sebgac]

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

je pense que c'est mieux au chargement directement.

[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

[sebgac]

oui, c'est ça ma question, comment je peux faire

[sebgac]

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 :



avec de bout de code

Code javascript :

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

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

[sebgac]

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 php :

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

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

dans ce code :

Code php :

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

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.



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 ?

[clavier12AZQSWX]

bonjour,

votre ligne de code jquery :

Code :

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

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