Hello,

There are at least 4 types of portfolio styles. And they all have their respective files. Which one are you using? Please send us a link of your portfolio page so we can give a more precise advice.

Note: Please consider updating your profile data. Read this article for more information.

Best regards!

Hello,

Please go to file wp-content/themes/specular/includes/view/portfolio/loop-grid.php and find these lines:

 <?php }else if($style == 'grayscale'){ ?>
 <div class="portfolio-item mix <?php echo esc_attr($sort_classes) ?> <?php echo esc_attr($extra_class) ?>  <?php echo esc_attr($style) ?>" data-id="<?php echo get_the_ID() ?>">
    <div class="">
    <?php if($item_grid_class == 5){  ?>
         <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port4', 'url')) ?>" alt=""> 
      <?php } ?>
      <?php if($item_grid_class == 3){  ?>
      <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port4', 'url')) ?>" alt="">
      <?php } ?>
     <?php if($item_grid_class == 4){ ?>
       <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port3_grayscale', 'url')) ?>" alt="">
     <?php } ?>
     <?php if($item_grid_class == 6){ ?>
         <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port2_grayscale', 'url')) ?>" alt=""> 
     <?php } ?>
     <?php if($item_grid_class == 12){ ?>
       <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port1', 'url')) ?>" alt="">
     <?php } ?>
         <div class="project">
      <h5><a href="<?php echo $link ?>"><?php echo get_the_title() ?></a></h5>
      <h6><?php echo esc_html($sort_classes) ?></h6>
                                      </div>                  
                               </div>          
                        </div>

Replace with these:

 <?php }else if($style == 'grayscale'){ ?>
     <div class="portfolio-item mix <?php echo esc_attr($sort_classes) ?> <?php echo esc_attr($extra_class) ?>  <?php echo esc_attr($style) ?>" data-id="<?php echo get_the_ID() ?>">
     <div class="">
     <?php if($item_grid_class == 5){  ?>
     <a href="<?php echo $link ?>"> <img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port4', 'url')) ?>" alt=""> </a> 
      <?php } ?>
      <?php if($item_grid_class == 3){  ?>
      <a href="<?php echo $link ?>"><img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port4', 'url')) ?>" alt=""> </a> 
      <?php } ?>
      <?php if($item_grid_class == 4){ ?>
      <a href="<?php echo $link ?>"><img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port3_grayscale', 'url')) ?>" alt=""> </a> 
       <?php } ?>
       <?php if($item_grid_class == 6){ ?>
       <a href="<?php echo $link ?>"><img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port2_grayscale', 'url')) ?>" alt=""> </a> 
        <?php } ?>
        <?php if($item_grid_class == 12){ ?>
        <a href="<?php echo $link ?>"><img src="<?php echo esc_url(codeless_image_by_id(get_post_thumbnail_id(), 'port1', 'url')) ?>" alt=""> </a> 
        <?php } ?>
        <div class="project">
        <h5><a href="<?php echo $link ?>"><?php echo get_the_title() ?></a></h5>
        <h6><?php echo esc_html($sort_classes) ?></h6>
                                            </div> 
                                               
                                 </div>          
                        </div>

Let us know.

Best regards!

Hello I have the same problem, can you help me out?

Hello,

@betulgurcan,
Can you give more details? Did you try the edit above? What portfolio are you using?

Best regards!

Hi I am using codeless portfolio fullwidth, is there a way to do it with custom css? via customizer?

Hello,

Actually we need the style of the portfolio. Like: Grayscale or Overlay or Basic (screenshot). Sorry but this is not a customization that can be done via custom css. You have to edit theme files.

Best regards!

Hello,

@betulgurcan,
You have the same portfolio style as the example above. Read carefully and follow the same instructions as stated above.

Best regards!