Slider Shortcode WordPress
- SOLVED
Hi All,
I am looking at creating a shortcode from the following slider code:
<div class="autogallery gallery" data-hires="false">
<div class="gallery-view" id="hero-gallery">
<figure class="gallery-content" id="gallery-1">
<div class="image"><img src="IMAGE URL" alt="" /></div>
</figure>
<figure class="gallery-content" id="gallery-2">
<div class="image"><img src="IMAGE URL" alt="" /></div>
</figure>
</div><!--gallery-view-->
<nav class="paddle-nav">
<ul>
<li><a class="arrow prev hero-gallery" href="#previous">Previous</a></li>
<li><a class="arrow next hero-gallery" href="#next">Next</a></li>
</ul>
</nav>
<nav class="dot-nav">
<ul>
<li><a class="hero-gallery" href="#gallery-1">#</a></li>
<li><a class="hero-gallery" href="#gallery-2">#</a></li>
</ul>
</nav>
</div><!--gallery-->
This works perfectly if I put this into the page template, but I am having issues when I try and convert this into a shortcode.
I would ideally want the shortcode to look like the following:
[internal_slider]
[image]IMAGE URL TO GO HERE[/image]
[image]IMAGE URL TO GO HERE[/image]
[/internal_slider]
As I said, I have tried numerous times at this and failed, so any ideas?
Thanks for your help.
Answers (2)
Dbranes answers:
Hi, here is one idea:
add_shortcode('image', 'internal_image_func');
function internal_image_func($atts, $content=null) {
return sprintf('<figure class="gallery-content" id="gallery-1"><div class="image"><img src="%s" alt="" /></div></figure>',trim($content));
}
add_shortcode('internal_slider', 'internal_slider_func');
function internal_slider_func($atts, $content=null) {
$imgs =do_shortcode($content);
$imgs_count = substr_count($imgs,'<figure');
$out = '<div class="autogallery gallery" data-hires="false">';
$out .= '<div class="gallery-view" id="hero-gallery">';
$out .= $imgs;
$out .= '</div><!--gallery-view-->';
$out .= '<nav class="paddle-nav">';
$out .= '<ul>';
$out .= '<li><a class="arrow prev hero-gallery" href="#previous">Previous</a></li>';
$out .= '<li><a class="arrow next hero-gallery" href="#next">Next</a></li>';
$out .= '</ul>';
$out .= '</nav>';
$out .= '<nav class="dot-nav">';
$out .= '<ul>';
for($i=1;$i<=$imgs_count;$i++){
$out .= '<li><a class="hero-gallery" href="#gallery-'.$i.'">#</a></li>';
}
$out .= '</ul>';
$out .= '</nav>';
$out .= '</div><!--gallery-->';
return $out;
}
craigfarrall comments:
Thanks for your response.
It isn't currently working with that code, but I think I can see what is stopping it. It needs a counter adding to the following code:
[code]
<figure class="gallery-content" id="gallery-1">
[/code]
Basically the gallery- needs a counter number after it, for example: gallery-1 / gallery-2 etc...
Are you able to amend the code to fit that bit in?
Thanks.
Dbranes comments:
I'm back online, didn't notice these id's ;-)
I will check it out.
Dbranes comments:
Try this instead of my previous code:
add_shortcode('internal_slider', 'internal_slider_func');
function internal_slider_func($atts, $content=null) {
preg_match_all("/\[image\]([^\]\[]*)\[\/image\]/s",strip_tags($content),$match);
if(isset($match[1])){
$imgs=$match[1];
$imgs_count = count($imgs);
$out = '<div class="autogallery gallery" data-hires="false">';
$out .= '<div class="gallery-view" id="hero-gallery">';
for($i=1;$i<=$imgs_count;$i++){
$out .= sprintf('<figure class="gallery-content" id="gallery-%d"><div class="image"><img src="%s" alt="" /></div></figure>',$i,trim($imgs[$i]));
}
$out .= '</div><!--gallery-view-->';
$out .= '<nav class="paddle-nav">';
$out .= '<ul>';
$out .= '<li><a class="arrow prev hero-gallery" href="#previous">Previous</a></li>';
$out .= '<li><a class="arrow next hero-gallery" href="#next">Next</a></li>';
$out .= '</ul>';
$out .= '</nav>';
$out .= '<nav class="dot-nav">';
$out .= '<ul>';
for($i=1;$i<=$imgs_count;$i++){
$out .= '<li><a class="hero-gallery" href="#gallery-'.$i.'">#</a></li>';
}
$out .= '</ul>';
$out .= '</nav>';
$out .= '</div><!--gallery-->';
return $out;
}
}
Dbranes comments:
this one is better (forgot to change <em>$i=1</em> to <em>$i=0</em>) ;-)
add_shortcode('internal_slider', 'internal_slider_func');
function internal_slider_func($atts, $content=null) {
$out="";
preg_match_all("/\[image\]([^\]\[]*)\[\/image\]/s",strip_tags($content),$match);
if(isset($match[1])){
$imgs=$match[1];
$imgs_count = count($imgs);
$out = '<div class="autogallery gallery" data-hires="false">';
$out .= '<div class="gallery-view" id="hero-gallery">';
for($i=0;$i<$imgs_count;$i++){
$out .= sprintf('<figure class="gallery-content" id="gallery-%d"><div class="image"><img src="%s" alt="" /></div></figure>',$i,trim($imgs[$i]));
}
$out .= '</div><!--gallery-view-->';
$out .= '<nav class="paddle-nav">';
$out .= '<ul>';
$out .= '<li><a class="arrow prev hero-gallery" href="#previous">Previous</a></li>';
$out .= '<li><a class="arrow next hero-gallery" href="#next">Next</a></li>';
$out .= '</ul>';
$out .= '</nav>';
$out .= '<nav class="dot-nav">';
$out .= '<ul>';
for($i=0;$i<$imgs_count;$i++){
$out .= '<li><a class="hero-gallery" href="#gallery-'.$i.'">#</a></li>';
}
$out .= '</ul>';
$out .= '</nav>';
$out .= '</div><!--gallery-->';
}
return $out;
}
