1. Home
  2. Docs
  3. Popcorn
  4. Customization & Chil...
  5. Image Size

Image Size

In order to change add_image_size() of theme defaults (popcorn-child/functions.php):


<?php

//Change default video thumbnail size in core similar to hentaifox.com with css aspect-ratio: 2 / 3
add_action( 'after_setup_theme', 'popcorn_child_theme_image_size', 20 );
function popcorn_child_theme_image_size() {
remove_image_size( 'thumb-video' );
  add_image_size('thumb-video', 240, 340, true);
  //you can change add such as below theme defaults:
  //add_image_size('forum-icon', 64, 64, true);
  //add_image_size('model_profile', 120, 170, array( 'center', 'top' ) );
  //add_image_size('model_profile_large', 160, 260, array( 'center', 'top' ) );
  //add_image_size('category_image', 250, 140, array( 'center' ) );
}
Above function will crop images vertically so you will need also a css code to change thumbnail aspect-ratio: read more about aspect-ratio property
.thumb-view .thcovering-video img, #rotator img {
    aspect-ratio: 2 / 3;
}
Notice: If you do this job on an active website with images posted in the past you have to regenerate images with this plugin

Changing number of columns of video previews in popcorn is too easy:


.videos {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

Simply change the number 5 which is default to x number you wish and you will get x columns on the frontend.


Change margin between previews:


Space between preview images by default is 1px you can give to .videos class a grid-gap command and go.

.videos {
    grid-gap: 10px !important;
}

 

INFO: CSS code goes to theme settings panel Additional Css section that saves in database or directly in popcorn-child/style.css file, you have to clear all existing caches like cloud flare, plugin or browser history.

Was this article helpful to you? No Yes

How can we help?