Support Center Visit Demo License manager Buy @ envato

Is it possible to have Portfolio Exposure style in 3-column masonry grid?

stacylimjystacylimjy
in Portfolio
Hi,

I understand that the column settings does not does not apply for the exposure style. Is there any way that I can produce a 3-column layout for exposure instead of filling the entire full-width? I wish to have the styling of exposure but in a 3-col grid.

Thank you.

Comments

  • PabloPablo
    Hello,
    Sadly, it will not be possible - this layout is hardcoded to display in single line.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • stacylimjystacylimjy
    Hi Pablo,

    Thanks for your clarification. I'm trying to achieve a layout similar to this design for my portfolio items:


    Is there any way I can achieve this using this theme? Appreciate if you can advise.
  • stacylimjystacylimjy
    Hi,

    I have attempted to create a similar layout manually instead of the Portfolio element. Is there a way for me to ensure that the height of a row is always fixed, regardless of the number of images I add inside the row? I have tried setting the row to equal heights, but to no avail.

    Please refer to my screenshots for a clearer explanation:

    You can visit the following URL to access my site: https://www.origgin.com/dietrics/products/

    Basically, I want to ensure the 3 images have the same height, with 1 image having the full height, and the other 2 images having half the height to look like the earlier screenshot that I have shared with you in my previous comment.

    Thanks
  • PabloPablo
    Well, you have to use the "Equal Height of Wraps"
    The equal height of wraps is used to position elements on: top, middle
    or bottom in wraps. In order to achieve this you need to:
    1. Edit your page, and go to the muffin builder. Edit a section and
    under the advanced>style select 'equal height of wraps'. See screens:
    http://prntscr.com/f40hvn
    http://prntscr.com/f40kh0
    2. Now edit each wrap in that section and set the desired vertical
    align(top, middle or bottom). See screens:
    http://prntscr.com/f40kvr
    http://prntscr.com/f40lhl

    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • stacylimjystacylimjy
    edited June 2020
    I have followed your instructions, but I can't seem to remove the white paddings around the larger image. Have set the vertical align to middle but it looks like the screenshot I've attached in the same dropbox folder:


    How can I ensure that the background image height is fixed?
  • PabloPablo
    As you can see from the screenshot here: https://prnt.sc/t0pnpm
    The wrap is having the same height as wrap on the right - you should insert the background image to the wrap to make it equal.

    But, when you are using two images on the right, it will be not available to achieve.
    Why did you not use the "Blog Teaser" feature instead: https://themes.muffingroup.com/be/theme/shortcodes/loops/#blogteaser

    It's exactly what you are looking for ;)
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • stacylimjystacylimjy
    edited June 2020
    If I insert the background image to the wrap, does it mean I will not be able to retain the hover effect where there is a dark overlay?

    For the blog teaser feature, am I able to display my portfolio items instead of blog posts? Or is that not possible? Even if I do a workaround by creating a separate posts category, I'm also unable to change the url slug from /blog to /portfolio right?
  • PabloPablo
    No, you will not be able without the CSS code.
    About the blog teaser, you will have to migrate the portfolio items to blog, and yes, you are able to set the slug by changing the name of the main blog page to other, portfolio for example.

    Just set it as a main blog page as in basic wordpress.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • stacylimjystacylimjy
    Sorry, I'm not quite clear what you meant by the setting of slug.

    I wish to have both 'News' (i.e. traditional WP posts) as well as 'Products' (i.e. traditional WP portfolio). If I were to migrate my portfolio items to blog, will I be able to still achieve the following slug convention for news and products respectively?

    News articles: www.mywebsite.com/news/article-1
    Products: www.mywebsite.com/products/product-1

    If this is possible, please advise me. Thanks!
  • BryanBryan
    Yes, sure.
    1.Portfolio - go to them options>blog,portfolio&shop>portfolio and you will find a slug change option for permalinks to change the main page and the single portfolio names.
    2.Blog - Blog permalinks are default WordPress ones. You can change this in wordpress>settings>permalinks.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • stacylimjystacylimjy
    Hi Bryan,

    I think you misunderstood my question. I have followed Pablo's recommendation to migrate my products (i.e. portfolio items) to posts instead, so that I can achieve the Blog Teaser layout which I want. 

    Now that both my products and news are both in Posts, as separate categories, am I able to have different url slug convention for each respective category?
  • stacylimjystacylimjy
    I managed to figure it out! Just had to change the url to custom url using the following:

    /%category%/%postname%/

    Thanks!
Sign In or Register to comment.