Support » Plugin: Visual Portfolio » Custom_Fields image sizes

  • forevercurious

    (@forevercurious)


    Hi, Using your plug-in for a two column masonry layout, which works great.

    Issue is i use custom_fields to be able to select different featured image sizes (xs, s, m, l, default). i can get the custom_field to appear on the layout pages to select the image size, but struggling to get the image on the front end to display as required, as it shows the default size the plug-in generates.

    Basically the custom_field changes the width of the images, so as you scroll down the images are set from the centre, but the widths to the left and right vary.

    any advice or work around, thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author nK

    (@nko)

    Hi.

    Could you show me the code example with your custom field and how you use it to output the images? An online example also will be helpful.

    Hi nK,

    Thanks for getting back to me,

    The website is https://black-architecture.uk still under construction!

    The home page, below the landing image i have used the custom fields in a blog module to change the images sizes from the standard size (I am using Divi theme), this is how i would like the images to appear using your plug-in on the Architecture page

    On the Architecture page, ignore the top section of images, trying to work on something within Divi, the following two section are using your plugin, the first is using your portfolio layouts pulling in the posts, the second is using your portfolio items and adding in to the portfolio layout

    I don’t mind using either option above it we can get the custom_field images to work.

    I am using ACF (advanced custom fields) plug-in

    A code example i used for the blog images –

    css
    /*featured image – XS */
    .cf_article-2-column .et_pb_post.post_xs .entry-featured-image-url img {
    max-width: 55%;
    width: 55%;
    min-width: 55%;
    }

    And in ACF the rules – Post Types is Equal to Post

    For your plugin, i am not sure what to target the above css, to change the image size and in ACF i have the following rule options:

    Post Type is Equal to Portfolio Item
    Post Type is Equal to Portfolio Layout

    hope above is clear

    thank you.

    Plugin Author nK

    (@nko)

    Hi.

    If I correctly understand you, you have ACF field in each post and you may set the size. But Visual Portfolio doesn’t know about your field, so you need to change default template and let them know :). How to overwrite plugin templates in your theme: https://wp.nkdev.info/free-visual-portfolio/documentation/developers/changing-default-templates-and-styles/

    You need to overwrite this template: visual-portfolio/templates/items-list/items-style/image.php. Example:

    And then you will be able to add custom styles. Example:

    .vp-portfolio .vp-portfolio__item-img-xs img {
        width: 55%;
    }
    

    Regards, nK.

    Hi nK,

    Brilliant the above worked, thank you!

    One last thing, i’ve been trying to work out how to change the position of the columns.

    I have the two columns, 50% each, I need the first column to be right aligned and the second left aligned.

    If you see my website, you can see on the home page, what i am trying to achieve

    https://black-architecture.uk

    As you can see on the architecture page, i have the images sized as required, but just need them realigned,

    Most grateful for your further assistance

    thank you

    Tony.

    Plugin Author nK

    (@nko)

    Hi.

    Maybe need to add additional margin-left (right) to the images.

    Hi nK,

    That will not work, as any css added to the images effects all of them and as i dont know what image size is going to be used i would need to adjust the margin for each image manually.

    I need to be able to target one column of images(left column) to align the images to the right.

    I cannot see/ work out how your column structure works to target one column. Is it possible to add a class or id to a column so i can target it?

    Thanks

    Tony.

    Plugin Author nK

    (@nko)

    There are no columns, all blocks placed on the same level. Blocks width changed depending on screen size and Masonry plugin move these blocks to fit available space.

    You can write custom CSS and find each first and each second blocks. Something like this:

    .vp-portfolio__item-wrap:nth-of-type(2n+1) {
        opacity: .1;
    }
    .vp-portfolio__item-wrap:nth-of-type(2n+2) {
        opacity: .7;
    }
    

    Don’t forget to change this code on the smaller screens, when 2 columns will turn to 1.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Custom_Fields image sizes’ is closed to new replies.