Add slideshow underneath Portfolio Item page « Support Forum | Kriesi.at

Support Forum » Angular

Add slideshow underneath Portfolio Item page

10 posts from 2 voices

Started 3 months ago by cbohaty
Latest reply from cbohaty
This topic is closed
This topic is not a support question

Tags:

gallery portfolio page

cbohaty
Member

Hello,

I was wondering how I would add a image gallery or slideshow underneath the content of an "in page" portfolio page.

http://clintbohaty.com/

On my website, click on the item "Andrew Allison Interview". I would like to add an image gallery underneath the video. Preferably one that uses a lightbox style viewing.

This will be used to display stills from the video above.

Please let me know where I would go to add this gallery. I tried adding it within the portfolio item description, but it just ended up extending the right hand side, and not going underneath.

A simular effect can be seen here: http://sarwiya.com/

As you can see on my website right now - I only have a 6 image gallery in the description (which doesnt look to bad!). If this is how I need to keep an "in page" portfolio item - is there any way to edit the portfolio items own page?

click on the "project info" link on the Andrew Allison Interview portfolio item.

I would like to be able to add content below the interview/gallery but above the "related entries section."

Any help would be great!

Posted 3 months ago #

Devin
Moderator

Hey cbohaty,

You will need to make the portfolio template spit out the individual portfolio content from the visual editor below the slideshow instead of next to it.

To do this, open up your theme files and then includes>helper-templates.php. Search for inner_entry to find the div that contains the ajax portfolio.

Replace this section:

echo "<div class='inner_slide'>";

				echo "<div class='flex_column two_third first'>";

				if(!post_password_required())
				{
				echo $dataHTML;
				}

				echo "</div>";

				echo "<div class='portfolio-entry one_third'>";
				echo "<h1 class='ajax-portfolio-title'>".get_the_title()."</h1>";

				echo "<div class='entry-content'>";
				$meta = avia_portfolio_meta($id);
				if($meta)
				{
					echo avia_advanced_hr(false, 'small');
					echo $meta;
				}
				echo avia_advanced_hr(false, 'small');
				the_content(__('Read more  &rarr;','avia_framework'));
				echo "</div>";

				echo "</div>";

			echo "</div>";

With this (just moving the line and the_content to a new section below the content and giving it a container)

echo "<div class='inner_slide'>";

				echo "<div class='flex_column two_third first'>";

				if(!post_password_required())
				{
				echo $dataHTML;
				}

				echo "</div>";

				echo "<div class='portfolio-entry one_third'>";
				echo "<h1 class='ajax-portfolio-title'>".get_the_title()."</h1>";

				echo "<div class='entry-content'>";
				$meta = avia_portfolio_meta($id);
				if($meta)
				{
					echo avia_advanced_hr(false, 'small');
					echo $meta;
				}

				echo "</div>";

				echo "</div>";

				echo "<div class='entry-content twelve units'>";
				echo avia_advanced_hr(false, 'small');
				the_content(__('Read more  &rarr;','avia_framework'));
				echo "</div>"; 

			echo "</div>";

Now anything int he visual editor will be below the slideshow and meta contents.

Regards,

Devin

Posted 3 months ago #

cbohaty
Member

Hi Devin!

Thanks for the help. The new layout looks great! One issue though: The thumbnails are no longer using lightbox - instead they link to a seperate page with the image. Anyway to enable lightbox with these images?

at clintbohaty.com you can see the updated layout/issue when you click the portfolio item "Outdoor Nations - Follow".

Posted 3 months ago #
cbohaty
Member

Scratch that - I found the code that was throwing off the galleries. Some were missing "link="file"" from their code line.

Posted 3 months ago #
cbohaty
Member

Are there any options to change the style of the lightbox (or colorbox - whichever is native)?

Posted 3 months ago #
Devin
Moderator

Open the following in the theme files: js>prettyPhoto>js>jquery.prettyPhoto.js and look for
theme:'pp_default'

The other themes are: light_rounded dark_rounded light_square dark_square facebook .

You just replace the pp_default with one of the others and save the file.

Regards,

Devin

Posted 3 months ago #
cbohaty
Member

Thanks again Devin!

I just had another question pop up. How can I change the "hover-over" effect?

Like on this website: http://sarwiya.com/

Posted 3 months ago #
cbohaty
Member

Hi Devin,
I just ran into an issue with the code you gave me for having my image gallery fall underneath the video within my Portfolio Item. It seems like the gallery section is still falling along the right hand side on the Portfolio Items individual page.

You can see what I'm talking about here: http://clintbohaty.com/ourwork/schwing-bioset/

Thanks Devin!

Posted 3 months ago #

Devin
Moderator

Yes, the change was only for the ajax portfolio. You'll need to do the same thing in the includes>loop-portfolio-single.php.

Replace:

<div class='post-entry'>

			<div class="entry-content">	

				<div class="eight units alpha min_height_1">

					<?php echo $slideHtml; ?>
		        	<div class='post_nav extralight-border'>
						<div class='previous_post_link_align'>
							<?php previous_post_link('<span class="previous_post_link">&larr; %link </span><span class="post_link_text">'.__('(previous entry)')."</span>"); ?>
						</div>
						<div class='next_post_link_align'>
							<?php next_post_link('<span class="next_post_link"><span class="post_link_text">'.__('(next entry)').'</span> %link &rarr;</span>'); ?>
						</div>
					</div> <!-- end navigation -->
				</div>

				<?php 

				echo "<div class='four units'>";
				echo "<h1 class='post-title portfolio-single-post-title'>".get_the_title()."</h1>";

				$meta = avia_portfolio_meta(get_the_ID());
				if($meta)
				{
					echo avia_advanced_hr(false, 'small');
					echo $meta;
				}

				//display the actual post content
				echo avia_advanced_hr(false, 'small');
				the_content(__('Read more  &rarr;','avia_framework')); 

			 ?>	

				</div>	<!-- end eight units -->	

			</div>

with

<div class='post-entry'>

			<div class="entry-content">	

				<div class="eight units alpha min_height_1">

					<?php echo $slideHtml; ?>
		        	<div class='post_nav extralight-border'>
						<div class='previous_post_link_align'>
							<?php previous_post_link('<span class="previous_post_link">&larr; %link </span><span class="post_link_text">'.__('(previous entry)')."</span>"); ?>
						</div>
						<div class='next_post_link_align'>
							<?php next_post_link('<span class="next_post_link"><span class="post_link_text">'.__('(next entry)').'</span> %link &rarr;</span>'); ?>
						</div>
					</div> <!-- end navigation -->
				</div>

				<?php 

				echo "<div class='four units'>";
				echo "<h1 class='post-title portfolio-single-post-title'>".get_the_title()."</h1>";

				$meta = avia_portfolio_meta(get_the_ID());
				if($meta)
				{
					echo avia_advanced_hr(false, 'small');
					echo $meta;
				}

			 ?>	

				</div>	<!-- end eight units -->
				<div class="twelve units">
                  <?php
                    //display the actual post content
				    echo avia_advanced_hr(false, 'small');
				    the_content(__('Read more  &rarr;','avia_framework'));
                  ?>
				</div>
			</div>

For the hover effect, you would need to either contact that website or hire a freelance developer. Its beyond what we can help with through support.

Posted 3 months ago #

cbohaty
Member

Thanks again Devin! You guys are great!

Posted 3 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Add slideshow underneath Portfolio Item page

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…