Changing individual portfolio item pages « Support Forum | Kriesi.at

Support Forum » Angular

Changing individual portfolio item pages

18 posts from 9 voices

Started 1 year ago by lh3productions
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

lh3productions
Member

Really great template, very pleased with it.

Is there any way of changing the layout of a portfolio item page?

I'm using the template for a music portfolio site (which I know it wasn't designed for, but it far exceeds any audio templates out there) and some portfolio items have a number of audio players embedded or no associated images or videos and there's a major blank space taking up most of the page - example: http://www.lh3productions.com/portfolio-item/handysynth2012/

Many thanks for your help.

Posted 1 year ago #
brobins
Member

+1

I am also looking for a solution to this myself. My own post hasn't received any responses..

Looking forward to finding a solution soon

Thanks,

Ben

Posted 1 year ago #
gobian
Member

I´ve managed to solve that problem by:

In "helper-templates.php" which is the folder "anuglar/includes/" go to the very end of the file and you will see a line of code like this:

the_content(__('Read more →','avia_framework'));

After that line there are 4 "echo "</div>"; lines, the only thing you need to do to use the entire Blank area below the image in the portfolio is to move the line "the_content(__('Read more →','avia_framework'));" below to echo lines. Basically the content will be display outside the div that is creating the right column where the meta fields are display, so you will be able to use the entire page while keeping the metas in place.

Hope it is helpful for someone as it took me quite a while to find out how to do it.

Posted 1 year ago #
Kriesi
Key Master
Hey Guys!

A very easy CSS only way to push the portfolio content bellow the image and make the image/video fulwidth is as follows:

in layout.css search for:

search for
```
.ajax_slide .flex_column.two_third {
min-height: 1px;
}
```
and change it to:
```
.ajax_slide .flex_column.two_third {
min-height: 1px;
width: 100%;
}

.ajax_slide .flex_column.one_third {
margin: 20px 0 0 0;
width: 100%;
}
```
this owuld be a general change of all portfolio items.
however each single portfolio page has a unique body id (open the source code and check the body tag) that you can prepend to the .ajax_slide class.

for example:
```
.postid-44 .ajax_slide .flex_column.one_third {
margin: 20px 0 0 0;
width: 100%;
}
```
If you also want to change the ajaxed version you can use the same id in a slightly idfferent way:
```
.ajax_slide_44 .flex_column.one_third {
margin: 20px 0 0 0;
width: 100%;
}
```
Posted 1 year ago #
brobins
Member

Kriesi, this is great thank you very much.

One thing though,

I would like to arrange / design the portfolio content and not just slap it under the portfolio image in one column on the right.

For me, it would be perfect to arrange it as I have done on my own site (a modified 'Design' theme) See here: http://www.benrobins.com/hsbc-security/

You can see how the 'Information' and 'Credits' bit below the main image is laid out. This is what I would like to achieve with Angular. This would be perfect !

I hope you can help :-)

Thanks,

Posted 1 year ago #
brobins
Member

?

Posted 1 year ago #
brobins
Member

Not even a reply after a week? Not bowled over by the support here guys tbh. Usually so good too :(

Waiting in anticipation !

Posted 1 year ago #
Chris Beard

Hi,

if you could provide a mockup/screenshot of what you'd like to do we can help you move things around. Right now I'm imagining multiple ways of how this page could be rearranged.

Thank you for your patience.

Posted 1 year ago #
brobins
Member

Sure,

Check out two posts up.

___

I would like to arrange / design the portfolio content and not just slap it under the portfolio image in one column on the right.
For me, it would be perfect to arrange it as I have done on my own site (a modified 'Design' theme) See here: http://www.benrobins.com/hsbc-security/
You can see how the 'Information' and 'Credits' bit below the main image is laid out. This is what I would like to achieve with Angular. This would be perfect !
I hope you can help :-)

----=

The goal is to have full width image / video and information below it using the full space rather than just one column.

Maybe the Title and Meta Info on the left and the text content on the right?

My Anugular site is here (http://www.benrobins.com/v02/)

Thank you

Posted 1 year ago #

Chris Beard

Hey,

try adding this to your custom.css

.ajax-portfolio-response-wrapper .two_third {
     width: 100%;
}

.ajax-portfolio-response-wrapper .portfolio-entry {
     width: 100%;
}

.portfolio-entry .portfolio-meta-list {
     height: 100px;
}

.portfolio-entry .portfolio-meta-list ul {
     width: 500px;
}

.portfolio-entry .portfolio-meta-list li {
     float: left;
     width: 30%;
}
.ajax-portfolio-response-wrapper .ajax-portfolio-title{margin-top:30px;}

Of course you can change all the percentages and pixel values to your liking :)

Best regards,
Chris

Posted 1 year ago #

brobins
Member

HI Chris,

Thanks for your help on this matter.

I was just wondering if there would be a way of making these changes respect the responsive nature of the template?

It is important to me that users on Netbooks, iPad etc are all having the same experience as users on a PC screen.

Thanks in advance for any help with this matter.

Posted 1 year ago #
Chris Beard

Hi!

All you can do to increase responsiveness here is change px values to percentages (%).

Best regards,
Chris

Posted 1 year ago #
lomoseb
Member

Hi Chris,

Your tweak work great with portfolio grid but not on individual portfolio post . I change css with Kriesi advice above but no effect.

Thanks

Posted 1 year ago #
Devin
Moderator

Make sure you are changing the css values in the correct files and then saving them to the same exact place on the server. If you have any kind of caching plugins running, turn them off and make sure your not viewing the page with cached css files.

Regards,

Devin

Posted 1 year ago #
lomoseb
Member

Hi Devin,

Check here :
http://mariages.sebastienboudot.fr/portfolio/mariages-2/
No cache plugin, and layout.css modified + custom css from chris...

Thanks for help

Posted 12 months ago #
Devin
Moderator

Hi lomoseb,

That link brings up a 404 page. Do you have another?

Regards,

Devin

Posted 11 months ago #
mila_m
Member

Hi,

I'm trying to do the same thing (have to image display at 100 percent, which in turn would push the credits below). I replaced

.ajax_slide .flex_column.two_third {
min-height: 1px;
}

with

.ajax_slide .flex_column.two_third {
min-height: 1px;
width: 100%;
}

.ajax_slide .flex_column.one_third {
margin: 20px 0 0 0;
width: 100%;
}

.postid-102 .ajax_slide .flex_column.one_third {
margin: 20px 0 0 0;
width: 100%;
}

.postid-402 .ajax_slide .flex_column.one_third {
margin: 20px 0 0 0;
width: 100%;
}

and nothing seems to be happening. I reset my browser and emptied the cache but nothing.

Any advice?
Many thanks

Posted 8 months ago #
Nick
Moderator

Hi,

This ticket is very old and convoluted with multiple questions. Please provide a URl or a snapshot showing what you are looking to do.

Thanks,

Nick

Posted 8 months ago #