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

    Hello,

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

    http://www.remcopress.com

    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)
    and
    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!

    #224461

    Hi!

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

    Best regards,
    Josue

    #224544

    Hi Josue,

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

    http://www.remcopress.com/wp-content/uploads/2014/02/screenshot02.jpg

    Thank you!

    #224580

    Hey!

    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;
    

    Cheers! 
    Josue

    #224585

    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…

    http://www.remcopress.com

    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.

    Tony

    #224674

    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.

    http://www.remcopress.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-16-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!

    Tony

    #224683

    Hi Tony!

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

    Regards,
    Josue

    #224714

    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.

    Thanks!

    Tony

    #224728

    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;
    

    Cheers!
    Josue

    #224740

    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…

    http://www.remcopress.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-16-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!

    #225562

    Hi!

    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: http://wordpress.org/extend/plugins/regenerate-thumbnails/

    Cheers!
    Devin

    #227232

    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.