I have a WP site and I am trying to achieve the following. I need on 3 different pages a separate image in the footer.
I did find an answer how to do it the following way placing this code in the footer:
<?php
if(is_page(4)):
?>
<div class="images"><img src="url-image-location" alt="alt info" class="img-responsive"></div>
<?php endif; ?>
The above way works great but i'm lost on how to add it for the another page. I tried just repeating the above code again and changing the page and image url but then I lose styling from the rest of footer.
So question is, how do I add it a second time?
Thanks
What about using elseif and just change the image path variable so you won't loose styling? i assume your css is written for class.
<?php
$image_path = "imagepath";
if (is_page(4)) {
$image_path = "imagepath-4";
}
else if (is_page(5)) {
$image_path = "imagepath-5";
}
else if (is_page(6)) {
$image_path = "imagepath-6";
}
?>
<div class="images"><img src="<?php echo $image_path?>" alt="alt info" class="img-responsive"></div>
Related
I'm trying to give a client some options in the WP backend to customize a carousel that is displayed on their website's homepage. I am using Advanced Custom Fields to handle getting the input from the client. I want to give them two options:
Option #1) Allows the client to insert a string of text to be displayed ('carousel_title_text')
Option #2) Allows the client to upload a logo to be displayed ('carousel_logo')
I want the code to check for title text, and if there is none, display the logo instead. I haven't yet decided what will happen if both fields are empty. Anyway, here is what I've come up with:
<?
if( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text');?></h2>
<? } elseif( get_field('carousel_logo') ) {
the_field('carousel_logo');
}
?>
The 'carousel_title_text' displays as long as there is an input, but when it's empty and 'carousel_logo' is not, it does not properly output the logo. Can anyone tell me what I'm doing wrong or if there's a better approach?
Thanks in advance,
If I get it right, your problem is not with the If/Else statement but with the logo field. I assume you properly configured this field (carousel_logo) as Image in ACF.
Image fields offer three different Return Value possibilities:
Note: In some versions of ACF you'll found Image Object instead of Image Array, but it's conceptually the same.
None of them will show your image properly if you just use the_field('carousel_logo'); in your template. So, how do you get your logo?
If you want the easiest solution, choose Image URL as Return Value for your logo field and print it like that:
<?
$title = get_field('carousel_title_text');
$logo = get_field('carousel_logo');
if (!empty($title)) : ?>
<h2 class="promo"><?= $title ?></h2>
<?php elseif (!empty($logo)) : ?>
<img class="logo" src="<?= $logo ?>">
<?php else: ?>
<!-- No title, no logo -->
<?php endif ?>
I've changed a little your code, but basically the key line here is:
<img class="logo" src="<?= $logo ?>">
This, or the equivalent:
<img class="logo" src="<?php echo $logo ?>">
should show your image when the title is missing.
Bonus: If you're handling different thumbnail sizes I'd recommend you to use Image Array as Return Value. In that case, $logo would be an Array containing all information (such as sizes, all thumbnail URLs, captions, etc.)
Use:
<img class="logo" src="<?= $logo['sizes']['medium'] ?>">
where 'medium' is your thumbnail size label to output it.
Also, please check official docs on ACF's Image field type for more examples and further explanations.
You have put else condition on last, that will default text will show if client will not Enter text ot logo.
you will used bellow code.
<?php
if( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text');?></h2>
<?php } elseif( get_field('carousel_logo') ) {
the_field('carousel_logo');
}else {
echo " <h2 class="promo"> Default slider title </h2>"
}?>
it's default title client indicate to he has not entered slider text
Hope it's work for you.
Try:
<?php
$output = (get_field('carousel_title_text')) ? get_field('carousel_title_text'):get_field('carousel_logo');
echo $output;
?>
This sounds like it's to do with the settings for the logo, which I'm assuming is an image field? In the Wordpress admin there will be a setting under that field called 'Return value' which can be set to either 'Array' or 'URL'.
If this is set to 'Array', you'd need to store that array to a variable and then access its properties in your markup like so:
<?php
if ( get_field('carousel_title_text') ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text'); ?></h2>
<?php } else{
$carousel_logo = get_field('carousel_logo');
if ( $carousel_logo ) { ?>
<img src="<?php echo $carousel_logo['url']; ?>" />
<?php } else { ?>
<h2 class="promo">Default slider title </h2>
<?php }
}
?>
Alternatively, you could set your field to only return the image URL and then access it like so:
<?php
if ( get_field('carousel_title_text' ) { ?>
<h2 class="promo"><?php the_field('carousel_title_text'); ?></h2>
<?php } elseif ( $carousel_logo ) { ?>
<img src="<?php the_field('carousel_logo'); ?>" />
<?php } else { ?>
<h2 class="promo">Default slider title </h2>
<?php }
?>
ACF's documentation on the Image field will provide more info on this.
I have little problem floating text and image in wordpress post. I want to have little space between text and picture. When I try to make it with merge or padding in css, It does nothing or text goes below pic. please help me, page url: http://uglt.org/new/?p=2224
see pic, how I want to be and how is it: http://i.stack.imgur.com/wNUxq.jpg
php code:
<?php if($image) : ?>
<img class="img-responsive singlepic" src="<?php echo $image ?>"/><div class="singu"><?php the_content(); ?></div>
<?php endif; ?>
<div class="entry-content">
By the way when I try to make these two class into one div It goes below too. Please help me, thank you in advance.
Try adding a padding-right to the image element.
Just use the css property:
margin-right:10px
for example, having the class:
.rightSpacing {
margin-right:10px
}
then you could use
<img class="img-responsive singlepic rightSpacing" src="<?php echo $image ?>"/>
use the number of pixels you might feel necessary, 10 is just an example.
I'm have a wordpress installation where i have 2x custom fields, that both store images (or rather the urls for the images).
I then have a div that i want to display the images in. but i want to display the first image, then have some nice buttons that will scroll to the next image.
My code so far is below:
<div>
<?php
$front_cover = get_post_meta($post->ID, 'front_cover', true);
$back_cover = get_post_meta($post->ID, 'back_cover', true);
$artwork = $front_cover;
if ($back_cover === '') {
echo '<img src="'.$artwork.'" />';
} else {
echo '<img src="'.$artwork.'" />';
?>
<div class="artwork_controls">
Previous
Next
<span class="sliderPagination">1 of 3</span>
</div>
</div>
<?php } ?>
As you can see. my If statement checks if the back_cover has any content... if it doesn't it displays the front_cover only.
If the back_cover does have content it should display the front cover and then the buttons that the user clicks to load up the back cover.
My thinking was that i could get the 'previous' and 'next' buttons to dynamically change the $artwork variable, but i don't believe that's possible as the PHP would have already been processed?
This code could be completely wrong, but hopefully you can see what i'm trying to do?
<div>
<?php $front_cover = get_post_meta($post->ID, 'front_cover', true); ?>
<?php $back_cover = get_post_meta($post->ID, 'back_cover', true); ?>
<?php $artwork = $front_cover; ?>
<?php if ($back_cover === '') { ?>
<img src="<?php echo $artwork; ?>" />
<?php } else { ?>
<img id="imgA" src="<?php echo $artwork; ?>" />
<img id="imgB" src="<?php echo $back_cover; ?>" style="display:none;"/>
<div class="artwork_controls">
<span class="sliderBtnPrev" onClick="document.getElementById('imgA').style.display='none';document.getElementById('imgB').style.display='';">Show B</span>
<span class="sliderBtnNext" onClick="document.getElementById('imgB').style.display='none';document.getElementById('imgA').style.display='';">Show A</span>
</div>
<?php } ?>
</div>
One way would be to do AJAX calls and fetch images upon clicking the "Previous" and "Next" buttons.
However you can just put all your images in the final html and do all the rest with javascript and some css.
So if you just put the two images in the html, lets say they have ids "front-image" and "back-image" so you've got this
<img id="front-image" src="imgs/front-cover.jpg"/>
<img id="back-image" src="imgs/back-cover.jpg" style="visiblity: hidden"/>
Notice the style="visibility: hidden". From than on you can have onClick handlers on your Previous and Next buttons which just set the visibility of the two images.
clickHandlerPrev() {
document.querySelector("#front-image").style.visibility = "";
document.querySelector("#back-image").style.visibility = "hidden";
}
clickHandlerNext() {
document.querySelector("#front-image").style.visibility = "hidden";
document.querySelector("#back-image").style.visibility = "";
}
Then your buttons would look like this
Previous
Next
Though if I'm getting your goal right, I think your buttons are better named simply "Front cover" and "Back cover" since you're not iterating over lots of images, but switching just those two.
I'm working on a website where the homepage has a dark background, yet all the other pages have a white background.
I am using pho to include a header file to show the logo, navbar, telephone details etc on every page.
As the home page has a dark background, the logo has white text, yet the logo use on the other pages has dark text.
I'm looking for a way of using php, so that I include a single header file on every page. If the homepage has a class of "home" the logo image with white text is shown and on all other pages the logo image with dark text is shown.
something along these lines:
if (body class="home") {
<img src="images/logo-with-white-text" />
else {
<img src="images/logo-with-dark-text" />
};
Is this possible?
Any help or advice would be greatly appreciated :)
I'm assuming your homepage currently looks something like this:
<html>
<head>...</head>
<body class="home">
...
<?php include 'header.php'; ?>
...
You could make the class a variable, and reference this variable from the included header file:
<?php $class = 'home'; ?>
<body class="<?php echo $class; ?>">
...
<?php include 'header.php' ?>
...
In header.php:
<?php if (isset($class) && $class == 'home'): ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-dark-text" />
<?php endif; ?>
You could check whether you are on the homepage (Depending on your exact implementation) with a snippet like this:
if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
// home page
}
else {
// some other page
}
$_SERVER['SCRIPT_NAME'] contains the actually loaded file relative from the host until the query-string:
http://example.com/my/folder.php?a=b => /my/folder.php
For more information have a look at basename in the PHP manual.
$_SERVER['REQUEST_URI'] contains the current page url (after the domain). You could check instead that the page has the homepage url with that.
Depending on your setup you'd have something like
<?php if ($_SERVER['REQUEST_URI'] == '/') : ?>
<img src="images/logo-with-white-text" />
<?php else: ?>
<img src="images/logo-with-white-text" />
<?php endif; ?>
You don't need PHP for this if you use an image replacement technique to display the image.
Basically, you use an <h1> or something for your logo, with text, then use negative text-indent to hide the text, set a height and width, and use a background image for the logo. Example:
http://jsfiddle.net/nwNbb/
<h1 id="logo">My Website</h1>
#logo {
text-indent:-999px;
background:url(/path/to/logo.png);
height:100px;
width:500px;
}
Then, in your CSS, you can change the background image based on the body class:
body.home #logo {
background:url(/path/to/alternate-logo.png);
}
You can actually do image replacement on images as well:
http://jsfiddle.net/nwNbb/3/
img {
/* 500x100 replacement image */
background:url(http://lorempixum.com/500/100);
/* hide original image */
width:0;
height:0;
/* use padding to set width/height of replacement */
padding:50px 250px;
}
I have an album plugin (php) that creates thumbnails for my images in one page and when i click on images opens each image in a new page.
Is there a way to opening images on the same page of thumbnails?
This is my code of thumbnails:
<div class="thumbs">
<?php foreach (wppa_get_thumbs() as $tt) : global $thumb; $thumb = $tt; ?>
<img src="<?php wppa_thumb_url(); ?>" alt="*" />
<?php endforeach; ?>
</div>
and this is the code of specific photo:
<?php } else if (wppa_page('single')) { // if is showing a specific photo ?>
<a href="<?php wppa_photo_url(); ?>"><img src="<?php wppa_photo_url(); ?>" alt="<?php wppa_photo_name(); ?>" class="big" <?php echo wppa_get_fullsize(); ?> />
</a><br />
<?php } ?>
And this is the function that creates links:
// get link to photo
function wppa_photo_page_url($return = FALSE) {
global $thumb;
$url = get_permalink() . wppa_sep() . 'album=' . $_GET['album'] . '&photo=' . $thumb['id'];
if ($return) {
return $url;
} else {
echo $url;
}
}
I tried to remove the link code but does not work.
The act of opening a link in a new window is usually associated with the "target" attribute of an anchor. For example, this would put links in new windows:
text
But the code you've pasted above does not appear to include target attributes in , so I suspect the behaviour is controlled in your CSS, which you didn't include in your question.
Check your CSS files, and look for "target". The W3C has published documentation that describes how this works.
It's actually very easy to do using plain javascript's Image object. You can have a function that does something like this:
function load_image(image_path)
{
var image = new Image();
image.src = image_path;
return image;
}
You can pull the url to the image from the link that they click on.
Then, append that image to a hidden div you have and make it visible. If you're using jQuery:
var image = load_image("/path/to/your/image.jpg");
$(image).appendTo("#your-image-div");
$("#your-image-div").show();
This is untested, but should work.
You could use a jQuery plugin like Lightbox to pop the content dynamically over the current page.