Solved

Concrete5 Image Attributes

Posted on 2013-06-10
9
533 Views
Last Modified: 2013-06-12
Hi,

Im using concrete5 to make a website for a client and have made some custom image attributes in a attribute group called 'image_gallery' so the client can upload their own photos. Once the photos have been uploaded under the Page Properties > Custom Attributes (see attached screenshots) tab they are displayed on the page using an unordered HTML list.

The following code works but i would like to condense it if possible, maybe put the Attributes in an array or something like that. I would also like for the list of images to show only if the first Gallery option has a value too. The way it looks now is a bit messy and I'm sure there must be a better, cleaner way of going about this.

<?php
if ($c->getAttribute('portfolio_image')) {$portfolio_image = '<img src="'.$c->getAttribute('portfolio_image')->getVersion()->getRelativePath().'" width="370" height="350" alt="Savvy Construction Portfolio Image" />';};
if ($c->getAttribute('gallery_1')) {$gallery_1 = '<a href="'.$c->getAttribute('gallery_1')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('gallery_1')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
if ($c->getAttribute('gallery_2')) {$gallery_2 = '<a href="'.$c->getAttribute('gallery_2')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('gallery_2')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
if ($c->getAttribute('gallery_3')) {$gallery_3 = '<a href="'.$c->getAttribute('gallery_3')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('gallery_3')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
if ($c->getAttribute('gallery_4')) {$gallery_4 = '<a href="'.$c->getAttribute('gallery_4')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('gallery_4')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
if ($c->getAttribute('gallery_5')) {$gallery_5 = '<a href="'.$c->getAttribute('gallery_5')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('gallery_5')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
if ($c->getAttribute('gallery_6')) {$gallery_6 = '<a href="'.$c->getAttribute('gallery_6')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('gallery_6')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
?>

Open in new window


<ul id="image_gallery">
<li><?php echo $gallery_1; ?></li>
<li><?php echo $gallery_2; ?></li>
<li><?php echo $gallery_3; ?></li>
<li><?php echo $gallery_4; ?></li>
<li><?php echo $gallery_5; ?></li>
<li><?php echo $gallery_6; ?></li>
</ul>

Open in new window

Screen-Shot-2013-06-11-at-1.22.4.png
Screen-Shot-2013-06-11-at-1.23.5.png
0
Comment
Question by:JiveMedia
  • 5
  • 4
9 Comments
 
LVL 7

Accepted Solution

by:
Robert Saylor earned 500 total points
ID: 39237770
This should work...

<?php
if ($c->getAttribute('portfolio_image')) {$portfolio_image = '<img src="'.$c->getAttribute('portfolio_image')->getVersion()->getRelativePath().'" width="370" height="350" alt="Savvy Construction Portfolio Image" />';};

for ($i=1; $i < 7; $i++) {
	$val = "gallery_" . $i;
	if ($c->getAttribute('$val')) {$gallery[$i] = '<a href="'.$c->getAttribute('$val')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('$val')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};
}
?>




<ul id="image_gallery">
<?php
for ($i=1; $i < 7; $i++) {
	
	?>
	<li><?php echo $gallery[$i]; ?></li>
	<?php
}
?>
</ul>

Open in new window

0
 

Author Comment

by:JiveMedia
ID: 39237912
Hey rsaylor,

Thanks for the reply. I have added the code above but the images now don't display.
The <ul> and <li> tags in the HTML are generated but are empty.

Any ideas?
0
 
LVL 7

Expert Comment

by:Robert Saylor
ID: 39237942
can you send output HTML?
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

Author Comment

by:JiveMedia
ID: 39237979
<ul id="image_gallery">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
0
 
LVL 7

Expert Comment

by:Robert Saylor
ID: 39238019
At the top add:

$gallery = array();

Under this line:

if ($c->getAttribute('$val')) {$gallery[$i] = '<a href="'.$c->getAttribute('$val')->getVersion()->getRelativePath().'" rel="lightbox"><img src="'.$c->getAttribute('$val')->getVersion()->getRelativePath().'" width="120" height="114" alt="" /></a>';};


add:

print "Test: $gallery[$i]<br>\n";

Let's see if the array is getting created.
0
 

Author Comment

by:JiveMedia
ID: 39239747
Hi, the output of the code as below:

Test: <br>
Test: <br>
Test: <br>
Test: <br>
Test: <br>
Test: <br>
0
 
LVL 7

Expert Comment

by:Robert Saylor
ID: 39239905
Oh take the ' out from $val

Ie: '$val' should be just $val

We are passing a variable now it thinks its a string
0
 

Author Comment

by:JiveMedia
ID: 39239930
Hi rsaylor,

Thanks!!! That worked a treat!
One last question, if i wanted the output to be a little cleaner and not generate empty <li></li> if the user doesn't upload an image for each, how would i go about that?
Say there is 6 file upload options and the user only uploads 3 images. The current code is generating 6 x <li>, when it only needs 3.
0
 
LVL 7

Assisted Solution

by:Robert Saylor
Robert Saylor earned 500 total points
ID: 39239963
You could do this in the bottom part of the code:

<ul id="image_gallery">
<?php
for ($i=1; $i < 7; $i++) {
	
	if ($gallery[$i] != "") {
		print "<li>".$gallery[$i]."</li>";
	}
}
?>
</ul>

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

822 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question