Ask your WordPress questions! Pay money and get answers fast! (more info)

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)

2013-04-09

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

2013-04-12

Yakir Sitbon answers:

Do you need other code or what?