Alright so I looked through here and tried to find a solution to this, and I found some php that came up twice as an answer, but it isn't working for me, so here's the problem.
I have a custom wordpress theme. Under the navbar, I want to put a dynamic image based on that page's featured image. The image needs to be responsive and spread across the width of the page, much like you'd imagine a responsive header image to function. I can handle the responsive css bit and put the image in a div when I get to pulling it, but the image isn't even pulling.
Here's the code that came up twice as an answer on Stack Overflow:
<img src="<?php $img=wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); echo $img[0]; ?>" alt="<?php the_title(); ?>"/>
It isn't working. The php string is not pulling the thumbnail url and the only output in the console is the alt information wrapped in an img tag. I don't know if it has to do with the code being in the header.php, but any advice would be great.
Use this to show post thumbnails within the loop. You can also pass an elseif statement to show nothing if no image is uploaded or show a placeholder image. Hope that helps!
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('PLACE-CUSTOM-SIZE-HERE-OR-OMIT-TO-USE-ORIGINAL-SIZE'); ?>
<?php endif; ?>
<?php
if ( has_post_thumbnail()) {
$featureImage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'feature' );
$featureImage = $featureImage[0];
?>
<div id="feature" style="background-image: url('<?php echo $featureImage; ?>')">
<? } else { ?>
<div id="feature">
<? } ?>
This is how I have accomplished this in the past.
I'm just going to leave this here in case this is causing your issue.
From the doc page: get_post_thumbnail_id()
Note: To enable featured images, see post thumbnails, the current
theme must include add_theme_support( 'post-thumbnails' );
Related
I am converting Html Template to WordPress, I have done 90% of the work.
In my Template, I have some <a> which are href to the images path as
<a href="img/elements/g7.jpg" class="img-pop-up">
Now i want to link this path in wordpress using any funtion,like i have done for img tag as
<img src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="">
May you help me,how can i give the path to image using <a>tag.
There are several ways to get an image in Wordpress.
1) If you image is the thumbnail image of the page or post, you can simply use echo of get_the_post_thumbnail_url().
<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
2) If your image is in the media library, you can use the function wp_get_attachment_image( $attachment_id, $size, $icon, $attr );. You must know the image ID.
<?php echo wp_get_attachment_image(300, array('800', '600'), "", array("class" => "image")); ?>
300 is the ID of the image in the library (you can discover it looking at the number in the url when opening the image there).
800 and 600 is the size.
An attribute was added: class="image".
By default, it will output this:
<img width="700" height="466" src="example.com/wp-content/uploads/2020/02/image.png" class="image attachment-700x600 size-700x600" alt="" srcset="example.com/wp-content/uploads/2020/02/image.png 800w, example.com/wp-content/uploads/2020/02/image-png-1-300x200.png 300w" sizes="(max-width: 700px) 100vw, 700px">
3) If you want the image from media library as well, but just the url, you can use wp_get_attachment_image_url( $attachment_id ) function. Like this:
<?php echo wp_get_attachment_image_url(1286); ?>
4) If you image is in a custom field, created using the Advanced Custom Fields plugin, for example. Then, you call the_field using like this:
<?php the_field('image_field_name'); ?>
5) If the image is not in the media library, but in the theme folder, you can use the get_stylesheet_directory() to find the theme folder and render the image. For example, if the image is inside the theme folder, inside another folder called img.
<?php echo get_stylesheet_directory().'/img/image.png'; ?>
I'm doing a test for a job and I already have a folder with some images and a HTML & CSS already done. They just want me to put this in Wordpress.
How can I display this images that I have into the HTML or functions?
Ex:
<div class="container container-nav w-container"><img src="images/Logo_Trust_White.png" alt="">
This is what i have in my HTML file. Can I use "wp_get_attachment_image('imagename');"?
Thank you already!
If you want to display the image file located within your theme directory, just specify the location with the img tag, and style it with CSS.
<img src="<?php echo get_template_directory_uri() . '/images/Logo_Trust_White.png'; ?>" />
Reference : https://developer.wordpress.org/themes/functionality/media/images/
The function wp_get_attachment_image only gets an image that was uploaded to wordpress, it doesn't output an image in the content of the post.
You have to output the content of the post for your example image.
Like: echo $attachments['post_content'];
you're passing in the post id (54 in your example; typically $post->ID in WP parlance) to wp_get_attachment_image(). As can be seen in the codex, you're supposed to use the attachment id (see $attachment_id below):
wp_get_attachment_image( $attachment_id, $size, $icon );
In other words, you've got to do something like this:
$image_attr = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');
In general I would avoid using theme specific images in the content,
because when you change and delete the old theme, then they are gone.
So I would consider using /wp-content/uploads/ for content images.
What is a Custom Logo?
Using a custom logo allows site owners to upload an image for their website, which can be placed at the top of their website. It can be uploaded from Appearance > Header, in your admin panel. The custom logo support should be added first to your theme using add_theme_support(), and then be called in your theme using the_custom_logo(). A custom logo is optional, but theme authors should use this function if they include a logo to their theme.
https://developer.wordpress.org/themes/functionality/custom-logo/
Replace your img tag with
<img src="<?php echo get_template_directory_uri(); ?>/images/Logo_Trust_White.png" alt="">
Place your images folder in the wp-content folder
Using get_template_directory_uri() to link a static image with its correct path in html :
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="" height="" alt="" />
Place you images in your active theme. Path will be wp-content/themes/{theme-name}.
The website is http://www.mercuriusresearch.co.uk which runs on Wordpress and based on Bootstrap.
The error shows when you resize the screen below 768px, all the post title links stop working. The actual HTML is still showing the href but the post titles just behave like normal text.
The error is displaying across the website (i.e. on all post title links) but only on those sections of the page that are taking links from Wordpress. For example, the sidebar links on my homepage work on all screen sizes.
I haven't had this problem before. My suspicion, based on the previous paragraph, is that it relates to Wordpress somehow...but I am using the same code that I always use to bring in the titles from Wordpress. So that, and the fact that the error appears to relate to the size of the screen, leads me to think that Bootstrap is somehow related too.
Any help would be much appreciated.
The only code that isn't on the website is this, which is the Wordpress loop:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-date">
<?php k99_relative_time(); ?>
</div>
<div class="post-title">
<?php the_title( sprintf( '<h3 class="entry-title">', esc_url( get_permalink() ) ), '</h3>' ); ?>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
<div class="read-more">
Read more →
</div>
</article>
As I say though, this is working on larger screen sizes and if there was something wrong with this section, it obviously would occur on all screen sizes. All the other code is there on the website (obviously, I am not sure what part exactly is relevant, or I wouldn't I have this problem).
For a quick solution, you can write CSS using media query for devices below 768px and your links will work fine.
#latest-news-front,
#stock-ideas-front {
position: relative;
z-index: 10;
}
There is a div that covers all of the other divs you use.
If you look in your element inspector you can see the div.
You can float the sidebar-front div, but there is a change that other divs will behave different.
aside#sidebar-front {
float: left;
}
or clear every div by using the following code at the end of each one.
clear: both;
i am trying to have different header background images depending on which inner page is accessed. Right now i have the same picture for all inner pages and need the php code changed so its conditional. Like if im on contact page, 1.jpg to be set as header img. If on services page, 2.jpg to be set as header img etc, you get the idea.
Here is the php code ive found in this wp theme im trying to improve for a friend:
<div class="bgtop">
<?php
//display featured image if one exists
$featimage = get_bloginfo('stylesheet_directory') . "/images/pageheader.png";
if ((has_post_thumbnail( $post->ID ))&&(!is_single()&&(!is_category())) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
$featimage = $image[0];
}
?>
<div class="pageheader" style="background: url(<?php echo $featimage; ?> ); background-position: center top;">
<div class="centermenu">
<div class="pagelogo">
<!--<a href="<?php bloginfo('home'); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/indexlogo.png" alt="logo" />
</a>-->
</div>
Well.. It's more of a structure thing. How are you determining which page they are on? Does the user click a link? Use the information available to the server to decide what content to serve. If you're using one script to serve all your pages, then you'll need to pass it a parameter when the user clicks a link. You can do this by making your links take parameters.
Markup like so:
<a href='default.php?page=home'> Navigate To Home </a>
<a href='default.php?page=blog'> Navigate To Blog </a>
php like so:
if($_POST['page'] == "home")
echo $homeheader;
elseif($_POST['page'] == "blog")
echo $blogheader;
But, usually you just make multiple php pages that include some common elements (called templating). That helps keep things cleaner than making one php script that serves up your whole site.
If you're wanting the manage this in the back-end of WordPress: You can use the Advanced Custom Fields Plugin for WordPress (http://wordpress.org/plugins/advanced-custom-fields/). Through it, you can add a field on every page an even every post that allows you to enter in a background image.
Then, in your header.php template file, add the shortcode somewhere in your body tag:
<body background="(<?php the_field('background_image')" ?>)">
Depending on what page you're on, it will show that background image.
If You'd like the process automated: You can create a folder called "bg" and have an image with the same name as your page. For example, for about.php you can have about.jpg.
Then write a script that takes the page name, and then sets the background image to that name. You would place this in the header.php file in your template Something like:
$page = end(explode("/",$_SERVER['REQUEST_URI']));
$image = str_replace("php","jpg",$page);
Then use:
<body background="bg/<?php print $image ?>">
This is assuming that you are keeping your image files in http://www.yoursite.com/bg/ But you can also use shortcodes to keep these images within your theme with <?php echo get_template_directory_uri(); ?>
I'm having trouble trying to figure out how to code this, I've researched like crazy (an hour and a half), and I finally decided to sign up for Stack Overflow to see if anyone can help, soo....
In my wordpress theme, I have a section for banners (images that are attached to posts). This is what I currently have:
<?php
$headline = new WP_Query();
$headline->query('posts_per_page=2&tag=review&orderby=date');
?>
<div id="headline">
<?php if(get_post_meta($post->ID, "image_value", $single = true) != "") : ?>
<img src="<?php echo get_post_meta($post->ID, "image_value", $single = true); ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
</div>
The problem is that the width of the content area is 960px, and the banners I upload are sizes (width): 728px, 960px, and 232px. So does anyone know some PHP code that would find the width of the banners of the two posts, see if they would fit, and if they dont, just use one banner (either the 728px or the 960px), and then if the 728px is used also add the 232px image to the div so it fills in nicely?
And the selection of the images used by the code is kind of supposed to be random, I can handle that though.
Any help?
You must get the width through eg. GD. Then bother with some ifs.
Hint: getimagesize();