Displaying Image Caption at Functions.php in Wordpress - wordpress

in our wordpress site we modified image gallery style with using theme functions. We changed div classes, ids to use jquery image slider.
To make this we used this codes on functions.php
add_filter('post_gallery', 'ct_post_gallery', 10, 2);
function ct_post_gallery($output, $attr) {
global $post;
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby'])
unset($attr['orderby']);
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ('RAND' == $order) $orderby = 'none';
if (!empty($include)) {
$include = preg_replace('/[^0-9,]+/', '', $include);
$_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
}
if (empty($attachments)) return '';
// Here's your actual output, you may customize it to your need
$output = "<div id=\"icmimarlikreferans\">\n";
$output .= "<ul id=\"icmimarlikreferansimg\">\n";
// Now you loop through each attachment
foreach ($attachments as $id => $attachment) {
// Fetch the thumbnail (or full image, it's up to you)
// $img = wp_get_attachment_image_src($id, 'medium');
// $img = wp_get_attachment_image_src($id, 'my-custom-image-size');
$img = wp_get_attachment_image_src($id, 'full');
$output .= "<li class=\"item\">\n";
$output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />\n";
$output .= "</li>\n";
}
$output .= "</ul>\n";
$output .= "</div>\n";
return $output;
}
When we use it without making edits WordPress displaying image captions in single post pages at bottom of images in galleries . But when we use this code at functions.php captions are not displaying. We know the caption codes are missing, in this code block what we are using...
We tried to add caption functions in this codes but we have failed.
We need to display image captions at bottom of images in galleries.
We will love you if you help.

Related

Owl carousel is not working slider in wordpress

I want to slider the "dhelp_lite_slider"'s post thumbnails using owl carousel in wordpress site. I'm calling my guess wrong. I would be glad if you help.
function main_slider()
{
$html = '';
$slider = get_posts( array(
'post_type'=> 'dhelp_lite_slider',
'numberposts' => 10,
'post_status' => 'private',
'meta_key' => '_ordering_slider',
'orderby' => 'meta_value_num',
'order' => 'ASC',
));
$html .= '<div class="owl-carousel owl-theme">';
foreach ( $slider as $post ) {
//var_dump($post);
$html .= '<div class="item">'.$post->post_title.'</div>';
}
$html .= '</div>';
return $html;
}
add_shortcode( 'main_slider_hook', 'main_slider' );

Include excerpt with shortcode

Working with a plugin that provides a shortcode with only a couple of parameters. https://wordpress.org/plugins/radio-station I'm using the [list-shows] shortcode. I would like to also pull in an excerpt of the content, I imagine that would be applicable to a lot of situations and improve my understanding of shortcodes.
I was able to add in the thumbnail to the output, but not the content, which seems to be referred to in the atts of the other shortcodes as 'show_desc'. You can see the output on this page: http://www.kzmuradio.org/kzmu-programs/
Here is the code for the shortcode. Apologies for my ignorance. Learning curve.
/* Shortcode for displaying a list of all shows * Since 2.0.0*/
function station_shortcode_list_shows($atts) {
extract( shortcode_atts( array(
'genre' => '',
'show_desc' => 1
), $atts ) );
//grab the published shows
$args = array(
'numberposts' => -1,
'offset' => 0,
'orderby' => 'title',
'order' => 'ASC',
'post_type' => 'show',
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => 'show_active',
'value' => 'on',
)
)
);
if($genre != '') {
$args['genres'] = $genre;
}
$shows = get_posts($args);
//if there are no shows saved, return nothing
if(!$shows) {
return false;
}
$output = '';
$output .= '<div id="station-show-list">';
$output .= '<ul>';
foreach($shows as $show) {
$output .= '<li>' . get_the_post_thumbnail($show->ID, 'thumbnail') . ''.get_the_title($show->ID).'</li>';
$output .= '</li>';
}
$output .= '</ul>';
$output .= '</div>';
return $output;
You can access all the data through $show in your foreach-loop. To see what they contain, you can use print_r():
print_r( $show );
For excerpt and content you can use this:
echo $show->post_excerpt;
echo wpautop( $show->post_content );
See also: https://codex.wordpress.org/Function_Reference/$post

Change Wordpress default gallery output

I am looking to use the Wordpress gallery shortcut but I want to tie the output into the Foundation Orbit plugin (to make a slider). This is the HTML I am looking to output:
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit>
<li>
<img src="img1.png" alt="bla bla bla" />
</li>
<li>
<img src="img2.png" alt="bla bla bla" />
</li>
<li>
<img src="img3.png" alt="bla bla bla" />
</li>
<li>
<img src="img4.png" alt="bla bla bla" />
</li>
</ul>
</div>
Is it possible to put something in functions.php (or similar) to achieve this?
Yes, indeed. Quite a while ago I've found this code and have been using it ever since. It's great to customize WP's default gallery to whatever you want.
There's a filter to post_gallery which you can use to customize all default WP galleries. Here's a sample of the code I use adapted to the template you provided. I've cleared it up as much as possible.
The first part of the function is pretty much gallery attachments handling, so you'll probably just want to change the latter half, the one that determines the output of your gallery template (follow the comments):
add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
global $post;
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby'])
unset($attr['orderby']);
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ('RAND' == $order) $orderby = 'none';
if (!empty($include)) {
$include = preg_replace('/[^0-9,]+/', '', $include);
$_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
}
if (empty($attachments)) return '';
// Here's your actual output, you may customize it to your need
$output = "<div class=\"slideshow-wrapper\">\n";
$output .= "<div class=\"preloader\"></div>\n";
$output .= "<ul data-orbit>\n";
// Now you loop through each attachment
foreach ($attachments as $id => $attachment) {
// Fetch the thumbnail (or full image, it's up to you)
// $img = wp_get_attachment_image_src($id, 'medium');
// $img = wp_get_attachment_image_src($id, 'my-custom-image-size');
$img = wp_get_attachment_image_src($id, 'full');
$output .= "<li>\n";
$output .= "<img src=\"{$img[0]}\" width=\"{$img[1]}\" height=\"{$img[2]}\" alt=\"\" />\n";
$output .= "</li>\n";
}
$output .= "</ul>\n";
$output .= "</div>\n";
return $output;
}
Just paste it to your functions.php file and modify to adapt it to your need. I'm pretty sure it'll work for you as it have worked for me :)
Super answer Mathielo.
However, I needed the option of including a caption, so I've modified your code to use the wp_prepare_attachment_for_js() function as that seems to provide the necessary data.
add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
global $post;
if (isset($attr['orderby'])) {
$attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
if (!$attr['orderby'])
unset($attr['orderby']);
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ('RAND' == $order) $orderby = 'none';
if (!empty($include)) {
$include = preg_replace('/[^0-9,]+/', '', $include);
$_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
$attachments = array();
foreach ($_attachments as $key => $val) {
$attachments[$val->ID] = $_attachments[$key];
}
}
if (empty($attachments)) return '';
// Here's your actual output, you may customize it to your need
$output = "<div class=\"slideshow-wrapper\">\n";
$output .= "<div class=\"preloader\"></div>\n";
$output .= "<ul data-orbit>\n";
// Now you loop through each attachment
foreach ($attachments as $id => $attachment) {
// Fetch all data related to attachment
$img = wp_prepare_attachment_for_js($id);
// If you want a different size change 'large' to eg. 'medium'
$url = $img['sizes']['large']['url'];
$height = $img['sizes']['large']['height'];
$width = $img['sizes']['large']['width'];
$alt = $img['alt'];
// Store the caption
$caption = $img['caption'];
$output .= "<li>\n";
$output .= "<img src=\"{$url}\" width=\"{$width}\" height=\"{$height}\" alt=\"{$alt}\" />\n";
// Output the caption if it exists
if ($caption) {
$output .= "<div class=\"orbit-caption\">{$caption}</div>\n";
}
$output .= "</li>\n";
}
$output .= "</ul>\n";
$output .= "</div>\n";
return $output;
}
I know the original question has been answered but I just wanted to share what I've done with the filter snippet in case it helps anyone else. I've enabled Miro Mannino's 'Justified Gallery' jquery plugin http://miromannino.com/projects/justified-gallery/ to work with Wordpress galleries in Wordpress 3.9 ... Here's the code with the changes I made to get it to work... (img size light thumb is my custom thumbnail to preserve image dimensions but keep page load times down.)
// Custom Gallery
add_filter( 'post_gallery', 'my_post_gallery', 10, 2 );
function my_post_gallery( $output, $attr) {
global $post, $wp_locale;
static $instance = 0;
$instance++;
// We're trusting author input, so let's at least make sure it looks like a valid orderby statement
if ( isset( $attr['orderby'] ) ) {
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( !$attr['orderby'] )
unset( $attr['orderby'] );
}
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'light-thumb',
'include' => '',
'exclude' => ''
), $attr));
$id = intval($id);
if ( 'RAND' == $order )
$orderby = 'none';
if ( !empty($include) ) {
$include = preg_replace( '/[^0-9,]+/', '', $include );
$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
} elseif ( !empty($exclude) ) {
$exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
} else {
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
}
if ( empty($attachments) )
return '';
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $att_id => $attachment )
$output .= wp_get_attachment_link($att_id, $size, true) . "\n";
return $output;
}
$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$columns = intval($columns);
$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
$float = is_rtl() ? 'right' : 'left';
$selector = "gallery-{$instance}";
$output = apply_filters('gallery_style', "
<style type='text/css'>
#{$selector} {
margin: auto;
}
#{$selector} .gallery-item {
float: {$float};
margin-top: 0px;
text-align: center;
width: {$itemwidth}%; }
#{$selector} img {
border: 0;
}
#{$selector} .gallery-caption {
margin-left: 0;
}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='$selector' class='gallery galleryid-{$id}'>");
$output = "<div id=\"mygallery\">\n";
$i = 0;
foreach ( $attachments as $id => $attachment ) {
$link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
$output .= "<{$itemtag} class='gallery-item'>";
$output .= "
<{$icontag} class='gallery-icon'>
$link
</{$icontag}>";
if ( $captiontag && trim($attachment->post_excerpt) ) {
$output .= "
<{$captiontag} class='gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
</{$captiontag}>";
}
$output .= "</{$itemtag}>";
if ( $columns > 0 && ++$i % $columns == 0 )
$output .= '<br style="clear: both" />';
}
$output .= "
<br style='clear: both;' />
</div>\n";
return $output;
}
It works a treat. Thanks for sharing the filter - it was just what I was looking for.
So if you want output another string like img title or img desc just use this construction
$title = $img['title'];
This is comment to Super answer Mathielo (second answer), and this universal solution, not only zubr foundation
Little note! If not disabled in admin area, this filter will cause gallery not to be visible in admin area. To avoid this, we can run filters main part inside if statement
add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr)
{
// Disable function in admina area.
if (is_admin()) {
return;
} else {
// put main code in here
}
}

Wordpress native gallery - own output - sorting difficulty

as you can read, I'm having trouble sorting the gallery in the order I want it to. I'm trying to have it sorted just like in the Drag&Drop Interface, where you edit your gallery. That's the same order as in the id attribute in the shortcode. I just can't figure out what value to assign to $orderby. i tried 'ID', 'menu_order' and 'post__in', but no changes.
Do you have any advice.
add_filter('post_gallery', 'fgf_gallery', 10, 2);
function fgf_gallery($output, $attr) {
global $post;
static $instance = 0;
$instance++;
$id = $post->ID;
$order = 'ASC';
$orderby = 'ID';
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
if ( empty($attachments) ) return;
$output = "<ul id='gallery-{$instance}' class='gallery'>";
foreach ( $attachments as $id => $attachment ) {
$output .= "<li class='gallery-item'>";
$output .= "<img src='".$thumb_src."'>";
$output .= "<h1>".$attachment->post_title."</h1>";
if ( trim($attachment->post_excerpt) ) {
$output .= "
<p class='wp-caption-text gallery-caption'>
" . wptexturize($attachment->post_excerpt) . "
<p>";
}
$output .= "</li>";
}
$output .= "</ul>\n";
return $output;
}
Thanks. I appreciated any hint to further documentation as well.
I found what I needed in the wp-includes/media.php file
you get the order from your shortcode with "post__in".
function fgf_gallery_2($output, $attr) {
static $instance = 0;
$instance++;
$order = 'ASC';
$orderby = 'post__in';
$include = $attr['ids'];
$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
$attachments = array();
foreach ( $_attachments as $key => $val ) {
$attachments[$val->ID] = $_attachments[$key];
}
if ( empty($attachments) ) return;
$output = "<ul id='gallery-{$instance}' class='gallery'>";
foreach ( $attachments as $id => $attachment ) {
/* do what you want here */
}
$output .= "</ul>\n";
return $output;
}
works for me.

Limit the number of gallery items WordPress outputs

<?php echo do_shortcode('[gallery id="25"]'); ?>
That's the code I'm using, I need a way to limit it to 2 items instead of all items. I know there is no native way to do it with the gallery shortcode, but is there a plugin or alternative method I could use?
you can rewrite the gallery shortcode function in your template's functions.php and do something like this
remove_shortcode('gallery');
add_shortcode('gallery', 'parse_gallery_shortcode');
function parse_gallery_shortcode($atts) {
global $post;
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'ids' => '',
'size' => 'medium',
'link' => 'file'
), $atts));
$ids = explode(',', $atts[ids]);
$i = 0;
foreach( $ids as $id ) {
$i++;
if ( $i > 2 ) { break; }
// or replace 2 with how many images you want
$image = get_post($id);
$img = wp_get_attachment_image_src($image->ID, 'post-onephoto');
$largeimg = wp_get_attachment_image_src($image->ID, 'large');
// this is where you output your images the way you want it
$return .= '<img width="400" height="400" src="'.$img[0].'" />';
}
return $return;
}

Resources