Make Img Gallery from Custom Field URLS WordPress
I have 2 custom fields each containing a comma separated list of image urls.
I would like to display an accordion style - so that when the user clicks on the Title, the accordion level one "opens" and the thumbnail images are displayed. When clicking on a thumbnail, the user should be able to navigate through the images via a lightbox.
Then looking for same behavior, of course, for second accordion level...second accordion holds images from custom field 2 which also has comma sep list of image urls.
I know I need to implode (I *think* that's the right term?) the comma sep list, but I just can't get this to work...need help!
Can someone pls tell me if what I'm trying to do is possible, and if so assist me in writing correcting PHP for my page template?
Thanks so much...
-Ellie
Answers (4)
Tache Madalin answers:
Hello Ellie,
Your question has some missing key components and i'd like to ask for the following:
1. What theme are you using (so that i can actually see the scripts) ?
2. Can you show me an example of what you're trying to achieve ?
3. What lightbox version are you trying to use ?
4. Why are you using a comma separated field and not a serialised array ?
If you can answer those questions i might be able to help you.
ellie123 comments:
So....good questions....I have posted my page temp in paste bin and you can find it here:
[[LINK href="http://pastebin.com/CNutKLqp"]]http://pastebin.com/CNutKLqp[[/LINK]]
I am using a plugin called WP Lightbox which has all PrettyPhoto, Fancybox, etc. so any should work.
[[LINK href="https://www.tipsandtricks-hq.com/wordpress-lightbox-ultimate-plugin-display-media-in-a-fancy-lightbox-overlay-3163"]]https://www.tipsandtricks-hq.com/wordpress-lightbox-ultimate-plugin-display-media-in-a-fancy-lightbox-overlay-3163[[/LINK]]
I've actually made great progress and KIND OF GOT IT TO WORK...you can see it here: [[LINK href="http://appstorexxx.com/xxxapps/nov-3-test/"]]http://appstorexxx.com/xxxapps/nov-3-test/[[/LINK]]
***(Do not navigate away from this page unless you are okay seeing adult material.)*** I used the same images in both sets just for convenience.
But, here's the problem now:
1) It only opens one image in a lightbox, doesn't scroll through (i.e. - prev/next)
2) I don't know how to make the display in thumbnail gallery column/rows (reponsively)
3) The lightbox is pretty friggin' ugly (but I'm sure this can be fixed...lol)
I am not using an array because my data comes into my post like this:
1.) A user fills out a form and one of the form fields has them upload multiple images (the field stores those images as comma sep list of urls)
2.) The form data is then posted to a table my database
3.) I run a cron job and create an XML file
4.) Using a plugin called WPAllImport, my posts are automatically created for me using data from that XML file
5.) The image urls are inserted into my custom fields - (still in the comma sep list)
So, I am taking that custom field and showing those images on the page as thumbnails that link to the larger images.
Does that make better sense?
Hopefully with the progress I've made and showing you my code this will help you....help me :)
Thanks so much!
- Ellie
ellie123 comments:
Also...Here is the link to the theme and the Toggle/Accordion:
[[LINK href="http://www.industrialthemes.com/made/shortcodes/sliders-toggles-and-tabs/"]]http://www.industrialthemes.com/made/shortcodes/sliders-toggles-and-tabs/[[/LINK]]
Here is the Shortcode:
[[LINK href="http://appstorexxx.com/media/shortcode.jpeg"]]http://appstorexxx.com/media/shortcode.jpeg[[/LINK]]
Tache Madalin comments:
Ellie,
Is there any possibility that we can discuss this over Skype ?
Tache Madalin comments:
The problem is that you need to create a GROUP in order for the next/prev to function. Let me look into it.
ellie123 comments:
Hey there ... let me know your availability so we can hook up over Skype. Shoot me an email first?
Am I allowed to post my email here? [email protected] (hope that's okay)
Ian Lincicome answers:
Okay If I understand you correctly and you have a comma separated list that you just need to read into a PHP variable and explode it at each comma so that you can work with each image location then this PHP code should get you going in the right direction:
<?php
//Enter the path of your CSV file:
//(TIP: delete 1st line of CSV file if it has headings)
$source_file = "your_csv_file.csv";
//set this to the max possible length of each image url:
$max_line_length = 1000;//probably should be shorter unless image urls are very long
if(($handle = fopen("$source_file", "r")) !== FALSE){
while(($dati=fgetcsv($handle, $max_line_length,",")) !==FALSE){
foreach($dati as $data){
echo "$data<br>";
}//end foreach loop
}//end while
fclose($handle);
}//end if file opened.
?>
Ok, since you do not need the part that reads in the file then you chould do this instead:
<?php
//Note: $dati is an array of your images from the custom field.
foreach($dati as $data){
echo "$data<br>";//for testing to make sure it works, then comment out and add your processing code here.
}//end foreach loop
?>
Let me know if you need help with any part and I'll do my best to explain.
ellie123 comments:
Hello - no, I'm not using a CSV file...my images are stored in a custom field...pls see my reply above for more info.
Thank you for your assistance...
Bob answers:
You need to create two groups of images.
I see there is code fo fancybox and colorbox both.
you should use any one.
here is documentation for color box
[[LINK href="http://www.jacklmoore.com/colorbox/guide/"]]http://www.jacklmoore.com/colorbox/guide/[[/LINK]]
Notice how the gallery class is added in each anchor tag.
And here is fine demo for different uses. see the view source of it and you will get idea how grouping code is written
[[LINK href="http://www.jacklmoore.com/colorbox/example1/"]]http://www.jacklmoore.com/colorbox/example1/[[/LINK]]
Bob comments:
so the code you need to modify is
<a href="<?php echo $imageurls; ?>"><img width="200" src="<?php echo $imageurls; ?>"></a>
just add class like "group1_imgs" for your first custom field and "group2_imgs" for second custom fields like this
<a href="<?php echo $imageurls; ?>" class="group1_imgs"><img width="200" src="<?php echo $imageurls; ?>"></a>
Then colorbox should be added at the very bottom of page like this
JQuery('a.group1_imgs').colorbox({rel:'group1_imgs'});
Bob comments:
If you wish to use fanybox to group image and show as gallery then you need to use "rel" attribute.
In that case you code will look like this.
<a href="<?php echo $imageurls; ?>" class="fancybox" rel="group1_imgs"><img width="200" src="<?php echo $imageurls; ?>"></a>
and javascript code at bottom will look like this
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
Bob comments:
javascript console also shows bug regarding js implementation.
sometime your one js bug can broke other js also.
your height, width should be in double quote like <em><strong>width: "100%"</strong></em>
