-
Hello!
This is a fairly technical question (sorry!). I’ve been asked to change the size of the images in the slider on a Minimatica home page. Basically the user wants them larger. So…
I can find what I think are the relevant CSS styles in “style.css”. At any rate, I can increase the height of the slider itself by 200 pixels, and the various containers inside as well (just changing “height:410px;” and “height:400px;” wherever I found them). Also dropping the navigation arrows by 100 pixels to compensate. So…
The “boxes” change pretty much the way I expect them to. The images themselves, while they center themselves nicely in the larger boxes, are still the same size.
As far as I can tell images measuring 600×400 are loaded within DIVs that starts like this:
<div id="post-207" class="post-207...
where “207” changes depending on the image. Possibly somewhere in the long list of CSS classes is one that fixes image sizes, but so far I haven’t found one.
Looking through the directories on the host website I find numerous copies of every uploaded image, the original and a number of smaller versions suffixed with a size, such as “150×150” or “600×400”. Mmm. The ones with “600×400” suffixes are presumably the ones that are being loaded into the homepage slider, as “400” is the original height.
So at this point I’m guessing that somewhere in the Minimatica theme is code that generates the alternative sizes from images uploaded by users, and somewhere else is the code that chooses the “600×400” size for the slider.
Because so much of a WordPress page is automagically generated by PHP, it doesn’t seem that creating images of the desired larger size by hand and trying to hard-code the slider to use them would work. Is there some way to locate the code (if any) that creates the multiple differently sized copies of an uploaded image and add one new size? And if so, is there way to “tell” the slider to use that new size?
Hey, I had this same problem with their Esplanade theme. I wanted a nice big slider image on the home page so I set the css to change the slider to 900 x 300. The problem was that regardless of the size of the image I uploaded, the theme was cropping it to 640 x 395 and then stretching it out to comply with my css.
This resizing is happening in one of the php files inside of your theme folder. Mine was called functions.php and I bet it’s the same in minimatica. Save an original version of this file, for your own sanity! Then in a copy of the file, find this section of code.
// Add support for post thumbnails and custom image sizes specific to theme locations
add_theme_support( 'post-thumbnails', array( 'post' ) );
add_image_size( 'slider-thumb', 600, 395, 1 );
add_image_size( 'blog-thumb', 268, 200, 1 );
add_image_size( 'teaser-thumb', 310, 190, 1 );
add_image_size( 'gallery-thumb', 100, 100, 1 );
add_image_size( 'video-thumb', 640, 395, 1 );
add_image_size( 'attachment-thumb', 700, 9999 ); // no crop flag, unlimited heightFor my purposes, I changed
add_image_size( 'slider-thumb', 900, 395, 1 );Please note that this will affect every image in your slider. If you change the size for ‘blog-thumb’ for example, it will change the default cropping for every single blog thumbnail, so use this wisely! If you have several thumbnail images that are all huge, this can really slow down you load time, too.
The other thing to note, you will have to delete and re-upload all of the images that you want to take advantage of this resizing. This function occurs when you upload the image, so it will not affect anything previously uploaded.
Best of luck! Let us know how it goes!
Hi, you are right, in ‘functions.php’ there is this code in the function ‘minimatica_theme_setup()’:
// Add support for Post Formats
add_theme_support( 'post-formats', array( 'image', 'gallery', 'video', 'audio', 'aside', 'link' ) );
// Add support for post formats and custom image sizes specific to theme locations
add_theme_support( 'post-thumbnails', array( 'post' ) );
add_image_size( 'slider-thumb', 600, 400, 1 );
add_image_size( 'homepage-thumb', 688, 230, 1 );
add_image_size( 'gallery-thumb', 200, 200, 1 );
add_image_size( 'video-thumb', 700, 444, 1 );
add_image_size( 'single-thumb', 460, 348 );
add_image_size( 'attachment-thumb', 688, 9999 ); // no crop flag, unlimited height
By changing the ‘slider-thumb’ size to 600×600 from 600×400 and uploading the original images again, the slider displays them in the full extent of the now-200-pixel-higher boxes (thanks to the changes made earlier to several entries in ‘style.css’).
Of course a 600×600 image is square, and now that the requester has seen the result has decided that’s not what she really wants after all. Ain’t it always the way…?
I’ve tried to make a similar adjustment to the width in both ‘functions.php’ and ‘style.css’. I can set the images to 900×600 (ie., again a 3:2 ratio) and the display boxes likewise to 900 pixels wide, but the result is not as successful as desired. Text displayed over the images is cut off at the right edge rather than wrapping, for instance. Perhaps the slider itself is not wide enough to show a 900 pixel wide box and the three “undisplayed” boxes (whatever width they are) at the same time.
You must be logged in to reply to this topic.