I am trying to achieve the below image:
Basically, I have set up ACF Gallery, and used the code below:
<?php $images = get_field('gallery'); if( $images ): ?> <!-- This is the gallery filed slug -->
<?php foreach( $images as $image ): ?> <!-- This is your image loop -->
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <!-- Image Code -->
<?php endforeach; ?> <!-- This is where the image loop ends -->
<?php endif; ?> <!-- This is where the gallery loop ends -->
Which now lists all the images in the gallery. What I am looking for, is the first image to be full size, and the other 3 images to be thumbnails, like the image, which when clicked, change the full size image.
Anyone have any ideas?
EDIT:
Im open to another way of doing this
Normally I wouldn't post all of this, as it would require creating a lot of stuff, but luckily I just made something similar for work yesterday.
<?php $galleryImages = get_field('gallery'); ?>
<div id="largeGalleryImage">
<img src="<?php echo $galleryImages[0]['sizes']['gallery-full']; ?>" id="galleryImageLarge" />
</div>
<div id="galleryThumbs">
<?php $i = 0;
foreach($galleryImages as $galleryThumb){
$i++;
if($i==1){
$imgClass = 'active';
}else{
$imgClass = '';
}
echo '<img src="'.$galleryThumb['sizes']['gallery-thumb'].'" class="imageThumb imageNum'.$i.' '.$imgClass.'" picURL="'.$galleryThumb['sizes']['gallery-full'].'" />';
} ?>
</div>
<script type="text/javascript">
//Setup Gallery Clicks
$("#galleryThumbs .imageThumb").click(function () {
if ($(this).hasClass('active')) {
//do nothing
} else {
var newImage = $(this).attr('picURL');
$('#galleryImageLarge').attr('src', newImage);
$("#galleryThumbs .imageThumb").removeClass('active');
$(this).addClass('active');
}
});
</script>
In this example, "gallery-full" is a set custom image size for the large photo, and "gallery-thumb" is a set custom image size for my thumbnails.
The thumbnails have an attribute applied to them, called "picURL" and it houses the URL of the large image. The large image is auto-filled with the URL of the first image. Then, using jQuery, when a thumb is clicked, it changes the src value of the large image with the value of the thumbnail's "picURL".
It also gives the current thumbnail an "active" class, to allow for styling your current thumb.
Related
I am trying to display an image caption for a wordpress Advanced Custom Fields (ACF) repeater field, and haven't had any luck with the follow three options:
<?php if($middle_image['image']): ?>
<?php $midimage = wp_get_attachment_image_src($middle_image['image']); ?>
<?php $caption = $midimage->post_excerpt; ?>
<?php $captiontwo = $middle_image['image']['caption'] ?>
<?php $captionthree = $middle_image['image']->post_excerpt; ?>
<?php $alt = get_post_meta($middle_image['image'], '_wp_attachment_image_alt', true); ?>
<?php $main_image = wp_get_attachment_image_src($middle_image['image'], 'two-column-cropped' ); ?>
<div class="two-column-cropped"><img src="<?php echo $main_image[0]; ?>" alt="<?php echo $alt ?>" />
<?php if($caption) { ?>
<div class="image_caption"><?php echo $caption; ?></div>
<?php } ?>
</div>
<?php endif; ?>
Any suggestions would be appreciated. Thanks.
wp_get_attachment_src() does not fetch any data about an image besides the URL, height and width. You might want wp_get_attachment_metadata() however I think you would be better off changing your ACF field to return an Image Object (actually an array) instead of the Image ID (as I assume you have it now).
ACF can return any of three things for an image field: The image src URL, the Attachment ID (which can be passed to functions such as wp_get_attachment_image_src()), or the attachment information as an array.
You can check that you are receiving the correct response from ACF by using var_dump($middle_image) or var_dump($midimage)
I assume that $middle_image is your repeater field.
As long as ACF is configured correctly to return the image object (instead of the image URL or ID), you can simply remove this line:
<?php $midimage = wp_get_attachment_image_src($middle_image['image']); ?>
and then access the image caption using $middle_image['image']['caption']
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 a PHP and a jQuery script that I use to display a few images. A large image on the left side and 4 thumbnails on the right side. Each time the user clicks an image-thumbnail it will show up on the large image placeholder on the left side.
This is the PHP code I'm using to display the large image and thumbnails:
<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
</li>
<?php endforeach; ?>
This is the jQuery I'm using to update the large image when an user clicks on any thumbnail-image:
jQuery(document).ready(function($){
// handle the click of thumbnail images
// redirect it to change the main image
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href");
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
return false;
});
// preload the large images
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// populate the list of images to load
preload(images);
});
Everything works fine in this setup but I also need to display below the main large-image its title and description. This is the code I'm using:
<div class="container-title-description">
<div class="title"><?php echo $current->alttext ?></div>
<div class="descripton"><?php echo $current->caption ?></div>
</div>
The problem is this: if I add this code inside the foreach loop I get the title and description below each thumbnail-image. If I add this code outside the foreach loop when the main image changes the title and description will stay the same. How can I solve this?
You can view how this setup looks like on this website.
You already add the title and description as hidden title attributes inside the anchor element, so just extract them and update the HTML on demand:
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href"),
desc = $(this).attr('title'),
title = $(this).find('img').attr('title');
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
$('.container-title-description .title').text(title);
$('.container-title-description .description').text(desc);
return false;
});
Initial HTML (outside your foreach loop):
<div class="container-title-description">
<p class="title"></p>
<p class="description"></p>
</div>
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
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.