Custom_Fields image sizes

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.

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.

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.

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.