Create an active on image if url is - wordpress

I'm busy with an Wordpress website. On this website there are some images with an hover.
When the hover is active it will change from black/white to color image.
Now as you can see on the website, top right you see the images.
When you hover the color change. But when you're on the page http://www.freshymedia.nl/inge/site/ the first image needs to be colored.
And for example when you're on this page: http://www.freshymedia.nl/inge/site/contact/
The last image needs to be colored and the rest only needs to hover when you want to hover it.
Anyone has a solution for me?
The website has been build in Wordpress.

The way I do things to test for current pages is by using the functions.php for this code:
$host = $_SERVER['REQUEST_URI']; //finding out the url
$contactimg = 'http://LINK TO YOUR B&W IMAGE.jpg'; //B&W image link - the normal image
if ($host == '/contact/') //if url is contact
{
$contactimg = 'http://LINK TO YOUR COLOUR IMAGE.jpg'; //Current page image
}
Then in the code where your images are you'd have:
<img src="<?php echo $contactimg ;?>" />
Hopefully that makes sense...
Also to check what url to put in instead of "contact" you can echo host on a page
<?php echo $host;?>
That'll display the url for the page that you are currently on.

Related

how to add brand name with image at facebook page share content

Sometimes we see some page post on my timeline, where website shareing link conatin a image, below part of image attach with a page brand name (i have atatch a image example below.). if you click on link you will go to the website page and you will not see the brand name with image. I think somehow this brand name added later by coding or other system. I am confirm, content uploader does not attach this brand name with image, it happen automaticaly.
there anyone please tell me the system nmae and how to do it? at word press how can do that? have any plugin or code? thanks in advance.
You have to add the meta property inside the header area of ​​your site. Please check below article to know more.
For Facebook
For Twitter
You can add meta properties like this.
add_action('wp_head','add_meta_tags');
function add_meta_tags() {
global $post;
echo '<meta property="og:title" content="'.$post->post_title.'" />';
// So on....
}

Wordpress - TwenteenSeventeen picture instead of a title

I'm really new in coding, especially in css. I already read some tutorials but I like to change a specific thing. For my Website I use Wordpress. I also edited a few things in my CSS which already worked. Now I can't find a answer for how I can replace the title with a custom picture.
Click here to watch a picture to understand what I mean.
Click here to acess my website.
I already tried some things, but it would be nice if someone can explain me how to do it.
You can edit header.php in the twenty seventeen to display only a picture.
This source code is on your wordpress server in wp-content/themes/twenty-seventeen/header.php: https://github.com/WordPress/twentyseventeen/blob/master/header.php
You'll want to replace line 31:
<?php get_template_part( 'components/header/header', 'image' ); ?>
With something like
<img src="banner.png" />
You'll have to adjust the location of banner.png to where you actually upload the image.
After you've got that working and it's basically what you want, you can wrap the image tag in a a tag so the banner links back to your home page, if you'd like.

How to make a wordpress image header appear only on homepage?

How do I make my image header only appear on my homepage? Also, how do I edit code in WordPress to fix this?
You can use this wordpress function is_front_page() to for this kind of thing, Simply add if condition
if(is_front_page()) {
/*your header image goes here and you condition*/
}
You have multiple ways for doing this either you can use header.php or you can make a home page template and write this condition this your home page template.

Wordpress - Replace main image with thumbnail when clicked

I'm trying to accomplish the following task: I have a page that has several images, 1 is large and is the main image and then several images below which are sized smaller. What I want to do is that when a user clicks one of the smaller images, that image is loaded and replaces the main product image.
An example of one of my pages is: http://footybootsdb.com/adidas-x16-1/
I would like this to occur on multiple different pages so any code that can be implemented on several pages would be appreciated.
The page is configured using the 'Page Builder' plugin for Wordpress.
You can do it using js. Firstly place a big-sized image's url on the small-sized image via the data attribute like this:
<div id="divContainBigSizeImage">
<img class="small-size" src="http://main-image.jpg"
</div>
<img class="small-size" src="http://image-with-small-size.jpg" data-big-size="http://image-with-big-size.jpg">
<img class="small-size" src="http://another-image-with-small-size.jpg" data-big-size="http://another-image-with-big-size.jpg">
Then you can bind js click event to that image to gain the big-sized image's url. If using jquery, it looks like this:
$('.small-size').on('click', function() {
var bigSizeUrl = $(this).data('big-size'); // get the big-sized image's url
var newImgHTML = '<img src="' + bigSizeUrl + '">'; // create an html element
$('#divContainBigSizeImage').html(newImgHTML); // replace the current big-sized one
})
Install a light box plugin, when user clicks on the image, it will open the bigger version.

remove and disable featured image in posts

I write a post in new post editor and then add media. I can see the images in the editor but when i publish them they aren't loading up and a frame with little square in the middle comes up. This is the link to one of my posts: http://getprogramcode.com/2013/03/c-program-for-bit-stuffing/ . For some people only link to the image comes up and it opens up with 404 error. See the line after OUTPUT: bit stuffing.
Also i want to remove the featured image from appearing in my posts. I have a option in my theme on a new post: "disable featured image" - but that doesnt work . Also if i dont put the image or i remove the featured image the empty image appears: see the home page: http://getprogramcode.com Please help me to solve this problem
You should not use relative paths on WordPress, only Absolute paths.
The problem is that you are using ../wp-content/... as your URL's for image paths.
When adding images, you should have the option to give it a path, you should opt to link to the media file.
For the disable feature image, if you go into the page.php or single.php code, it should have a line of code in it for calling in the featured image.
It should look something like this:
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
You just need to remove or comment out this code and it should stop showing up on the pages.

Resources