I am trying to make an image hover on a list of galleries, showing the second image of each gallery if it exists.
Some galleries only have one image which is shown as a thumbnail.
The first image is $slider -> url[0] and the second one is $slider -> url[1].
Without using the if statement a problem is aroused: if the second image does not exist it shows a small error image.
I am trying to use an if statement with the required result as follows:
If the second image exists -> show the second image css style (imageexists).
Else (the second image doesn't exist-> show the alternative css style (plusbutton).
Here is the code I used:
<?php $imageexist=url[1]; ?>
<?php if(is_file( $imageexist))
{?>
<div class="image_gallery" style="hover- image: url('<?php echo $slider -> url[0];?>');">
<a href="<?php echo $item->link; ?>">
<div class="imageexists">
<img src="<?php echo $slider -> url[1]; ?>"
itemprop="thumbnailUrl"/>
</div></a>
</div>
<?php }
else { ?> <div class="image_gallery" style="hover- image: url('<?php echo $slider -> url[0];?>');">
<a href="<?php echo $item->link; ?>">
<div class="plusButton">
</div></a>
</div>
<?php }?>
This code does not show any error but it doesn't recognize if the image exists or not, so it shows the alternative (class plusbutton).
How could I make the code check if the second image exists or not?
Thank you very much in advance!
Check paths - this function looks where is directed. Frequently it is not desired directory, but something else.
If directory exists - no errors appears, but your images aren't there.
Check any variable right before is used, start with
<?php
$imageexist=url[1];
print_r($imageexist);
it should be an array with 'path/img_name.ext';
It produces links properly?
/* this is wrong */
<div class="image_gallery" style="hover- image: url('<?php echo $slider -> url[0];?>');">
I'm not sure what effect you wanted, but this style won't work;
Related
How do you change the logo to link to the home URL for all pages except one? I want one page to link to another page when the logo is clicked.
Here is the PHP code for the logo:
<div class="section-boxed section-header">
<?php do_action('pexeto_before_header'); ?>
<div id="logo-container">
<?php
$logo_image = pexeto_option('retina_logo_image') ? pexeto_option('retina_logo_image') : pexeto_option('logo_image');
if(empty($logo_image)){
$logo_image=get_template_directory_uri().'/images/logo#2x.png';
}
?>
<img src="<?php echo $logo_image; ?>" alt="<?php esc_attr(bloginfo('name')); ?>" />
</div>
What about creating a second section of PHP - with a slightly different DIV ID that is called when that paticular page is loaded, rather than this one which is called on all the other pages,
Copy, paste, change DIV ID <div id="logo-container2">, change link address.
In HTML - on the single page that takes them elsewhere - call
<div id="logo-container2">
Would that work?
Try to use template_tag is_page as condition
<div class="section-boxed section-header">
<?php do_action('pexeto_before_header'); ?>
<div id="logo-container">
<?php
$logo_image = pexeto_option('retina_logo_image') ? pexeto_option('retina_logo_image') : pexeto_option('logo_image');
if(empty($logo_image)){
$logo_image=get_template_directory_uri().'/images/logo#2x.png';
}
// Default logo url to home
$logo_url = esc_url(home_url('/');
// if is page about or id 5 anything inside is_page()
if(is_page('about') $logo_url = esc_url(home_url('about');
?>
<img src="<?php echo $logo_image; ?>" alt="<?php esc_attr(bloginfo('name')); ?>" />
</div>
I believe you should be able to use the get_permalink method to check which page you are on, and use an if statement to tell it what the href should be.
<a href="<?= (get_permalink() == '/my-page') ? esc_url(home_url('/go-to-page')) : esc_url(home_url('/')); ?>">
Haven't tested this, but it should work.
I am trying to set an image uploaded through custom fields plugin and have it display as the background of a div (which is used in a slider).
However the image is not displaying...I have text in the custom fields and that is showing okay so I think its something to do with the line of code I am using to pull in the image.
I am trying to set the background of .slide1 with the image.
The custom field name is slide1_background.
HTML:
<div class="slide1" style="background-image:url('<?php the_field('slide_bg1'); ?>');">
<div class="slide1-cont"><p class="slide-text">
<h1><?php the_field('slide_title1'); ?></h1>
<img src="<?php bloginfo('template_directory')?>/images/line.png" /></p>
<p><?php the_field('slide_content1'); ?></p></div>
</div>
CSS:
.slide1{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height: 800px;
}
Look at the difference in your code in your question, where you try to set the background-image, compared to the code in your comment in another answer where you're setting it as an image source.
the_field('slide_bg1') returns an array, so you're trying to set the background image source as a PHP array which gets converted to a string as "Array" so in your HTML it'll look like: background-image:url('Array')
You need to get the field first, then echo the url element of the returned array as the source of the background image:
$image = get_field( 'slide_bg1' );
if ( !empty( $image ) ) { ?>
<div class="slide1" style="background-image:url('<?php echo $image['url']; ?>');">
<?php }
Use echo
<div class="slide1" style="background-image:url('<?php echo the_field('slide_bg1'); ?>');">
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'm trying to create a simple image gallery that displays thumbnails of uploaded images. Once a thumbnail is clicked, I would like to be directed to a page with the large version of the image, along with a comment section. So basically I'm trying to do something similar to deviantart. What I have now looks something like this:
<a href="<?php echo $image->large_image_path; ?>">
<img src="<?php echo $image->thumbnail_image_path; ?>"></a>
Clicking on a thumbnail will take to me to the large image path, which is not really what I want. Any help is greatly appreciated.
You must make the href="<?php echo $image->large_image_path; ?>" to somehing like href="show_image.php?image_path=<?php echo $image->large_image_path; ?>"
In show_image.php you can den get the path of the image by $_REQUEST['image_path'], and add it into the code like this:
<img src="<?php echo $_REQUEST['image_path']; ?> />
The you can add information or styling around the bigger image.
So, link to a PHP page instead of the image. Even better, put the image path in to a database, and use the image id to get the path and information of the image. Like this:
href="show_image.php?image_id=<?php echo $image->id; ?>"> and then in show_image.php, given that you have a method for getting the image:
<?php $image = GetImage($_REQUEST['image_id']); ?>
<img src="<?php echo $image->large_image_path; ?> />
<?php echo $image->description; ?>
<?php echo $image->date; ?>
Hope this helps you on the way.
I am using a wordpress theme that has a custom post type called "link" which simply produces a post where the title links to an outside link you specify. It also includes some text in the body of the post. I would like to also be able to display an image. Right now it is not showing the image.
Here is the code:
elseif ( has_post_format( 'link' )) {
if(get_post_meta($post->ID, '_format_link_url', true)!=''){
$link = get_post_meta($post->ID, '_format_link_url', true);
}else{
$link = '';
}
?>
<h2 class="entry-title">
<a href="<?php echo $link; ?>" target="_blank" title="Follow this link">
<?php the_title(); ?>
</a>
</h2>
<p>
Is there anything I can add to make it display an image as well as text?
Thanks!
I can't see anywhere on this example where you are using an tag to insert an image. The img tag has two required attributes, src and alt. Src is the path to your image, whereas alt is the alternate text for the image. So:
<img src="images/myImage.png" alt="This Is My Image"/>
Hope that helps!