I have custom PHP scope in my Wordpress theme, like this:
foreach ($myprojects as $post){
setup_postdata( $post );
$output .= '<div class="col-xs-6 col-sm-3">';
$output .= '<div class="portfolio-item">';
if (has_post_thumbnail($post->ID)) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$content = get_post_field('post_content', $post_id);
$output .= '<img class="img-responsive" src="'.$thumb[0].'" title="" alt="">';
}else{
$output .= '<img class="img-responsive" src="images/work_1.jpg" title="" alt="">';
}
$post_id = get_the_title($post->ID);
$post_name = CFS()->get('project_name', '');
$output .= '<a class="overlay" rel="shadowbox" href="'.$large_image[0].'">';
$output .= '<p class="btn-preview">'.$post_id.'</p>';
$output .= '</a>';
$output .= '</div>';
$output .= '</div>';
$count++;
$index++;
}
Yes, it works fine. When I click a tag, open $large_image via prettyPhoto.
But this code for single image. I want to thumbnails stay same, but when click to link, open that multiple image via prettyPhoto. So, imported 2 images in post body and want to show these images.
In a nutshell, this code:
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
Must be like this:
$large_image = wp_get_attachment_image_src( $body($post->ID), 'full');
But I know, this is not correct code. Its pseudo.
How can I fix my problem? Thanks.
Change your lightbox solution to fancyBox, use data-fancybox-group and a bit of Wordpress/PHP knowledge... that's it!
foreach ($myprojects as $post){
setup_postdata( $post );
$output .= '<div class="col-xs-6 col-sm-3">';
$output .= '<div class="portfolio-item">';
if (has_post_thumbnail($post->ID)) {
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium');
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
$content = get_post_field('post_content', $post_id);
$output .= '<img class="img-responsive" src="'.$thumb[0].'" title="" alt="">';
}else{
$output .= '<img class="img-responsive" src="images/work_1.jpg" title="" alt="">';
}
$post_id = get_the_title($post->ID);
$post_name = CFS()->get('project_name', '');
$output .= '<a class="overlay test fancybox" data-fancybox-group="'.$post->ID.'" href="'.$large_image[0].'">';
$output .= '<p class="btn-preview">'.$post_id.'</p>';
$output .= '</a>';
$output .= '</div>';
$output .= '</div>';
$attached_images = get_attached_media('image', $post->ID);
foreach($attached_images as $image){
$large_attached_image = wp_get_attachment_image_src($image->ID,'full');
if($large_image[0] != $large_attached_image[0]){
$output .= '<a class="overlay test fancybox" data-fancybox-group="'.$post->ID.'" style="display:none" href="'.$large_attached_image[0].'"></a>';
}
}
$count++;
$index++;
}
Related
I assembled a Wordpress shortcode but it throws an error in the block editor: "Updating failed. The response is not a valid JSON response." Notwithstanding, the edits are saved. I've been told the reason I get the error is my "shortcode handler function is generating output. Such functions must collect all output into a variable which is returned."
Below are (1) the code that works but causes the error message and (2) my pseudo code to fix the problem by assigning the 'a href' to a variable $html, but doesn't.
(1)
function make_header() {
$args = array(
'posts_per_page' => 1,
'category_name' => 'headlines',
);
$q = new WP_Query( $args);
if ( $q->have_posts() ) {
while ( $q->have_posts() ) {
$q->the_post();
$featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
?>
<a href="<?php the_permalink() ?>">
<div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
<h2>
<?php the_title(); ?>
</h2></a>
<?php
}
wp_reset_postdata();
}
}
add_shortcode('make_header', 'make_header');
(2)
$html = '
<a href="<?php the_permalink() ?>">
<div><img src="<?php echo $featured_img_url; ?>" width="100%" /></div>
<h2>
<?php
the_title(); ?> </h2></a>';
}
wp_reset_postdata();
return $html;
Thanks for your help.
Try below code
$html = ' <div><img src="'. echo $featured_img_url .'" width="100%" /></div> <h2>'. the_title().' </h2>';
the concatenation operator (‘.‘), which returns the concatenation of its right and left arguments.
You could to use concatenation like so:
$html = '<a href="' . esc_url(get_the_permalink()) . '">';
$html .= '<div>';
$html .= '<img src="' . $featured_img_url . '" width="100%" />';
$html .= '</div>';
$html .= '<h2>' . get_the_title() . '</h2></a>';
Also, use get_the_permalink() and get_the_title() as these functions are returning their result instead of outputting it.
The full code would then look something like this:
function make_header() {
$html = '';
$args = array(
'posts_per_page' => 1,
'category_name' => 'headlines',
);
$q = new WP_Query( $args);
if ( $q->have_posts() ) {
while ( $q->have_posts() ) {
$q->the_post();
$featured_img_url = esc_url(get_the_post_thumbnail_url(get_the_ID(),'full'));
$html = '<a href="' . esc_url(get_the_permalink()) . '">';
$html .= '<div>';
$html .= '<img src="' . $featured_img_url . '" width="100%" />';
$html .= '</div>';
$html .= '<h2>' . get_the_title() . '</h2></a>';
}
wp_reset_postdata();
}
return $html;
}
add_shortcode('make_header', 'make_header');
I'm trying to make my blog titles link to the full post from the preview area so the title should have the same function as the read more button. The blogs are in a masonry layout and I'm using a themeforest theme.
This is the blog page.
I believe this to be the php code that controls the layout - hope it helps.
Sorry php newbie here.
I have tried using <h5 class="post-title">'. get_the_title() .'</h5>'; but all this did was generate a broken url containing '.get_permalink().'" in it.
Thank you
<?php if ( '' != get_the_title() ): ?>
<h5 class="post-title"><?php the_title(); ?></h5>
<?php endif ?>
<?php if (has_post_format('link')): ?>
<?php echo __("Read more", TEMPNAME); ?><span class="icon-arrow-right9"></span>
<?php else: ?>
<?php echo __("Read more", TEMPNAME); ?><span class="icon-arrow-right9"></span>
<?php endif ?>
<?php endif; ?>
You just need to wrap the h5 title in an anchor tag <a> on line 37 of your snippet. The specific code to change is:
New Answer
<a href="<?php get_permalink(); ?>">
<h5 class="post-title"><?php the_title(); ?></h5>
</a>
or from you code, try:
<a href="<?php echo $nz_link_url; ?>" title="<?php echo __("Go to", TEMPNAME).' '.$nz_link_url; ?>">
<h5 class="post-title"><?php the_title(); ?></h5>
</a>
Old Answer
if ( '' != get_the_title() ){
$output .= '<h5 class="post-title">'. get_the_title() .'</h5>';
}
You may have to update your CSS to reflect the anchor tag in front of the H5
Full Code
while($recent_posts->have_posts()) : $recent_posts->the_post();
$output .= '<div class="post format-'.get_post_format().'" data-grid="ninzio_01">';
$output .= '<div class="post-wrap nz-clearfix">';
if (get_post_format() == 'image') {
$values = get_post_custom( $post->ID );
$nz_image_url = isset($values["image_url"][0]) ? $values["image_url"][0] : "";
if (!empty($nz_image_url)) {
$output .='<a class="nz-more" href="'.get_permalink().'">';
$output .= '<div class="nz-thumbnail">';
$output .= '<img src="'.$nz_image_url.'" alt="'.get_the_title().'">';
$output .= '<div class="ninzio-overlay"></div>';
$output .= '<div class="post-date"><span>'.get_the_date("d").'</span><span>'.get_the_date("M").'</span></div>';
$output .='</div>';
$output .='</a>';
}
} else {
if (has_post_thumbnail()) {
$output .='<a class="nz-more" href="'.get_permalink().'">';
$output .= '<div class="nz-thumbnail">';
$output .= get_the_post_thumbnail( $post->ID, $size );
$output .= '<div class="ninzio-overlay"></div>';
$output .= '<div class="post-date"><span>'.get_the_date("d").'</span><span>'.get_the_date("M").'</span></div>';
$output .='</div>';
$output .='</a>';
}
}
$output .= '<div class="post-body">';
if ( '' != get_the_title() ){
$output .= '<h5 class="post-title">'. get_the_title() .'</h5>';
}
if ($excerpt == "true") {
$output .= '<div class="post-excerpt">'.nz_excerpt(95).'</div>';
}
$output .=''.__("Read more", TEMPNAME).' <span class="icon-arrow-right9"></span>';
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
I have created the sidebar widget for popular, recent and most commented posts in my theme. I have some posts which don't contain the image thumbnail.
This is the popular query posts for 5 posts in my widget
<?php if (!empty($popular_posts)) { ?>
<div class="tab-pane fade in active" id="popular">
<div class="row">
<!-- ********************************************** -->
<!-- Popular Posts Tab -->
<!-- ********************************************** -->
<?php
$YPE_options = get_option( 'YPE_sidebar_option_name' );
$popular = new WP_Query( array(
'posts_per_page' => $popular_limit,
'meta_key' => 'post_views_count', // this is function within functions.php for counting post veiews
'orderby' => 'meta_value_num',
'order' => 'DESC'
));
while ( $popular->have_posts() ) : $popular->the_post();
$html = '<article>';
$html .= '<section class="bootstrap-nav-thumb">';
$html .= '<p>';
$html .= '<a href="' . get_permalink() . '">';
$html .= get_the_post_thumbnail(get_the_ID(), array('class' => 'img-responsive '.$YPE_options['YPE_sidebar_PRC_thumb_style'].''));
$html .= '</a>';
$html .= '</p>';
$html .= '</section>';
$html .= '<aside class="bootstrap-title-info">';
$html .= '<p>';
$html .= ''.get_the_title().'';
$html .= '</p>';
$html .= '<p class="text-muted">' . get_the_date() . '||'. getPostViews(get_the_ID()) . '</p>';
$html .= '</aside>';
$html .= '</article>';
echo $html;
endwhile;
?>
</div> <!-- End row of popular posts -->
</div> <!-- End tab-pane of popular posts -->
<?php } ?>
how can i add conditional statement to this code
$html .= '<a href="' . get_permalink() . '">';
$html .= get_the_post_thumbnail(get_the_ID(), array('class' => 'img-responsive '.$YPE_options['YPE_sidebar_PRC_thumb_style'].''));
$html .= '</a>';
Note: i want to say if has post thumbnail put the posts thumbnail and if not has the thumbnail put the first image instead of the post thumbnail
$thumb = get_the_post_thumbnail(get_the_ID());
if(!empty($thumb))
$image = $thumb;
else {
$image = '<img src="';
$image .= catch_that_image();
$image .= '" alt="" />'; }
And put your function as
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
Something like this could work:
$html .= '<a href="' . get_permalink() . '">';
if ( has_post_thumbnail() ) {
$html .= get_the_post_thumbnail(get_the_ID(), array('class' => 'img-responsive '.$YPE_options['YPE_sidebar_PRC_thumb_style'].''));
} else {
$html .= "<img src='". echo wp_get_attachment_image_src(0,'thumbnail') .'" class="img-responsive ' .$YPE_options['YPE_sidebar_PRC_thumb_style'].' " />';
};
html .= '</a>';
I am using the following code to create a shortcode for use in the WYSIWYG.
function consultants( $atts, $content = null ) {
$output = '';
$consultant_query = new WP_Query('post_type=consultants&showposts=10');
if ($consultant_query->have_posts()) :
$output .= '<div class="col-md-12">';
while ($consultant_query->have_posts()) : $consultant_query->the_post();
$output .= '<div class="col-xs-12 col-sm-5 col-md-4 kam-tile-own-bg"><h1>' .the_title(). '</h1> ';
if(has_post_thumbnail())
{
$output .= get_the_post_thumbnail($post->ID,'wpbs-featured-avatar');
} else {
$output .= '
<img class="kam-avatar" width="62" height="62" src="'.get_template_directory_uri().'/images/avatar#2x.jpg" class="attachment-featured_image wp-post-image" alt="" />'; }
$output .= '</div>';
endwhile;
$output .= '</div>';
endif;
wp_reset_postdata();
return $output;
}
The code works fine - HOWEVER it fails on the .the_title(). it throws this at the top of the page it has no respect for the tags or the in which it is contained.
Many thanks
instead of the_title(); use get_the_title();
I am trying to display a custom post type in wordpress. I can display the themubnail but I would like to resize it according to the item type:
My code is as follows:
<?php
$args = array('post_type' => 'package','package-category'=>'Kenya', 'posts_per_page'=>6 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<?php
$item_type == '1/4 Grid Style';
$item_class = $package_div_size_num_class[$item_type]['class'];
$item_size = $package_div_size_num_class[$item_type];
function print_package_mythumbnail( $post_id, $item_size, $last_minute = 'normal-type', $last_text = 'Read More' ){
$thumbnail_id = get_post_thumbnail_id( $post_id );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id , $item_size );
$alt_text = get_post_meta($thumbnail_id , '_wp_attachment_image_alt', true);
if( !empty($thumbnail) ){
echo '<div class="package-media-wrapper gdl-image">';
echo '<a href="' . get_permalink() . '">';
echo '<img src="' . $thumbnail[0] .'" alt="'. $alt_text .'"/>';
echo '</a>';
echo '</div>'; // package-media-wrapper
}
}
$thumbnail_id = get_post_thumbnail_id( $post_id );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id , $item_size );
$alt_text = get_post_meta($thumbnail_id , '_wp_attachment_image_alt', true);
if( !empty($thumbnail) ){
echo '<div class="package-media-wrapper gdl-image">';
echo '<a href="' . get_permalink() . '">';
echo '<img src="' . $thumbnail[0] .'" alt="'. $alt_text .'"/>';
if( !empty($last_minute) && !empty($last_text) ){
echo '<div class="package-ribbon-wrapper">';
echo '<div class="package-type ' . $last_minute . '">';
echo $last_text;
echo '</div>';
echo '<div class="clear"></div>';
echo '<div class="package-type-gimmick"></div>';
echo '<div class="clear"></div>';
echo '</div>';
}
echo '</a>';
echo '</div>'; // package-media-wrapper
}
?>
Where $item_type == '1/4 Grid Style' is defined as:
$package_div_size_num_class = array(
"1/4 Grid Style" => array(
"no-sidebar"=>"400x300",
"one-sidebar"=>"400x400",
"both-sidebar"=>"400x400",
"class"=>"gdl-package-widget"
)
)
How can I resize the thumbnail according to the item type?
quick fix using css (create a div for the image and set dimensions.)
in your style.css
.package-media-wrapper{
min-width: 30%;
max-width: 30% !important;
}
.package-image{
width: 100%;
}
Your question is a bit confusing are you trying to detect how many sidebars are showing? In most templates this is set on the page template fairly late in the code? To make changes to html you could detect what template is being used by
if(is_page_template('2column')) {
$imagehtml= ............;
} else if (etc) {}
Other than that you are looking at query to get the attributes of a containing div (in your case the column size i guess?)
jQuery(document).ready(function() {
var width=jQuery('.package-media-wrapper').width();
if(width===300px) {
jQuery('.package-image').width('300px');
}
}