my functions file
<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'custom-size', 600, 110 );
like this
index file a mean loop
<div class="konu-resim"><a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>"><img src="<?php
if ( has_post_thumbnail() )
the_post_thumbnail();
else
echo '<img src="' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/deneme.jpg' . '" alt="" />';
?>
i try this one but doesnt work
i want default thumbnail with post url
Use like this
1) add following code in your functions.php file
<?php
add_filter( 'post_thumbnail_html', 'my_post_thumbnail_html' );
function my_post_thumbnail_html( $html ) {
if ( empty( $html ) )
$html = '<img src="' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/default-thumbnail.jpg' . '" alt="" />';
return $html;
}
?>
2) display like (if future image not set in back end then it'll display default image )
<?php
if ( has_post_thumbnail() )
the_post_thumbnail();
else
echo '<img src="' . trailingslashit( get_stylesheet_directory_uri() ) . 'images/default-thumbnail.jpg' . '" alt="" />';
?>
Try this:
if ( has_post_thumbnail() ){
the_post_thumbnail();
} else {
echo '<img src="'.get_stylesheet_directory_uri().'/images/deneme.jpg" alt="" />';
}
Try this please
<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'custom-size', 600, 110 );`
like this
index file a mean loop
<div class="konu-resim"><a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>"><?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>images/deneme.jpg" alt="<?php the_title(); ?>" /></a></div>
To Reffer :enter link description here
Related
I'm pretty new about coding, and i'm trying to build a Wordpress custom theme.
I'm stacked on the logo section and I really can't understand what i'm doing wrong:
<?php if ( get_theme_mod('apc_logo_image', '') != '' ): ?>
<img class="animate" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="logo sito">
<?php elseif ( is_front_page() && is_home() ) : ?>
<img class="animate" src="<?php echo get_theme_mod( 'apc_logo_image', '' ); ?>" alt="<?php echo get_theme_mod( 'apc_logo_alt_text', '' ); ?>">
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
I would like to do the follow:
If I upload an images from Customizer, than it would be visible as logo.
If don't and i have a logo in a specific path like: /assets/logo ecc... than it should be visible like logo.
if don't, then I would like to see the name of the website as it should be.
So working code:
<?php
$logoFile = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/' . wp_get_theme()->get('TextDomain') . '/assets/images/logo/logo.png';
if ( (bool)get_theme_mod('apc_logo_image')) : ?>
<img class="animate" src="<?php echo get_theme_mod( 'apc_logo_image'); ?>" alt="<?php echo get_theme_mod( 'apc_logo_alt_text'); ?>">
<?php else : ?>
<?php if ( file_exists($logoFile) ) : ?>
<img class="animate" src="<?php echo '/wp-content/themes/' . wp_get_theme()->get('TextDomain') . '/assets/images/logo/logo.png'?>" alt="logo sito">
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php endif; ?>
<?php endif ?>
I'm trying to get behind this for a while now but it does not seem to work whatever I try.
Basically I have a Fancybox, that is working and I have placed an img with ACF with scrset value but I can't combine both because Fancybox is looking for the pure img value in Wordpress, while I need the img-id for the scrset value.
This is what I got so far working for me.
Fancybox:
<div class="img01">
<a data-fancybox="Gallery" class ="lightbox" href="img01.jpg" data-caption="text">
<?php $image = get_field('img01');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>"
alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</a></div>`
(function($){$(document).ready(function(){
$('.lightbox').fancybox();});})(jQuery)
ACF Img with scrset value
<div class="img01">
<a data-fancybox="Gallery"
class ="lightbox" href="img01"
data-fancybox
data-caption="<?php echo $img_alt_text ?>">
<?php $img = get_field('image_01');
$img_src = wp_get_attachment_image_src( $img, '80vw' );
$img_srcset = wp_get_attachment_image_srcset( $img, '80vw' );
$img_alt_text = get_post_meta( $img, '_wp_attachment_image_alt', true);
?>
<?php if( $img_src ){ ?>
<img class="img01"
src="<?php echo esc_url( $img_src[0] ); ?>"
title="<?php the_title(); ?> - <?php echo $job ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, (min-width: 1200px) 50vw, 1600px"
alt="<?php echo $img_alt_text ?>"
/>
I would love to combine those so i can add an image to acf that behaves responsive but also opens in fancybox on click. But there is probably also an easier way to do this i suppose.
Honestly have no idea what im doing with that and hoping for help. Im happy to provide more input. Thank you.
New approach:
This function should in theory do the job but I still cant figure it out
// retrieves the attachment ID from the file URL
function pippin_get_image_id($image_url) {
global $wpdb;
$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
return $attachment[0];
}
What am I missing/doing wrong?
<a data-fancybox="Gallery"
class ="lightbox"
href="<?php $image = get_field('img01');
echo $image['url'];?>"
data-caption="<?php echo $image['alt']; ?>">
<?php
$image = get_field('img01');
$image_url = get_field('img01');
$image_id = pippin_get_image_id($image_url);
$img_src = wp_get_attachment_image_src( $image_id, '80vw' );
$img_srcset = wp_get_attachment_image_srcset( $image_id, array( 100, 100 ) );
if( !empty($image) ): ?>
<img class=""
src="<?php echo esc_url( $img_src[0] ); ?>"
srcset="<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, (min-width: 1200px) 50vw, 1600px"
alt="<?php echo $img_alt_text ?>"
/>
<?php endif; ?>
</a>
Header.php
<div class="site-branding">
<div class="container">
<?php
***if ( is_page('/category/fitness/') ) ?>{
<img src="<?php bloginfo('template_url'); ?> /assets/images/fitnesslogo.jpg"
width="100" height="100"/>
}***
<?php
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url(
home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url(
'/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /*
WPCS: xss ok. */ ?></p>
<?php
endif; ?>
<?php do_action('boston_after_site_description'); ?>
</div>
</div><!-- .site-branding -->
The page slug is /category/fitness as the URL on the end of the page suggests when I go to the page it looks like it's not interpreting the img src, but is displaying '{}' tags that are around the img scr instead
You have:
***if ( is_page('/category/fitness/') ) ?>{
<img src="<?php bloginfo('template_url'); ?> /assets/images/fitnesslogo.jpg"
width="100" height="100"/>
}***
But it should be
if ( is_page('/category/fitness/') ) {
echo '<img src="'.bloginfo('template_url').'/assets/images/fitnesslogo.jpg" width="100" height="100"/>';
}
I'm not familiar with the Boston theme, but it looks like it's checking to see if a custom logo has been added and if so to use it. So, I would think the following would give you what you're looking for.
<?php if ( is_page('/category/fitness/') ) : ?>
<img src="<?php bloginfo('template_url'); ?>/assets/images/fitnesslogo.jpg" width="100" height="100"/>
<?php else : ?>
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
How to dynamic image URL in a WordPress plugin?
This is how you get the featured image's URL:
<?php if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" />
<?php } ?>
So I am running in to an issue where I have a page in Wordpress querying a custom post type. It pull in the name and featured image. When you click the featured image it opens a popup with the content and some other info. Here is the link: http://pegasusemergencygrp.com.s164407.gridserver.com/who-we-are/meet-our-team/
This is the call in my page.php file:
<?php
query_posts(array('post_type' => 'doctors'));
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>
<aside class="doctor">
<span class="photo">
<?php the_post_thumbnail('full', array('data-rel' => "#$post->ID")); ?>
</span>
<ul>
<li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li>
<li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li>
<li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li>
<li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li>
</ul>
<p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p>
<article class="simple_overlay" id="<?php the_id(); ?>">
<?php the_post_thumbnail('full'); ?>
<ul>
<li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li>
<li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li>
<li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li>
<li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li>
</ul>
<p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p>
<div class="clear"></div>
<hr>
<p><?php the_content(); ?></p>
</article><!--end of .simple_overlay-->
</aside><!--end of .doctor-->
<?php endwhile; endif; wp_reset_query(); ?>
Here is my JS:
jQuery(document).ready(function() {
var imgatt = jQuery("span.photo a img").attr('data-rel');
jQuery("span.photo a img").overlay({
target: imgatt,
}); });
The script is semi working, when I click on the picture it pops open the info but if I click on the 2nd picture it pops open the first items info as well. They are both generating unique ID's on the data-rel tag with the post id and the overlay article class has the matching ID.
Source: http://jquerytools.org/demos/overlay/index.html
Solved the issue. Anyone who may stumble on this it appears jQuery Tools overlay has a hard time with the data-rel attribute on the featured image. Instead I re-configured the jQuery to find the rel tag on the anchor before the featured image and call the post id on the rel tag.
WP Code:
<a rel="#<?php the_id(); ?>" href="#<?php the_id(); ?>" class="bio"><?php the_post_thumbnail('full'); ?></a>
jQuery:
// Team Bios Overlay
jQuery(document).ready(function() {
jQuery('a.bio[rel]').overlay({
mask: '#000',
effect: 'apple'
});
});
Hope this helps someone else with a similar scenario