Masonry layout on Workality Lite portfolio

  • Unknown's avatar
    madquake · Member ·

    Hello everyone.
    I’m quite new of WordPress and I recently decided to update my portfolio website created using the Workality Lite theme. It’s literally perfect but for one single small thing that I’d like to change.

    The home page of my site shows a grid of images that are links to my works. Now the grid is automatically generated. I in fact created a portfolio filling the “work” section in the backend. In the home page all I need to do is selecting the voice “work” under the drop down menu “template”.

    All I wish to do is re organizing the page in a way that the images are shown in different sizes, the texts appear “on mouse over” over the images.

    I tried to think about different solutions, but nothing seems work :(

    • I thought I could use a widget or a plugin to show the images in a masonry grid, but unfortunately no images are shown in the backend page.
    • I thought I could use a portfolio plugin but all those I found don’t support some mandatory features that I need:
      a. Filtrability [Possibility to add tags to my projects and show just what the user wants to see].
      b. Generation of new pages once each thumbnail is clicked [usually all what they do is just opening a popup window with one single image].
      c. Possibility to show on each page dedicated to one of my works multiple images together with multiple embedded videos.

      • d. And of course the masonry grid for the portfolio page.

    • I finally thought I could use a child theme and tweak the template depending on my needs. Here I encountered problems as I never did something like this. I started to take a look at the css [I already have a child theme with some tweaks at the css] but I noticed that the gallery is organized in a very strange way. Basically there is a big div that contains four divs as big as one of the four columns that compose the page. Inside each column a div contains each link to the works. Each link is divided into image and text each of them contained in a div. [forgive me if I make this more complicated than it’s in reality]. Moral… if I try to overlap the text on the image using the zindex attribute the images overlap themselves without an apparent reason.

    Can someone address me somewhere I can start looking how to do what I want? Or maybe if someone can help me with the code I’d be forever grateful. Newbies never know where to begin.

    How would you proceed to achieve something like this?
    Thank you in advance for your help.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @madquake, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme author directly or ask in the volunteer-based WordPress.org Themes and Templates forum.

    For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

    The differences between WordPress.com and WordPress.org.

  • The topic ‘Masonry layout on Workality Lite portfolio’ is closed to new replies.