Solved

Concrete5 Image Attributes

Posted on 2013-06-10
9
528 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 6

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 6

Expert Comment

by:Robert Saylor
ID: 39237942
can you send output HTML?
0
 

Author Comment

by:JiveMedia
ID: 39237979
<ul id="image_gallery">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 6

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 6

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 6

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

708 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now