I'm trying to set a logo in an options panel for Wordpress, where there's the regular logo and the retina logo upload. I want it to work so if there's a retina logo uploaded, use that, but set to the regular logo size. If there is no retina logo but there is the regular logo, use that, otherwise use blog name. My issue is one of php conditionals that I can't quite seem to get right.
The following code produces two logos, the large and the small right now. The second line does properly produce a retinized logo. But I'm missing some kind of else statement? I did try php else in the second statement, but it produced errors.
<?php if (!empty($mandm['logo']['url'])) { ?> <div id="logo"><img src="<?php echo esc_url($mandm['logo']['url']); ?>" alt="<?php bloginfo('name');?>" />
<?php if(!empty($mandm['retina-logo']['url'])) {?> <img src="<?php echo esc_url($mandm['retina-logo']['url']);?>" class="retina-logo" style="max-height:<?php echo $mandm['logo']['height'];?>px" /> <?php } ?></div>
<?php } else { bloginfo('name'); } ?>
</a>
<?php endif; ?>
Related
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>
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 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'm using Drupal 6.x. This is my code on my node-product.tpl.php template. I've created a custom jquery gallery for the products. It works great, but I'm just missing tool tips from my images (both large and small thumbnails). To upload images I'm using a CCK field named field_images. There I input the image titles when I upload the images. How can I add the tool tip code snippet to make it work?
<div class="product-large">
<img src="/sites/default/files/imagecache/360x280/<?php print $node->field_images[0]['filename']; ?>" />
</div>
<div class="product-small">
<?php
// get all images
foreach ($node->field_images as $images) {
?>
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['filename']; ?>" />
<?php
}
?>
</div>
Thanks much appreciated!
Chris
The "tooltip" is a result of the title HTML attribute. You'll want to add title="foo" to your img tag.
Perhaps:
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['data']['filename']; ?>" title="<?php print $images['title']; ?>"/> for the second image and similarly $node->field_images[0]['data']['title'] for the first.