I have picked up a project from a previous developer and he is using this code to generate thumbnails. I need to add a default fallback image and I'm unsure of the best practice.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="container">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content(); ?>
</div>
<?php $categories = get_categories(array('orderby'=>'order','number'=>'13'));
$wud = wp_upload_dir();
$width = get_option('thumbnail_size_w');
$height = get_option('thumbnail_size_h');
$exclude_cats = array(1, 27); // Array of category ID's to exlude from this page
?>
<div id="gallery">
<ul class="cat-list">
<?php foreach ($categories as $cat) {
if (!in_array($cat->cat_ID, $exclude_cats)) : ?>
<li class="cat-item cat-item-<?php echo $cat->cat_ID; ?>">
<a href="<?php echo get_category_link( $cat->term_id ); ?>" title="View all artists under the <?php echo $cat->cat_name; ?> category">
<div class="cat-ss" style="position: relative; width: <?php echo $width; ?>px; height: <?php echo $height; ?>px; overflow: hidden;">
<?php $artists = get_posts('category=' . $cat->cat_ID . '&orderby=rand');
foreach ($artists as $artist) {
$name = get_the_title( $artist->ID );
$thumb = $wud['baseurl'] . '/thumb-' . sanitize_title( $name ) . '-' . $width . 'x' . $height . '.jpg'; ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $name; ?>" title="<?php echo $name; ?>" width="<?php echo $width; ?>" class="cat-ss-image" height="<?php echo $height; ?>" style="position: absolute; top: 0; left: 0;" />
<?php } ?>
<div class="cat-ss-caption png" style="position: absolute; bottom: 0;"><h3><?php echo $cat->cat_name; ?></h3></div>
</div>
</a>
</li>
<?php endif;
} ?>
<ul>
</div>
<div style="clear: both"></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<div class="post">
<h2><?php _e('Not Found'); ?></h2>
</div>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
Regardless of your code you should have a look into has_post_thumbnail and then use get_the_post_thumbnail to output a thumbnail or your fallback image.
Works like a charm on many of my sites. You can find examples in the Codex pages I linked to.
Looks like his code to pull in a thumb is
<?php $thumb = $wud['baseurl'] . '/thumb-' . sanitize_title( $name ) . '-' . $width . 'x' . $height . '.jpg'; ?>
So to make it a conditional if/else statement if it's not empty render the image thumbnail, and use a fallback if it is empty, do this (add whatever other code you need to for the image to render):
<?php if(!empty $thumb) { ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $name; ?>" title="<?php echo $name; ?>" width="<?php echo $width; ?>" class="cat-ss-image" height="<?php echo $height; ?>" style="position: absolute; top: 0; left: 0;" />
<?php } else { ?>
<img src="yourfallback.jpg" style="position: absolute; top: 0; left: 0;">
<?php } ?>
Related
I am working on a website that has a section below the blog post that shows a marked featured post, the issue I am having is that on the featured page the card section is showing the 1st post on the post list instead of its own featured post.
This is setup in a component-card.php
<?php
$post_id = (get_query_var('post_id')) ? get_query_var('post_id') : $post->ID;
$type = get_query_var('type');
$pages = get_query_var('pages');
$col = get_query_var('col');
$image = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'single-post-thumbnail');
$show_featured = get_field("featured_story", $post_id);
$link = get_the_permalink($post_id);
$title = get_the_title($post_id);
$excerpt = get_the_excerpt($post_id);
$count = 6;
$switch = '';
if ($col === '12') {
$count = 12;
$switch = 'switch';
}
?>
<?php if ($type !== 'page'): ?>
<?php if ($show_featured): ?>
<article class="component-article-cards featured">
<div class="row align-middle align-center">
<div class="col-12 col-md-<?php echo $count ?> <?php echo $switch ?>">
<div class="article-inner">
<h3><?php echo $title; ?></h3>
<hr />
<?php echo $excerpt; ?>
Read full article
</div>
</div>
<div class="col-12 col-md-<?php echo $count ?>">
<?php if ($image) : ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
</div>
</div>
</article>
<?php else: ?>
<article class="component-article-cards">
<?php if ($image) : ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<div class="article-inner">
<h3><?php echo $title; ?></h3>
<hr />
<?php echo $excerpt; ?>
Read full article
</div>
</article>
<?php endif; ?>
<?php endif; ?>
Any help would be gratefully appreciated
I have created a custom Gutenberg block that is basically a link. When I click the block in the editor I immediately get sent to the page the block links to instead of being able to edit the block. How do I stop this from happening? I've already tried putting pointer-events: none as a style on it but that doesn't do anything surprisingly.
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
</a>
Since this may help others in the future, wrap your <a> tag in an if statement to check if your in the admin area. If you are, then it won't output those tags.
<?php if ( ! is_admin() ) : ?>
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<?php endif; ?>
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
<?php if ( ! is_admin() ) : ?>
</a>
<?php endif; ?>
I am trying to add a grid of blog posts to my homepage template. I have pulled in the content from 4 blog posts, now I just need to pull in the featured image as a background for each div.
Here is my current, half finished code, the background inline style isnt actually working right now, and I can't figure out why.
<?php /* Template Name: Home Content Template*/ ?>
<?php get_header(); ?>
<div class="row show-grid lrds-hm-grd-wrppr">
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id1, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id1 = 172;
$queried_post = get_post($post_id1);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id2, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id2 = 174;
$queried_post = get_post($post_id2);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span3 lrds-hm-grd-bx lrds-hm-grd-bx-3" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id3, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id3 = 176;
$queried_post = get_post($post_id3);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
<div class="span4 lrds-hm-grd-bx lrds-hm-grd-bx-4" data-original-title="" title="" style="background url (<?php echo get_the_post_thumbnail_url($post_id4, 'full'); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<?php
$post_id4 = 210;
$queried_post = get_post($post_id4);
?>
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_title('<h2>','</h2>'); ?>
<?php the_content(); ?>
</div>
<?php
// tags anyone?
the_tags();
?>
<?php endwhile; ?>
<?php if (!is_singular()) : ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-info">
<strong>No content in this loop</strong>
</div>
<?php endif; ?>
</div>
<div class="col-md-2">
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : // Sidebar name
?>
<?php
endif;
?>
</div>
</div>
<?php get_footer(); ?>
yes just pass it like this in all your
background url (<?php echo wp_get_attachment_url (get_post_thumbnail_id( $post_id($post_id)); ?>)
Here is an example of a working file with the background image being pulled in from the featured image of the same page, not a separate blog post (which is what I am currently trying to do on a different template)
'code'
<?php $title = trim(get_field("custom_headline"));
// check for custom title different from page name
if ($title == "") {
$title = Trim(get_the_title());
}
?>
<h2><?php echo $title; ?></h2>
<?php
global $related_du;
$rel = $related_du->show( get_the_ID(), true );
$boxTitle = array();
$boxContent = array();
$i = 0;
// Display the title of each related post
if( is_array( $rel ) && count( $rel ) > 0 ) {
foreach ( $rel as $r ) {
if ( is_object( $r ) ) {
if ($r->post_status != 'trash') {
//echo get_the_title( $r->ID ) . '<br />';
//echo get_post($post = $r->ID ) . '<br />';
$displayString = "";
$content_post = get_post($r->ID);
$boxTitle[$i] = $content_post->post_title;
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$boxContent[$i] = $content;
$i++;
}
}
}
}
?>
<div class="hero2box" style="background:URL(<?php the_post_thumbnail_url( 'full' ); ?>) center center; background-size: cover; background-repeat: no-repeat;">
<div class="col-sm-1"></div>
<div class="col-sm-5 tanLeft">
<h4><?php echo $boxTitle[0] ; ?></h4>
<hr class="red">
<?php echo $boxContent[0] ; ?>
</div>
<div class="col-sm-5 tanRight">
<h4><?php echo $boxTitle[1] ; ?></h4>
<hr class="red">
<?php echo $boxContent[1] ; ?>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<?php while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
<?php //echo get_post_type(); ?>
</div>
<?php
// tags anyone?
the_tags();
?>
<?php endwhile; ?>
<?php if (!is_singular()) : ?>
<div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
<div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
<?php endif; ?>
<?php else : ?>
<div class="alert alert-info">
<strong>No content in this loop</strong>
</div>
<?php endif; ?>
</div>
<div class="col-md-2">
<?php
if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : // Sidebar name
?>
<?php
endif;
?>
</div>
<?php
global $related;
$rel = $related->show( get_the_ID(), true );
// Display the title of each related post
if( is_array( $rel ) && count( $rel ) > 0 ) {
foreach ( $rel as $r ) {
if ( is_object( $r ) ) {
if ($r->post_status != 'trash') {
//echo get_the_title( $r->ID ) . '<br />';
//echo get_post($post = $r->ID ) . '<br />';
$displayString = "";
$content_post = get_post($r->ID);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$displayString = $displayString . $content . "";
echo $displayString;
}
}
}
}
?>
'code'
Ok Solved! I had to be more simple, cuz I'm dumb sometimes. :P
<?php
$post_id1 = 172;
$queried_post = get_post($post_id1);
?>
<div class="row show-grid lrds-hm-grd-wrppr">
<div class="span2 lrds-hm-grd-bx lrds-hm-grd-bx-2" style="background:url(<?php echo wp_get_attachment_url(get_post_thumbnail_id( $post_id1)); ?>) ">
<h2><?php echo $queried_post->post_title; ?></h2>
<?php echo $queried_post->post_content; ?>
</div>
For a recently developed wordpress website http://stc.co.in, I'm using Huge-IT portfolio to show the projects in each sectors. On clicking on projects a popup is showing with multiple images. Now I want to show image caption or title above the big image which was added while uploading image through WordPress. Please guide how to achieve this.
Thanks in advance.
Regards, Sanjay
If the plugin cant let you do it simply with text editor, in wordpress you need to search the specific section you want and work on php file.
When you have founded it you can put an html section with your title.
you need to made changes in plugin file..
follow path :
wordpress-sitename/wp-content/plugins/portfolio-gallery/Front_end/portfolio_front_end_view.php
modify line :
<ul id="huge_it_portfolio_popup_list_<?php echo $portfolioID; ?>">
<?php
foreach($images as $key=>$row)
{
$imgurl=explode(";",$row->image_url);
array_pop($imgurl);
$link = $row->sl_url;
$descnohtml=strip_tags($row->description);
$result = substr($descnohtml, 0, 50);
?>
<li class="pupup-element" id="huge_it_portfolio_pupup_element_<?php echo $row->id; ?>">
<div class="heading-navigation_<?php echo $portfolioID; ?>">
<div style="clear:both;"></div>
</div>
<div class="popup-wrapper_<?php echo $portfolioID; ?>">
<div class="image-block_<?php echo $portfolioID; ?>">
<?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
<?php if($row->image_url != ';'){ ?>
<img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="<?php echo $imgurl[0]; ?>" />
<?php
global $wpdb;
$cimg_url = $imgurl[0];
$attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');
$attachment_title = get_the_title($attachment[0]['ID']);
?>
<div class="cls_img_ttl" id="main_img_ttl"><?php echo $attachment_title; ?></div>
<?php } else { ?>
<img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="images/noimage.jpg" />
<?php
} ?>
</div>
<div class="right-block">
<?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
<?php if($paramssld["ht_view2_thumbs_position"]=='before' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
<div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
<?php
global $wpdb;
foreach($imgurl as $key=>$img){
$cimg_url = $img;
$attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');
$attachment_title = get_the_title($attachment[0]['ID']);
?>
<li><a href="<?php echo $row->sl_url; ?>" class="group1" data-ttl="<?php echo $attachment_title; ?>" >
<img src="<?php echo $img; ?>">
</a></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php if($paramssld["ht_view2_show_description"]=='on'){?><div class="description"><?php echo $row->description; ?></div><?php } ?>
<?php if($paramssld["ht_view2_thumbs_position"]=='after' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
<div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
<?php $imgurl=explode(";",$row->image_url);array_pop($imgurl);
foreach($imgurl as $key=>$img){?>
<li><img src="<?php echo $img; ?>"></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php if($paramssld["ht_view2_show_popup_linkbutton"]=='on'){?>
<div class="button-block">
<a href="<?php echo $link; ?>" <?php if ($row->link_target=="on"){echo 'target="_blank"';}?>><?php echo $paramssld["ht_view2_popup_linkbutton_text"]; ?></a>
</div>
<?php } ?>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</li>
<?php
}?>
</ul>
JS:
jQuery('#huge_it_portfolio_popup_list_<?php echo $portfolioID; ?> .popup-wrapper_<?php echo $portfolioID; ?> .right-block ul.thumbs-list_<?php echo $portfolioID; ?> li a').click(function(){
var width=jQuery(window).width();
if(width<=767){
jQuery('body').scrollTop(0);
}
jQuery(this).parent().parent().find('li.active').removeClass('active');
jQuery(this).parent().addClass('active');
var main_img_ttl = jQuery(this).attr('data-ttl');
alert(main_img_ttl);
jQuery(this).parents('.right-block').prev().find('.cls_img_ttl').html(main_img_ttl);
jQuery(this).parents('.right-block').prev().find('img').attr('src',jQuery(this).find('img').attr('src'));
return false;
});
you can download file here : LINK
I'm trying to output custom image size in my code:
<?php if(get_field('repeater-field-name')) { ?>
<?php foreach (get_field('repeater-field-name') as $row) :?>
<div class="item" onclick="location.href='<?php print $row['link'] ?>';" style="cursor: pointer;">
<div class="sisseviskaja-title"><h2><?php print $row['title'] ?></h2></div>
<div class="sisseviskaja-pilt"><img src="<?php print $row['image'] ?>" alt="" /></div>
</div>
<?php endforeach; ?>
<?php } ?>
I have tried ACF tutorial codes but i'd like to keep foreach loop that i have. I'm no PHP guru so i havent got any good ideas to implement it.
Can someone, please, help me?
Here's the way to do with ACF codes. This is using array for the image (which you need to do if you want to pull out the dimensions). I'm not sure exactly if it can be done the way you want to do it.
<?php if (have_rows('project_listings')){ ?>
<?php while (have_rows('project_listings')){ the_row();
$link = get_sub_field('link_field');
$title = get_sub_field('title_field');
$image = get_sub_field('image');
//additional vars
$size = 'full';
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
?>
<div class="item" onclick="location.href='<?php echo $link ?>';" style="cursor: pointer;">
<div class="sisseviskaja-title">
<h2><?php echo $title ?></h2>
</div>
<div class="sisseviskaja-pilt">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>"/>
</div>
</div>
<?php }; ?>
<?php }; ?>
I do it like this:
<?php if( have_rows('field-name') ): ?>
<?php while( have_rows('field-name') ): the_row(); ?>
<?php
$image = get_sub_field('picture');
$size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
?>
<?php endwhile; ?>
<?php endif; ?>