Portfolio instructions/tutorials

[Bitedge]

Any instructions/tutorials of how to set up portfolio pages somthing like this?

http://themeforest.net/item/flexform-retina-responsive-multipurpose-theme/full_screen_preview/4258755

Thanks

[Kyle – SUPPORT]

Hi

Please remove the themeforest frame so that you can send me the correct link to the page, that link just opens up the demo (homepage) as it is in an iframe

– Kyle

[Bitedge]

That link > portfolio > Standard 4 colom

But I imagine any tutorial/instructions that exist would cover using the portfolio features in general anyway

[Kyle – SUPPORT]

You can view instructions in the documentation. To add a 4 col portfolio you need to create a page, then add the ‘portfolio’ page builder asset to your page, then click the pen icon to open the settings and set to 4 col

– Kyle

[Bitedge]

Edit: found what I asked for.

[Kyle – SUPPORT]

Ok no problem 🙂

– Kyle

[Bitedge]

So what I want to do is set out a page to display my sites best pages like the 4 column standard portfolio page layout does for portfolio itmes. I have now worked out how to do that by adding the ‘portfolio’ page builder asset, selecting a category to display and then making portfolio items and adding them to that category. But. I don’t actually want to link to or create any portfolio items that are separate pages like

http://bitcoin-betting-guide.com/?portfolio=overround-and-probability-calculator

I just want to use the 4 column standard portfolio layout on one page to display my best pages and each items thumbnail and title will just link to the pages url like

http://bitcoin-betting-guide.com/overround-and-probability-calculator/

If that is not making sence I have made a dummy version that might make it clearer

http://bitcoin-betting-guide.com/3234-2/?preview=true

I can set the thumbnail to link to the real page url but I don’t like the link icon that comes when you hover over the thumbnail instead of the play icon and I cant see how to make the item title link to the real URL. A work around is to 301 redirect

http://bitcoin-betting-guide.com/?portfolio=overround-and-probability-calculator
to
http://bitcoin-betting-guide.com/overround-and-probability-calculator/

But I would rather not have all the website bloat and redirects. Also it seems the items can only display in the order they are created. I need to be able to arrange the display order changing items positions as I like.

So what do you recommend? I think the best thing would be if we can find the HTML of the 4 column standard portfolio layout then I can copy that into the text editor and add the thumbnails and text per item..

[Kyle – SUPPORT]

Hi

I think the easiest option would be to set the thumbnail to link to the page instead of the portfolio item. Or even easier, just use the single image asset instead of the portfolio, and set the image to link to the page

– Kyle

[Bitedge]

Yah it will be best if I just rebuild the 4 column standard portfolio page layout separately.

In order to replicate the a 4 column standard portfolio page we

– set four columns
– add a square image to each clomm, center it, add link
– Add the item titles as H4 text, centre it, add link
– Add the subtitles as paragraph text, centre it

(all in standard editor not swift page builder)

I did that it it looks great! So the only thing we are missing that I need your help with is how to animate the thumbnails so they behave in the same way they do for items on the portfolio page. On hover they zoom in, get a red overlay and a play icon. How to do?

Thanks

[Kyle – SUPPORT]

Hi

I think you have way overcomplicated this, you could use the page builder to add 4 columns, in each column add the single image asset and text block for your description. This will automatically have the hover

– Kyle

[Bitedge]

How do I get the hover? When I go

swift page builder > choose elements > single image

There is no hover effect (that asset is not functioning well also when I set full width no and light box yes, the image goes full width and has no light box)

[Kyle – SUPPORT]

Ahh I think that is only on Dante. Ok use your method, however you can’t have the hover effect as it will not contain the correct code

– Kyle

[Bitedge]

We can have the hover effect we just have to figure out and add the code now.I mean the code does exist in the theme as it is already applies to images in the portfolio display. how can we apply it to individual images? make a custom class?

[Kyle – SUPPORT]

Here is the html for a portfolio item:

<figure>
<a class="link-to-post" href="http://flexform.swiftideas.net/?portfolio=sazzi">
<div class="overlay"><div class="thumb-info">
<i class="icon-chevron-right"></i>
</div></div>
<img width="420" height="315" alt="Page Builder Post Page 1" src="http://flexform.swiftideas.net/wp-content/uploads/2012/11/sazzi-420x315.jpg">
</a>
</figure>

Adding an image via the wordpress editor will not create the same html so it is not a simple as you think to add the overlay

– Kyle

[Bitedge]

That only gets the red overly not the play icon or the zoom… and even with those the thing is how to apply them to an image?