Editable Image Gallery

Pagelime Support & User Forum » Help & Tutorials

(19 posts) (4 voices)

Started 1 year ago by Sandi
Latest reply from boldprint

Tags:

Sandi
Member
I'm new to pagelime so still trying to figure out best practices. One of the big requirements for many of our clients is an editable image gallery. I've seen the posts about the Lightbox type gallery (listing to Chris Coyier's screencast as I type) but it's not really the kind of gallery I'm looking to create.

I know this is going to involve repeating regions but I'm not clear on how to put it all together. The end result is a gallery that looks like this http://accessiblewebsitedesignexamples.com/accessible-gallery.php.

The code looks like this:
```
<div id="thumbs" class="navigation"><br />
	<ul class="thumbs noscript"><br />
		<li class="cms-repeat"><br />
			<a href="url" title="Aermotor"><br />
				<img src="url" alt="" /><br />
			</a><br />
			<div class="caption">Aermotor</div></p>
<p>		<li class="cms-repeat"><br />
			<a href="url" title="Blue Bird"><br />
				<img src="url" alt="" /><br />
			</a><br />
			<div class="caption">Blue Bird</div>
```
... etc.

Do I make each individual element in the li tag cms-editable or the whole li block? What creates the easiest functionality for the end user?

Open to any and all suggestions.
Posted 1 year ago #
Tom
The Man

Hmm... Sandi... I'm not sure how you would do this with repeating regions... do a search on the forum for XML publishing. You're going to want to use our Dynamic Gallery publishing. Using that you will be able to get the exact gallery you have on that site, but it will take a little bit of code knowledge. We work well with the Gallerific XML gallery if you wanted to give that a shot. - Tom

Posted 1 year ago #
Tom
The Man

If you did want to do it with repeating regions you would make each LI repeatable AND editable, that way everything contained within could also be editable. - Tom

Posted 1 year ago #
Sandi
Member

So then does pagelime automatically drop in the urls in the a and img tags? That's really what's confusing me.

Posted 1 year ago #
Tom
The Man

It does with repeating regions. It does not with XML publishing. However it gives you all those details in the XML file, then you would code the gallery programatically.

Posted 1 year ago #
Sandi
Member

Okay, I'll give it a whirl with repeating regions and see if I can make a go of it.

Posted 1 year ago #
Sandi
Member

So, not having much luck with this. Maybe I'm just not understanding the whole concept properly. You say this should work well with Galleriffic. Can you offer any sample code to help get me started?

Posted 1 year ago #
Tom
The Man

Check out this post:

http://forum.pagelime.com/topic/photo-gallery-script-that-uses-xml-generated-by-pagelime

Posted 1 year ago #
Sandi
Member

Yes, I had read that already. Still not seeing how I can take the XML file (would love to actually see what it looks like) and drop it in to the Galleriffic gallery. I suspect some major work needs to be done to the gallery.js file - haven't had any luck with it yet.

Doing a demo with a prospect this morning - won't be showing the gallery at this point but at least I can show them how to add/delete images outside of a gallery.

Posted 1 year ago #
Tom
The Man

If you publish a folder, you will be able to see the XML file in your cms-assets folder.

You can also see an example here XML

That other forum post, includes a link to the plugin that I wrote, it's not for Galerific necessarily. - Tom

Posted 1 year ago #
Sandi
Member

Still, sadly, as clear as mud. :-( Will have to tackle it at some point down the road - hoping it makes more sense the second time around.

Posted 1 year ago #
Sandi
Member

Well, I've made some progress on this but still not quite there. Test page is here http://updatemysite.ca/gallery.php. If I inspect the elements I can see that the html is being generated properly but for some reason the images aren't visible. I'm getting an imageData is undefined error from the gallerrific script. Any idea if that's a conflict with what's being generated by Pagelime?

Posted 1 year ago #
Sandi
Member

Geting closer. Decided to ditch the javascript plugin and went with PHP/SimpleXML method. Still needs some refinement but at least it's generating the intended code.

Posted 1 year ago #
Tom
The Man

Sandi you are clearly on it! Keep this thread updated, if you get it all perfect, we'll add you to our knowledge base, and make you Pagelime famous. - Tom

Posted 1 year ago #

Sandi
Member

Here's what the finished PHP looks like:

<ul class="thumbs noscript">
	<?php
		$xml = simplexml_load_file("cms-assets/image-galleries/gallery.xml");
		foreach ($xml->Images->ImageGalleryEntry as $images) {
		echo "\n<li>\n";
		echo '<a class="thumb" href="cms-assets/image-galleries/gallery/images/'.$images->attributes()->FileName.'" title="'.$images->attributes()->Name.'"><img src="cms-assets/image-galleries/gallery/thumbnails/'.$images->attributes()->FileName.'" alt="" width="75" /></a>';
		echo "\n";
		echo '<div class="caption">'.$images->attributes()->Name.'</div>';
		echo "\n</li>\n";
		}
	?>
</ul>

I put my images in a folder called 'gallery' so all references to that in the code above (gallery.xml, cms-assets/image-galleries/gallery/) would need to change to whatever you decide to call your own gallery folder.

The only issue I haven't overcome is getting all the thumbnails to be the same size without changing all the images to either landscape to portrait. Best I could do is size them all to the same width.

Certainly open to suggestions on improving this block of code.

Posted 1 year ago #

Tom
The Man

We actually have a new product coming out that will help you with the image size issues. I can set you up with a Beta on Imgtap.me

Posted 1 year ago #
Sandi
Member

That would be cool - thanks!

Posted 1 year ago #
pauschpage
Member

Hi Sandi. I'm using your script for an image gallery.
It's easy and it works well.

The only thing i am missing, is to sort the images new to old.
Is there any way to do that?

Posted 3 months ago #
boldprint
Member

Do you just post this php segment of code into the template for a photo gallery page? And you have to hard code the template for each page depending on what gallery folder it is showing? Then do you actually load any images into the page or just into the folder? Thank you so much for your help!

Posted 2 months ago #

RSS feed for this topic

Reply

You must log in to post.

Pagelime - Simple CMS for Designers

Editable Image Gallery

Reply