I am using a Wordpress theme and want to make it change the background images automatically. So, I used some PHP code and tried to build it into the website, but something is not working and I cannot figure it out, as I am not very good with PHP.
functions.php:
<?php
$bilder = glob( "images/*.jpg" );
shuffle( $bilder );
$zufall = imagecreatefromjpeg($bilder[0]);
imagejpeg($zufall);
?>
... and simply in CSS of my Wordpress:
body {
background: url('<?php print $zufall ?>') no-repeat center center fixed;
}
But for some reason it just does not show the pictures and I am really off with my wisdom now. :(
Can you help me or tell me the error?
Thank you very much in advance.
This should work - you just need the filename of the image which is in the $bilder array
functions.php:
<?php
$bilder = glob( "images/*.jpg" );
shuffle( $bilder );
$zufall = $bilder[0];
?>
CSS:
body {
background: url('image/<?php print $zufall ?>') no-repeat center center fixed;
}
Related
I was looking for a way to make a "flip image" in the woocommerce product loop when you hover mouse, I know there are plugins that do this function but I think it's a very simple thing to need to use a plugin, I've been searching and I ended up finding a solution.
here's the code:
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id);
}
and the css:
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1){
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
opacity: 0;
transition: opacity 0.5s;
}
my code did the job but the image is coming at a very low resolution
is there a way for it not to appear with such a low resolution?
I'm using a storefront child theme
nevermind I found out that some information was missing in my code here is the solution I found:
you need to set the image size: wp_get_attachment_image();
//set image size full size
wp_get_attachment_image($secondary_image_id, 'full');
//set image size medium size
wp_get_attachment_image($secondary_image_id, 'medium');
//set image size thumbanil size (default)
wp_get_attachment_image($secondary_image_id, 'thumbnail');
add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );
function custom_loop_product_thumbnail() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$secondary_image_id = $attachment_ids['0'];
echo wp_get_attachment_image($secondary_image_id, 'full');
}
I want to display text in center of the page. But, it's not display proper. I used mpdf and i want to display using mpdf in php.
What I tried :
<?php
require_once __DIR__ . '/../bootstrap.php';
$mpdf = new \Mpdf\Mpdf();
$mpdf->SetDisplayMode('fullwidth');
$stylesheet = '<style>' . file_get_contents('example1.css') . '</style>'; // external css
$mpdf->WriteHTML($stylesheet, 1);
$mpdf->WriteHTML('<div id="center">
Hello World
</div>', 2);
$mpdf->Output('filename.pdf');
CSS :
#centrar{
margin:0;
width: 80%;
background-color: #000;
}
body { text-align: center }
Output :
enter image description here
It's display center in first line. I want to display in full page center part.
How to do that? Please help me. Thanks.
I have a landing page where I'd like to split test multiple backgrounds and popup overlays.
In the same folders I have images like 01.jpg 02.jpg etc.
The url will be similar to these:
mywebsite.com?bg=01&ov=01
mywebsite.com?bg=07&ov=10
etc...
I'd like to set a default value in case someone reaches the page with the clean url and also take care of security by allowing only numbers in the filename.
Here's what I have put together (it doesn't work):
<?php
if(isset($_GET['bg']){
$bg = (int) abs($_GET['bg']);
}else{
$bg = '01';
}
if(isset($_GET['ov']){
$bg = (int) abs($_GET['ov']);
}else{
$ov = '01';
}
?>
<style>
body {
background-image: url(<?php echo $bg; ?>.jpg);
background-size: cover;
}
.overlay {
background-image: url(<?php echo $ov; ?>.jpg);
background-size: cover;
}
</style>
Can somebody help me with this?
I am using WP 3.5.1, twenty twelve child theme and PHP 5.2 on my server.
I am trying to use a php script(that works on my other websites) in order to get random background-image but it's not working:
CSS:
body {
background: url(<?php include ("bg.php"); echo $selectedBg; ?>) no-repeat fixed;
}
PHP:
<?php
$bg = array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
$i = rand(0, count($bg)-1);
$selectedBg = "$bg[$i]";
?>
my php file is in the same folder as the jpg's.
Any ideas?
No errors. If I use background: url(1.jpg); (instead of php) it works fine but obviously shows 1 image.
Small solution:
We know that he have 5 images on the server:
'1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'
So quick tip:
<body style="background: url('pahttoimages/<?= rand(1, 5) ?>.jpg') no-repeat top center;">
i think the CSS file can't explain your PHP code
try body {
background: url(<?php echo '1.jpg'; ?>) no-repeat fixed;
}
As far as I can see, your code is valid.
Except, you should really write the last line like:
$selectedBg = $bg[$i];
No need for quotes here.
I suspect this is what is causing the error:
my php file is in the same folder as the jpg's. Any ideas?
The background-image needs to be relative to the template-file you are using, not the PHP-file. You script will only work if the images are located in the same folder as the template-slices.
In my WP-installation, I have a template located in /wp-content/themes/mytemplate/ and template-graphics located in /wp-content/themes/mytemplate/images/. If I were to use your script, I would need to preappend /images/ before all the backgrounds in your array.
By the way, you should consider installing Firebug on Firefox and inspect the source. Is the background-name parsed into the template? Does loading the image return a 404 not found-error? Is the location and path correct?
background-image: url(<?php include ("bg.php"); echo $selectedBg; ?>);
background-position: fixed;
background-repeat: no-repeat;
Do this:
// bg.php
<?php
return array(
'1.jpg',
'2.jpg',
'3.jpg'
);
// Wordpress CSS
<?php
$imageUrls = include('bg.php');
$imageUrl = $imageUrls[ array_rand($imageUrls) ];
?>
.someClass {
background-image: url(<?php echo $imageUrl ?>);
}
background: url('<?php $a = array('darkred.jpg','red.gif','pink.png'); echo $a[array_rand($a)];?>');
I have a menu that is image based (one yellow and one blue, for example). I designed the buttons in Illustrator and then converted to PNG files. Right now, I'm using CSS for hovering affects.
So when I hover over the image, it changes. So this is good (because it works), but its far from perfect (that's why I'm here)... One of my buttons in CSS looks like this:
.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.home_menu {
background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
The HTML is like started out like so:
<div id="main_menu">
</div>
So basically I'm changing the CSS background image for each class.
Two questions. First, I'm trying to get each menu to be the blue version when on that page. So I wrote a PHP function to do this (in a class), just in case I want to avoid JavaScript. It looks like this:
// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
$current_file = explode('/', $_SERVER['PHP_SELF']);
$current_page = $current_file[count($current_file) - 1];
$current_page;
//$i = 0;
foreach ($page_nav as $key => $value) {
$menu_output .= '<a href="';
$menu_output .= $key;
$menu_output .= '" id="';
$menu_output .= $menu[$key];
$menu_output .= '" style="background: transparent url(';
if ($current_page == $key) {
$menu_output .= $image_dir . $ds . $page_nav_alt[$key];
}
else {
$menu_output .= $image_dir . $ds . $page_nav[$key];
}
$menu_output .= ');"';
$menu_output .= '></a>';
$i++;
}
echo $menu_output;
}
It seems to work for the Home page ($home variable), but not for the others. I have variables like this (arrays and variables in another file, truncated for brevity):
$menu = array(
$home => 'home_menu',
...);
$page_nav_ylw = array(
$home => $home_but_ylw,
...);
$page_nav_blu = array(
$home => $home_but_blu,
...);
Then I have all the images in variables, referenced to in the arrays, eg, $home_but_ylw refers to the PNG for that button.
The PHP function is a bit odd, because I use the $key for two arrays, which I'm sure is bad. But I'm having a hard time getting it to work otherwise.
Second question is: is there any reason I can't add JavaScript (like jQuery) right on top of this to get me the hover effects so that I can remove it from the CSS? Ideally I'd like to display the buttons with a PHP loop that also handles current page and then do the hover affects with jQuery.
Sorry for the long post. Hope it makes sense.
Thanks in advance!
If you were planning on serving your pages dynamically then I think jQuery would be a much better option. However, if your links are going to separate pages then try something this:
function printNav($Page = "home"){
$HTML = "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
$HTML .= "";
echo $HTML;
}
On each separate page:
<div id="main_menu">
<?php printNav("home"); ?>
</div>
CSS:
.ActiveNav {
background-image: url('../images/buttons/blue_bg.png');
}
.MenuItem {
float: left;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
width: 100px;
height: 34px;
display: block;
}
.HomeMenuItem {
background: transparent url('../images/buttons/home_but.png');
}
.HomeMenuItem:hover {
background-image: url('../images/buttons/home_but_hov.png');
}
EDIT: If you wanted a different image for each button - I would suggest using a generic button background and hover and putting the text and icons on top of it.
Based on this answer, I was able to find a work around to my problem:
PHP menu navigation
Basically, I used the GET method to get the selected class. This worked nicely. I consolidated my CSS, and was able to get this thing working.
Here is what it turned out like, for one link:
<?php $class = $_GET['selected_tab']; ?>
<div id="main_menu">
<a href="index.php/?selected_tab=home" id="home_menu" title="Home"
class="<?php if(strcmp($class, 'home') == 0) {echo 'selected';} ?>"></a>
CSS like so:
#home_menu {
background: transparent url('../images/buttons/home_but.png');
}
#home_menu:hover, #home_menu.selected {
background-image: url('../images/buttons/home_but_hov.png');
}
Next step is to convert to jQuery.
Thanks Mike GB for your help but it wasn't quite what I was looking for.