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}.
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 creating a new WordPress Theme and I want a media folder to contain some images that are not considered to be posts.
e.g. themes/theme-name/media/sampleIMG.jpg
adding
<img src="media/sampleIMG.jpg">
in my theme folders index.php leads to an 404 error code output because apparently my local apache server is requesting that file from a different directory:
/html/media/sampleIMG.jpg
What am I doing wrong?
<img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/logo.svg" alt="" class="svg logo">
Using get_template_directory_uri() to link a static image with its correct path in html :
<img src="<?php echo get_template_directory_uri(); ?>/media/sampleIMG.jpg" alt="theme logo" />
Note: get_template_directory_uri() return absolute path to the
directory of the current theme.
I'm building my first WP theme. My images are linked this way:
<img src="<?php bloginfo('wp-content/themes/SRPrint'); ?>images/freephone.png" />
Obviously theme folder called SRPrint and inside it there is an images folder.
Can't understand why images do not show up? I don't know any php so I asume problem is in php code? Images specified through style.css show up ok.
Please help.
Link to test site http://www.designstest.co.uk/
you must use <?php bloginfo('template_directory'); ?>/images/freephone.png to get the images in the current theme.
See: bloginfo
<img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" alt="<?php bloginfo('name'); ?>">
Change all image to src="
<?php echo get_template_directory_uri();?>
/images/picname.jpg"
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've installed some theme, which has header logo defined in header.phtml like this:
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
I don't really want to alter this template, also in that .phtml file it says not to edit it. How can I override this getLogoSrc most efficiently?
In the web admin, go to System>Configuration>Design and scroll down to Header>Logo Image Src. Insert the filename that you have saved in /skin/frontend/default/new_theme/images/ and click Save.
Go to your template's images folder e.g.: /skin/frontend/default/new_theme/images/
and replace the logo image in that folder with your new Logo