Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #223721


    I would like to restyle the images that appear on my 3 col front page portfolio.

    I would like to reposition the title for each image and place it in a slightly opaque overlay. But if I try to move it or hide the title bar, the photo jumps up to fill that space, leaving a white blank space at the bottom of its box.

    So I guess I have two questions:
    1. How can I enlarge the photo to fill the box completely (where can I find that in functions.php)
    2. Which selectors control where the title is positioned on the photo?

    I am comfortable enough with CSS to experiment and find the look I like, but I can’t seem to find the right specs for the image, or the correct selectors to monkey with. Thank you!



    Can you create a mockup of what you want to achieve?

    Best regards,


    Hi Josue,

    Here is a mockup, please see the box in the middle of the row.

    Thank you!



    Try adding this code to the Quick CSS:

    .post-title.portfolio-title {
        position: absolute !important;
        width: 66%;
        z-index: 100;
        background: rgba(0,0,0, 0.4) !important;
        bottom: 0;

    Also open js/avia.js and look for line 1199:

    atomH = $this.outerHeight(true);

    Replace it by this:

    atomH = $this.outerHeight(true) - 56;



    Hi Josue,

    Doesn’t seem to work, quite a few things wrong with it. Please check out my site and you will see what happens…

    Like i said, I am looking to get bigger picture windows on the portfolio grid, this seems to have shrunk them down?

    FYI the code in the avia.js wasn’t on line 1199 it was on line 630.

    Thanks for your fast response.



    Hi Josue,

    I attached a screen shot of what is wrong, it now looks like each box in the portfolio grid is shorter, and the titles do not display, they are cut off at the bottom. (Purchase code hidden if logged out) -at-5.54.19-PM.png

    I posted the screen shot because I don’t want my site looking like this while we try to figure out the solution. If you can reference the screen shot, I may have to revert my site back to the old look while I try to figure this out. Are there any other files that control the size of the boxes in the portfolio grid?

    Thank you!



    Hi Tony!

    Please try reverting the changes i proposed to js/avia.js.



    Hi Josue,

    How can I add 56px to the top of the picture box, so that I see more of the picture?

    Right now the box is 308px x 229px. I would like to make it 308 x 285.




    You could try tweaking that part of the code i mentioned in js/avia.js, to add 56 would be:

    atomH = $this.outerHeight(true) + 56;



    Hi Josue,

    I tried that, and when I do, it adds 56px of white space to the bottom of the photo box. It does not make the images any larger.

    See this screen shot… (Purchase code hidden if logged out) -at-9.29.14-PM.png

    The images are still 308px x 229px. Only the box got larger, not the images.

    How can I get the images to fill that extra space? Thanks!



    In your functions.php look for:

    $avia_config['imgSize']['portfolio'] 		 	= array('width'=>465, 'height'=>346);						// images for portfolio entries (2,3,4 column)

    This is what sets the output for your photos. You’ll need to change the height so that the generated thumb is where you want it and then regenerate your images using:



    That did it! Perfect! Thank you Josue and Devin!

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Restyling my front page portfolio and resizing the images’ is closed to new replies.