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(); ?>
Related
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}.
I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
I am linking a wordpress post by using the below code.
<a href="<?php echo get_permalink( 15 ); ?>"
Which renders as below
http://mydomainname.com/?p=15
But when the users click, it should open up on a specific location, so I have used a tag with the attribute name to show that area directly.
Below is my HTML code.
<a name="fi"></a>
So the rendered URL would be like the below.
http://mydomainname.com/?p=15#fi
When I manually type like the below, it opens up perfectly on the location that I want it to open, but I do not know how to make changes to <a href="<?php echo get_permalink( 15 ); ?>" to achieve what I am looking for.
Adding #fi after the php code will achieve this:
Some link
that will print out to http://mydomainname.com/?p=15#fi
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' );
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();