• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 555
  • Last Modified:

Concrete5 Image Attributes

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
JiveMedia
Asked:
JiveMedia
  • 5
  • 4
2 Solutions
 
Robert SaylorSenior DeveloperCommented:
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
 
JiveMediaAuthor Commented:
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
 
Robert SaylorSenior DeveloperCommented:
can you send output HTML?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
JiveMediaAuthor Commented:
<ul id="image_gallery">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
0
 
Robert SaylorSenior DeveloperCommented:
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
 
JiveMediaAuthor Commented:
Hi, the output of the code as below:

Test: <br>
Test: <br>
Test: <br>
Test: <br>
Test: <br>
Test: <br>
0
 
Robert SaylorSenior DeveloperCommented:
Oh take the ' out from $val

Ie: '$val' should be just $val

We are passing a variable now it thinks its a string
0
 
JiveMediaAuthor Commented:
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
 
Robert SaylorSenior DeveloperCommented:
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now