Small Modx modifications

5 Posts

kellianderson Reply #1, 16 years, 1 month ago

Hi there,

(I posted this in "jobs" as well)

I am a designer/front-end developer who is building a new portfolio site with Modx.

On the site, each project page features a jquery cycle slideshow of images (see it here: http://kellianderson.com/modx_projects/amfar-project.html )

In the slideshow, each frame has an image (jpg), a title, a description, a "related" link name and URL.

All of the underlined things above are consistent for each frame of the slideshow (all slides have the same captions), so I just set up template variable for those through Modx and it works great. All of the images are the same size too.

However (obviously), each image in the slideshow must call a different jpg. There is not a fixed amount of jpgs for each slideshow (although I expect that there will be anywhere from 2- 10.)
I need help with this part—I have no clue how to set it up to pull the jpgs for the slideshows in. It needs to be able to pull them in order of a comma delineated list and produce code that looks like this:

<div class="slideshow" id="slideshow">
		<div>
<img src="assets/images/project_images/01.jpg" width="985" height="665" />
<div class="description"><h1>Amfar Project</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna <span class="endMark">°</span></p>
<h2>Related: <a href="http://www.kellianderson.com/projects/project_2.html">Another Project</a></h2>           
</div>
</div>

<div>
<img src="assets/images/project_images/02.jpg" width="985" height="665" />
<div class="description"><h1>Amfar Project</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin consectetuer velit in dui. Phasellus wisi purus, interdum vitae, rutrum accumsan, viverra in, velit. Sed enim risus, congue non, tristique in, commodo eu, metus. Aenean tortor mi, imperdiet id, gravida eu, posuere eu, felis. Mauris sollicitudin, turpis in hendrerit sodales, lectus ipsum pellentesque ligula, sit amet scelerisque urna <span class="endMark">°</span></p>
<h2>Related: <a href="http://www.kellianderson.com/projects/project_2.html">Another Project</a></h2>           
</div>
</div>
	</div>

In summation, the job is this:
• Set up Modx so that I can enter a comma-delineated list of jpgs on the project page and have them dynamically appear in the slideshow.

Hope this is a clear description! Sorry so long…

I’m hoping that someone can do this quickly, since it is a small project. (Like tonight or tomorrow.) I can pay you through Paypal.

Thanks, I really appreciate it. This has me stumped!
Kelli

5 Posts

kellianderson Reply #2, 16 years, 1 month ago

By the way, please email me at [email protected] if you have any questions. I can also be found in AIM under kellinanderson to discuss

Thanks!

Kelli

5 Posts

kellianderson Reply #3, 16 years, 1 month ago

I have access to the backend of a site that does something similar. The user puts comma-delineated jpg names into a template variable field and then those names are distributed into the code in the correct place. My template is simpler than this one.

Let me know if this type of thing makes sense to anyone. I would really appreciate the help

----

This is accomplished through a custom chunk and a custom snippet. See below:

Chunk is called "itemGallery2" and it has this in it:

[!ItemGallery2?images=`[*ItemImages*]`!]

ItemImages = string of comma separated image names.

This is what calls the chunk from the template itself with: {{itemleftcols2}}

And this is the snippet for "ItemGallery2":

<?php
$imagelist = explode(",", str_replace(" ", "",$images));
$num = sizeof($imagelist);
if($num>0 && str_replace(" ", "", $images) != "" ){
echo "<div id='slideshow'>
       
foreach($imagelist as $img){
    if(trim($img)!="")
    echo "<img src='assets/images/".trim($img).";
  
}

if($num > 3)
echo "<a href='javascript:;' id='toggleImageView' title='".ceil($num/3)."'>show all $num images</a>";
else echo "<a href='javascript:;' id='toggleImageView' style='display: none'></a>";

echo "</div>";
}
?>

964 Posts

charliez Reply #4, 16 years, 1 month ago

Check nivo.dev7studios.com, the slider...
I think you can add the text as a caption and
this slider uses all info in HTML...
give it a try!

Website: www.mercologia.com
MODX Revo Tutorials: www.modxperience.com

MODX Professional Partner

5 Posts

kellianderson Reply #5, 16 years, 1 month ago

Hi Charlie,

Oops— sorry to be unclear! My jquery image gallery is completely functional (see here, this is it: http://kellianderson.com/modx_projects/amfar-project.html) It works the same way as the nivo.dev7studios.com slider works: you feed in a string of images into the html, it throws them into a slideshow. So I am all good with that part.

The part that I am looking to hire someone to do is the making-it-dynamic-through-modx-part. I am looking to hire someone to write that php that takes my string of images and turns in into the html code to feed the jquery slideshow.

Thanks,

Kelli

372 Posts

bwente Reply #6, 16 years, 1 month ago

Do you want the description and title to be different? The snippet you have now won’t do that. Plus it also hardcoded for three images.

EvoGallery will make it easier to manage the images and even create thumbnail automatically.

I just added a Nivo gallery type for EvoGallery below.

DropboxUploader -- Upload files to a Dropbox account.
DIG -- Dynamic Image Generator
gus -- Google URL Shortener
makeQR -- Uses google chart api to make QR codes.
MODxTweeter -- Update your twitter status on publish.

5 Posts

kellianderson Reply #7, 16 years, 1 month ago

Thanks all! Someone is helping me with it now. Appreciatively,

Kelli