web-dev-qa-db-fra.com

Ajouter htmlentities et/ou shortcode dans les attributs de données

Je me rends compte que c’est dingue, mais j’ai construit une galerie filtrée avec des sables mouvants et elle affiche une image, un titre et une description plus grands, lorsque vous cliquez sur la plus petite image, les données img sont affichées dans un format plus grand. Voici le code qui fonctionne actuellement ...

<img src="<?php echo $large_image ?>" data-img="<?php echo $large_image ?>"
 data-title="<?php echo get_the_title(); ?>" 
 data-description="<?php the_content();?>" alt="" class="superbox-img" />

Mon client est revenu et m'a demandé s'il pouvait changer les images plus grandes qui sont tirées de l'attribut data-img des images statiques en galeries ... J'ai donc installé le plug-in Advanced Custom Fields et ajouté un éditeur WYSIWYG, pour un champ de code court, dans les publications du portefeuille (type de page personnalisé). Ce que je voudrais importer un curseur royal ( http://dimsemenov.com/plugins/royal-slider/ ) code court dans. Depuis, j'ai changé le code ci-dessus en code suivant ...

<img src="<?php echo $large_image ?>" 
data-img="<?php htmlentities(the_field('portfolio_galleries')); ?>" 
data-title="<?php echo get_the_title(); ?>" 
data-description="<?php the_content();?>" alt="" class="superbox-img" />

Ce qui jette une erreur et crache le code HTML suivant ...

<img src="http://localhost:8888/BVH/wp-content/uploads/2013/03/St-Francis-Assisi-Interior-6-.jpg" 
data-img="<div id="new-royalslider-6" class="royalSlider new-royalslider-6 rsMinW rs-simple-vertical" 
style="width:100%; height:500;">
<div class="rsContent">

<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test1-1024x437.png">test1</a>
<div class="rsTmb">test1</div>

</div><div class="rsContent">

<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test2-1024x437.png">test2</a>
<div class="rsTmb">test2</div></div>

<div class="rsContent">
<a class="rsImg" href="http://localhost:8888/BVH/wp-content/uploads/2013/03/test3-1024x437.png">test3</a>
<div class="rsTmb">test3</div></div></div>" 

data-title="Doane" data-description="<p>testing1234</p>" 
alt="" class="superbox-img" />

Peut-être que je m'y prends mal, mais la galerie initiale fonctionnait très bien et je me demandais comment résoudre ce problème. Toute aide serait formidable, car je sais que c'est probablement une cause perdue comme je le fais actuellement. accomplir ceci. : - /

Merci d'avance.

METTRE À JOUR:

data-img="&lt;div id=&quot;new-royalslider-6&quot; 
class=&quot;royalSlider new-royalslider-6 rsMinW rs-simple-vertical&quot;  
style=&quot;width:100%; height:500;&quot;&gt;&lt;div 
class=&quot;rsContent&quot;&gt; &lt;a 
class=&quot;rsImg&quot; href=&quot;localhost:8888/BVH/wp-content/uploads/2013/03/…; &lt;div`
pluginsshortcodehtml5
1
bryanlewis

the_field renvoie la sortie alors que htmlentities() s'attend à ce que la valeur soit renvoyée. Essayez plutôt get_field:

data-img="<?php echo htmlentities(get_field('portfolio_galleries')); ?>"

METTRE À JOUR:

Au lieu d'ajouter cet énorme morceau de code HTML pour le curseur à l'attribut data, ajoutez-le simplement après votre image:

<img src="<?php echo $large_image ?>"  
data-title="<?php echo get_the_title(); ?>" 
data-description="<?php the_content();?>" alt="<?php echo get_the_title(); // be Nice ?>" class="superbox-img" />
the_field('portfolio_galleries');

et cachez-le avec votre css:

.portfolio-item .royalSlider { display: none; }

Maintenant, chargez le code HTML dans votre conteneur de superbox lorsque l'utilisateur clique sur l'élément en le modifiant dans votre superbox.js autour de la ligne 36:

superbox.find('.royalSlider').remove(); // remove the slider from previous events
var imgData = currentimg.data();
var sliderData = currentimg.next('.royalSlider'); // grab the slider html that we want to insert

superboximg.attr('src', imgData.img); 

    if (sliderData) { // show the slider if there is one
        superbox.clone().append(sliderData); // clone the element so we don't loose it for the next time the user clicks
    } else { // if there is no slider proceed as before
        if (imgData.title) {
            superbox.append('<h3 class="title">' + imgData.title + '</h3>');
        }
        if (imgData.description) {
            superbox.append('<div class="description">' + imgData.description + '</div>');
        }
    }

Il y a de plus jolies façons de le faire, comme faire écho aux URL du curseur vers les attributs <img /> et ensuite générer le curseur html en passant en revue ces URL, mais pour l'instant cela devrait fonctionner.

2
Jan Beck