So I attempted to look for a solution:
custom wordpress theme: layout images not displaying
It did not work for me.
My directory for my theme is
wp-content/themes/fearnothing/
and consist of these files
/css(folder)
/js (folder)
/images (folder)
header.php
index.php
function.php
footer.php
style.css
hrtbrk.gif
hrtbrk.png
css folder contains
fearnothing.css
js folder is empty
fearnothing.js
My header.php has the following code:
<!DOCTYPE html>
<html>
<head>
<title>example title</title>
<?php wp_head(); ?>
</head>
<body>
<img class ="nightsky" src="wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
functions.php
<?php
function fearnothing_script_enqueue(){
wp_enqueue_style('customstyle', get_template_directory_uri().'/css/fearnothing.css',array(), '1.1.2', 'all');
}
add_action('wp_enqueue_scripts', 'fearnothing_script_enqueue');
fearnothing.css
html,body{
background: black;
color: #8c0707;
font-family: Courier,Courier New,Lucida Sans Typewriter,Lucida Typewriter,monospace;
font-size: 10px;
cursor: pointer;
}
.nightsky{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
}
I'm trying to add the gif but it did not work. so I tried an image instead. I tested my code offline with html and it works fine?
EDIT
I added a images folder to my theme where the theme would be located.
add Home URL above wp-content
<img class ="nightsky" src="<?php echo home_url(); ?>/wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
Try this below options.
<img class ="nightsky" src="<?php echo site_url(); ?>/wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
OR
<img class ="nightsky" src="<?php echo home_url(); ?>/wp-content/themes/fearnothing/hrtbrk.png" alt ="3">
Try using get_stylesheet_directory_uri() function
<img class="nightsky" src="<?php echo get_stylesheet_directory_uri()?>/hrtbrk.png" alt="">
Reference link
Try using get_template_directory() function
<img class="nightsky" src="<?php echo get_stylesheet_directory_uri()?>/hrtbrk.png" alt="">
So I figured out a method that works which is not really how I wanted it to work.
I needed to upload the image directly through wordpress media.
Which is stored in /wp-content/uploads
I wanted the images to be inside the themes folder wp-content/themes/fearnothing/images
but for some odd reason the files are being corrupted. (hence the broken image file)
After uploading directly to the uploads folder I was able to use the tag I had originally.
<img class ="nightsky" src="https://mywesbiteurl.com/wp-content/uploads/2018/12/hrtbrk.png" alt="" >
Related
Tried to add default-image tag in functions.php but it's not working. It's only work when i upload img from wp dashboard but default img is not working
functions.php
<?php
add_theme_support('title-tag');
add_theme_support('custom-header', array(
'default-image' => get_stylesheet_directory_uri() . '/images/logo.jpg',
));
?>
CSS
#logo{
width: 890px;
position: relative;
height: 200px;
}
HTML
<div id="logo" style="background: url(<?php header_image(); ?>) no-repeat;">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
After some digging I found that adding default image path in child theme is quite different.
Keep path like this and it will work.
add_theme_support('custom-header', array(
'default-image' => '%2$s/images/logo.jpg',
));
In parent theme %s should be used while in child theme %2$s should be used.
See examples in this page. https://codex.wordpress.org/Function_Reference/register_default_headers
Did you add the background-image in css file?
Remove the code from functions.php
Make the html code as
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
Add the style
#logo {
width: 890px;
position: relative;
height: 200px;
background-image:url('../images/logo.jpg');
}
Is there a way of using a php variable to manipulate css?
I'd like to add an image chosen by a user in a wordpress post (featured image) to the background of a specific div. I know how to mix php and html but, is there a way of doing the same with css?
I'm getting the image with:
$img = get_the_post_thumbnail_url($post_id, 'mySize');
Well, you already know how to mix PHP and HTML, right? Then you just do the same, but creating a <style> element in <head>. You put your CSS in this element. Something like this:
<head>
<style>
div#myDivId { background-image: url("<%= $img %>"); }
</style>
</head>
What you could do is something like this:
<head>
<style>
.user img { background-position: center center; background-repeat: no-repeat; background-size: cover; }
</style>
</head>
...
<div class="user">
<img src="images/trans.png" width="50" height="50" style="background-image:url(<?php echo $img; ?>);" />
</div>
Where trans.png is a small transparent png image.
I'd like to set a random background-image into a <div>Container</div>
To keep it simple I installed a plugin using [shortcode] to display random images. This works fine.
How to get the shortcode [wp-image-refresh] working together with background-image:url(...)
I tried it even as inline-style with no result.
This is what I have:
HTML
<div class="header_random-image">
<div id="hero"></div>
</div>
CSS
#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}
Another try with no result: Inline-style
<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>
Could anybody be so kind to help? Or does anybody has a simple solution to place div-random-background-images?
Best from Berlin
In most cases your CSS code will be served in a static file, thus the php code won't execute.
As the inline example doesn't work either, I guess the short code does not return an image url but a full image tag instead. The plugin's description
confirms this assumption. WP-IMAGE-REFRESH
You could try this:
PHP
<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>
CSS
.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}
This should display the image. You'd still have to center it if you want (use flex-box) and check for problems caused on different screen sizes depending on the side ratio of your uploaded images and solve them with some Javascript.
Alternative
Use ACF Pro and add a gallery field to your posts/pages or an option page if you want the same images on all views.
PHP
<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>
I'm using wordpress and ACF plugins to add an image :
http://www.advancedcustomfields.com/resources/image/
I would like to add an image in a div as a background.
I used this code in my style.css but it doesn't work :
background-image: url(<?php $image = get_field('image_projet');?> <img
src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />);
Thanks for you help
A css file contains CSS. Just CSS. You can't write html or PHP into a CSS file.
If you want to generate a CSS property with PHP, you must use the <style>...</style> tags directly in your PHP file (the view). For instance :
<?php $image = get_field('image_projet'); // fetch the ACF field ?>
<html>
<head>
<title>Page's Title</title>
<style>
.your-div {
background-image: url('<?php echo $image; ?>');
}
</style>
</head>
<body>
<!-- this div uses the $image URL as a background. -->
<div class="your-div">
Lorem Ipsum.
</div>
</body>
</html>
do it this way , you can't add alt via css so use title instead, look here, SO css background image alt attribute
`<div style="background-image: url( <?php echo $image['url']; ?>); height: 200px; width: 400px; border: 1px solid black;" title= "<?php echo $image['alt']; ?>">my DIV with a background image:</div>
I have two pictures in my wordpress header, but these pictures are broken. How or where I need to put these pictures..
I created folder C:\wamp\www\wordpress\wordpress\wp-content\images and there is 2 images, but how I get these in to my header.
I already tried:
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='english.gif' /></a>
</div>
and
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='C:\wamp\www\wordpress\wordpress\wp-content\images\estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='C:\wamp\www\wordpress\wordpress\wp-content\images\english.gif' /></a>
</div>
and
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src='images\estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src='images\english.gif' /></a>
</div>
But its not working, what im doing wrong ??
Can somebody help me ? Thanks !
Images should generally go in a your-theme-name/images folder. What you're doing isn't necessarily wrong but it can lead to confusion down the line.
You can use <?php get_template_directory_uri(); ?> to get the current's template directory path. This is used for when your current theme is a child theme.
You can also use <?php bloginfo('template_directory');?> which will return the current template directory. If you're using a child theme, it will return the uri to the parent theme, not the child.
Long story short, you can use it like this for no child:
<a href = 'http://localhost/wordpress/wordpress/en/'><img src="<?php bloginfo('template_directory');?>/images/image-name" /></a>
And like this for a child theme:
<a href = 'http://localhost/wordpress/wordpress/en/'><img src="<?php get_template_directory_uri(); ?>/images/image-name" /></a>
Are you trying to add these pictures to a header theme? When editing a Wordpress theme I think you have to find the original theme header file in the theme folder in the wp-content folder.
C:\wamp\www\wordpress\wordpress\wp-content\themes\ (the name of your theme folder)