Custom gallery outpur on page template WordPress
- SOLVED
Hello,
I need a native WordPress gallery shortcode to have a custom output on the page template.
E.g. I have a page template called <strong>gallery.php </strong>.
On this template, when inserting a WP gallery I need it to have the following HTML:
<li><img src="path/to/image-fullsize" width="500" height="500" alt="image_title"></li>
Width and height need to be the actual width and height of downloaded image.
On other templates gallery should work as usual.
Answers (3)
Dbranes answers:
Hi, do you mean like the shortcode:
[gallery size="full"]
it will give the actual width and height.
You can also change the tags
[gallery size="full" itemtag="li" icontag="span" captiontag="p" link="file"]
<strong>Edit: </strong>
if you want to remove the image links from the above gallery shortcode you can add this into your functions.php file:
add_filter('wp_get_attachment_link', 'my_get_attachment_link', 10, 1);
function my_get_attachment_link($html){
if(is_page('my-gallery-page-slug')){ // EDIT this 'my-gallery-page-slug' page slug
$html = strip_tags($html,'<img>');
return $html;
}else{
return $html;
}
}
<strong>Edit 2:</strong>
if you use the <strong>do_shortcode()</strong> in your template code as @Naveen Chand suggest, you can then use
<?php
$gallery_html= do_shortcode('[gallery ids="483,217,216,215,210" size="full" itemtag="li" icontag="span" captiontag="p" link="file"]');
echo strip_tags($gallery_html,'<style><img><div><ul><li>');
?>
to get the html you are after. You can also play with the '<style><img><div><ul><li>' string.
This will only allow the tags <style><img><div><ul><li> and strip out all other tags.
The ids parameter is just to select specific images.
Hope this helps
denoizzed comments:
Thanks for your input.
I'm using the following shortcode:
[gallery link="file" ids="488,472,439,415,414,413"]
and I would like to keep it that way (this one is generated by WP so I don't want clients to modify it in HTML field actually).
So with using that shortcode, how do I have the following HTML?
You chunk of code partly works, but shows thumbnails and leaves <dt> thing in place.
Dbranes comments:
ok, you can try this:
add_shortcode( 'gallery', 'modified_gallery_shortcode' );
function modified_gallery_shortcode($attr) {
if(is_page('my-gallery')){ // EDIT this slug
$attr['size']="full";
$attr['link']="file";
$attr['itemtag']="li";
$attr['icontag']="span";
$attr['captiontag']="p";
$output = gallery_shortcode($attr);
$output =strip_tags($output,'<style><img><div><ul><li>');
}else{
$output = gallery_shortcode($attr);
}
return $output;
}
this will change the gallery shortcode on the page http://example.com/my-gallery
denoizzed comments:
Almost close, but is it possible to remove inline style declarations and change <div> to <ul class="slider">?
Output from firebug:
<style type="text/css">
<div id="gallery-1" class="gallery galleryid-15 gallery-columns-3 gallery-size-full">
<li class="gallery-item">
<img class="attachment-full" width="800" height="1200" alt="1" src="http://localhost:8888/gallerypro/wp-content/uploads/2012/12/1.jpg" style="width: 305px; height: 458px;">
</li>
<li class="gallery-item">
<li class="gallery-item">
<li class="gallery-item">
...
needs to be
<ul class="slides">
<li> <img class="attachment-full" width="800" height="1200" alt="1" src="http://localhost:8888/gallerypro/wp-content/uploads/2012/12/1.jpg"></li>
...
</ul>
Dbranes comments:
ok, try this:
add_shortcode( 'gallery', 'modified_gallery_shortcode' );
function modified_gallery_shortcode($attr) {
if(is_page('my-gallery')){ // EDIT this slug
$attr['size']="full";
$attr['link']="file";
$attr['itemtag']="li";
$attr['icontag']="span";
$attr['captiontag']="p";
$output = gallery_shortcode($attr);
$output =strip_tags($output,'<style><img><ul><li>');
$output =str_replace(array(" class='gallery-item'"),array(""),$output);
$output='<ul class="slider">'.$output.'</ul>';
}else{
$output = gallery_shortcode($attr);
}
return $output;
}
ps: thanks @Duncan for the suggestion.
You could use that in the code if you have more pages that use the template.
Dbranes comments:
did this produce the html structure you wanted?
denoizzed comments:
Even closer :)
<li class="active" style="visibility: visible;">
<img width="1015" height="1200" src="http://denoizzed.com/templates/photo/selftitled/wp-content/uploads/2012/12/4.jpg" class="attachment-full" alt="Moonlight" style="width: 597px; height: 706px;"/>
Moonlight
</li>
Now can 'Moonlight' be wrapped in the tag? It's a caption in WP 3.5 editor?
denoizzed comments:
I mean a <p> tag or something.
Dbranes comments:
yes, you can replace
$output =strip_tags($output,'<style><img><ul><li>');
with
$output =strip_tags($output,'<style><img><ul><li><p>');
Duncan O'Neill answers:
Just an additional note to Dbranes' solution of 10.36pm ( below as of writing, and which I haven't tested, but assume works );
To have this apply to all pages which use the template coded in gallery.php, the conditional line should read;
if(is_page_template('gallery.php')){ // EDIT this slug
in place of
if(is_page('my-gallery')){ // EDIT this slug
The second will apply only to that page, whereas the first will apply to all page using that template.
Naveen Chand answers:
Please share your <strong>gallery.php</strong> file.
EDIT:
Sorry, I didnt read this "E.g. I have..." in your post. You don't have to share it unless gallery.php is specially coded to alter the loop. I think @Dbranes is correct. I have two additions to what he said:
1. You'll have to be aware that if you simply use [gallery size="full"], only images that are "attached" to that particular page will appear. If you want to show images that are not necessarily attached to the current page, then you'll have to use [gallery include="10,11,19"] where the numbers are the attachment IDs.
2. Because your question is about including the shortcode in a page template, the correct way to do it is to include this below code in your page template within the loop:
<?php echo do_shortcode('[gallery option1="value1"]'); ?>
Hope this helps.
denoizzed comments:
Thanks for you input.
<!-- slider -->
<ul class="slides">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'order'=> 'ASC',
'orderby' => 'menu_order'
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
echo '<li>';
echo wp_get_attachment_image( $attachment->ID, 'full' );
echo '</li>';
}
}
endwhile; endif; ?>
</ul>
<!-- slider ends -->
I can't hardcode the shortcode with do_shortcode unfortunately and I need shortcode in the editor because of 3.5 new manager.
Sorry if I'm not clear, do not hesitate if any questions.