Title: Custom_Fields image sizes
Last modified: October 16, 2018

---

# Custom_Fields image sizes

 *  [forevercurious](https://wordpress.org/support/users/forevercurious/)
 * (@forevercurious)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/)
 * 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](https://wordpress.org/support/users/nko/)
 * (@nko)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10805061)
 * 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.
 *  Thread Starter [forevercurious](https://wordpress.org/support/users/forevercurious/)
 * (@forevercurious)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10805594)
 * Hi nK,
 * Thanks for getting back to me,
 * The website is [https://black-architecture.uk](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](https://wordpress.org/support/users/nko/)
 * (@nko)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10822075)
 * 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/](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.
 *  Thread Starter [forevercurious](https://wordpress.org/support/users/forevercurious/)
 * (@forevercurious)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10834504)
 * 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](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](https://wordpress.org/support/users/nko/)
 * (@nko)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10846060)
 * Hi.
 * Maybe need to add additional margin-left (right) to the images.
 *  Thread Starter [forevercurious](https://wordpress.org/support/users/forevercurious/)
 * (@forevercurious)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10847754)
 * 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](https://wordpress.org/support/users/nko/)
 * (@nko)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10859116)
 * 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.

 * ![](https://ps.w.org/visual-portfolio/assets/icon-256x256.png?rev=2389881)
 * [Visual Portfolio, Photo Gallery & Post Grid](https://wordpress.org/plugins/visual-portfolio/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/visual-portfolio/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/visual-portfolio/)
 * [Active Topics](https://wordpress.org/support/plugin/visual-portfolio/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/visual-portfolio/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/visual-portfolio/reviews/)

## Tags

 * [columns](https://wordpress.org/support/topic-tag/columns/)
 * [custom_fields](https://wordpress.org/support/topic-tag/custom_fields/)

 * 7 replies
 * 2 participants
 * Last reply from: [nK](https://wordpress.org/support/users/nko/)
 * Last activity: [7 years, 7 months ago](https://wordpress.org/support/topic/custom_fields-image-sizes/#post-10859116)
 * Status: not resolved