Tutorial: Coppermine without intermediate image

If you use the Coppermine script to run a photo gallery, you know that an intermediate image is automatically created to show the visitors before the full photo. In time, this intermediate pictures end up eating a lot of space.

In this tutorial I will show you how to disable the intermediate pictures function and edit your Coppermine theme to fit the full picture.

Step 1: First of all , we need to stop Coppermine from creating this intermediate files. So go to Config -> File settings -> Uncheck the option ‘Create intermediate pictures’ -> Click the button ‘Save new configuration’:

Step 2: After completing the step above, the intermediate photos will no longer be used. Hence, if you go to see bigger images in you gallery, you’ll notice that they probably exceed your theme’s width:

To make them fit, go to your theme’s folder -> Open to edit the file style.css -> Add this code:

.display_media .image {
max-width: 100%;
height: auto;
margin-right: 0;
margin-left: 0;
}

Your photo will now fit with your theme. Check out the live demo of Premade #18 to see it in action.

Clear more space on your Coppermine folder

In addition, to save up more disk space, you can also delete the intermediate images already created.

Therefore go to Admin Tools -> Select the option ‘Delete intermediate pictures’ -> Click the button ‘Submit’. Wait until the script finishes deleting all the files:

Let me know below if you have any questions or concerns.

3 responses... add one

I use a free host and I think I don’t have to care about space. I made a test and it’s not cool to load the full picture at first. It’s like put the whole processment on the visit’s hands… sucking his internet’s band. If the person wants to see the full pic, then he’ll click on it. But maybe he won’t want to see the full, but the intermediate image. Anyay, it’s just my thought, i’m seeing it as a user, not webmiss.

Hi! Thanks for using my theme!

In the code from the tutorial
– add it to the very end of the style.css file;
– add !important to the max-width line:

.display_media .image {
max-width: 100%!important;
height: auto;
margin-right: 0;
margin-left: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *