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 } ?>
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>
I am new to wordpress. i am facing problem to understand codes written in twenty fourteen theme in wordpress . In staring of body of header.php there is some piece of code which i am not able to understand, like what they do
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
<?php endif; ?>
please someone help me to understand what this piece of code do
<?php if ( get_header_image() ) : ?>
It is for if you set a Banner Image for you theme you can change by Customize theme and change or remove as shown in Image below through Admin Panel go to Appearance > customize then it will lead you to the page of customization as shown in Image there you will find Header Image.
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
so Here in this code If the header Image found it will set in the <img> automatically it's alt will be set as site NAME and height or width will be set as theme defauld CSS. and the <a> before <img> is for leading link for HOME PAGE.
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
This is my link.php script for show latest title and tumbnail from my wordpress site. Title working fine thumbnail not work. it only show mysite/wp-includes/images/media/default.png, But my content have uloaded image. How can i get thumbnail image
<?php
require('../../wp-blog-header.php');
?>
<?php
$posts = get_posts('numberposts=10&order=ASC&orderby=post_title');
foreach ($posts as $post) : setup_postdata( $post ); ?>
<?php get_the_ID(); echo "<br />"; ?>
<?php the_title(); ?> <?php echo "<br />"; ?>
<?php
$imgId = get_post_thumbnail_id($post->ID);
$imgUrl = wp_get_attachment_image_src($imgId,'thumbnail', true);
?>
<img src="<?php echo $imgUrl[0]; ?>" />
<?php
endforeach;
?>
In wordpress use the inbuilt function for including files so:
<?php get_header(); ?> - Providing header.php exists it will bring it in.
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 2600,1000 ), false, '' );?>
<div class="front-page-post-img" style="background: url(<?php echo $src[0]; ?> ); background-size: cover; background-repeat:no-repeat;"></div>
<?php if(is_single()): ?>
<?php the_content(); ?>
<?php comments_template(); ?>
<?php else: ?>
<?php echo substr(get_the_excerpt(), 0,45); ?>
<a class="post-link" href="<?php the_permalink(); ?>">more...</a>
<?php endif; ?>