New Landing › How can we help? › Themeforest Theme Support › Flexform › Portfolio instructions/tutorials

Viewing 15 posts - 1 through 15 (of 16 total)
1 2
  • Back to forum
    Posted in: Flexform
  • May 22, 2014 at 10:11 am #76750
    Bitedge
    Member
    Post count: 345

    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

    May 22, 2014 at 11:47 am #76782
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    May 22, 2014 at 11:53 am #76786
    Bitedge
    Member
    Post count: 345

    That link > portfolio > Standard 4 colom

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

    May 22, 2014 at 12:10 pm #76789
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    May 22, 2014 at 12:24 pm #76796
    Bitedge
    Member
    Post count: 345

    Edit: found what I asked for.

    May 22, 2014 at 1:22 pm #76810
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Ok no problem 🙂

    – Kyle

    May 22, 2014 at 2:01 pm #76827
    Bitedge
    Member
    Post count: 345

    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..

    May 22, 2014 at 2:27 pm #76835
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    May 22, 2014 at 2:45 pm #76842
    Bitedge
    Member
    Post count: 345

    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

    May 22, 2014 at 2:51 pm #76844
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    May 22, 2014 at 2:55 pm #76845
    Bitedge
    Member
    Post count: 345

    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)

    May 22, 2014 at 3:01 pm #76848
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    May 22, 2014 at 3:05 pm #76850
    Bitedge
    Member
    Post count: 345

    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?

    May 22, 2014 at 3:17 pm #76856
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    May 22, 2014 at 3:46 pm #76870
    Bitedge
    Member
    Post count: 345

    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?

  • Back to forum
    Posted in: Flexform
Viewing 15 posts - 1 through 15 (of 16 total)
1 2

You must be logged in to reply to this topic.