Change variable

I have the variable $file_path.

This $file_path currently holds the value of image1.jpg
How could I change the $file_path variable to image1_thumb.jpg ?

I was trying something like add a string to it, but I first need to extract and move the extentsion first…
$file_path_thumb = $file_path . "_thumb.jpg"
But this probably will result in image1.jpg_thumb.jpg

How can change this properly and correct?

Well, this is a bit tricky, but, I will attempt to explain. First, if it is always a .jpg file, you can just remove the extension and add the rest as needed. But, if the file type can be other possible ones, then, you will need to keep it and add it back in at the end.
Therefore, the first part would be to get the file name (you called it file_path, but, the example is just a filename!) by taking off the extension. You can do that like this:
$filename = substr($file_path, 0, strlen($file_path-4)); // This gets just the filename minus the extenstion.
Then, you can you can add it all back in this way:
$file_path_thumb = $filename . “_thumb.jpg”;

I think this is what you are needing. (You can do it all in one command if you wish, but, easier to read as two lines.) This example is if the file is always a jpg. If it can be other extensions then I can give you a way to keep the extension.

I personally do the following and it works for me -

$large = $_FILES['file']['tmp_name'];
$thumb = $_FILES['file']['tmp_name'];

then inside a function:

function myFunction(&$data, $uploadedFile, $dirPath = "assets/large/", $preEXT = 'img-', $newImageWidth = IMAGE_WIDTH, $newImageHeight = IMAGE_HEIGHT) {
            $sourceProperties = getimagesize($uploadedFile);
            $newFileName = time();
            $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
            
            if ($dirPath === "assets/large/") {
                $data['path'] = $dirPath . $preEXT . $newFileName . '.' . $ext;
            } else {
                $data['thumb_path'] = $dirPath . $preEXT . $newFileName . '.' . $ext;
            }
        $imageType = $sourceProperties[2];
        switch ($imageType) {


            case IMAGETYPE_PNG:
                $imageSrc = imagecreatefrompng($uploadedFile);
                $tmp = imageResize($imageSrc, $sourceProperties[0], $sourceProperties[1], $newImageWidth, $newImageHeight);
                imagepng($tmp, $dirPath . $preEXT . $newFileName . '.' . $ext);
                break;

            case IMAGETYPE_JPEG:
                $imageSrc = imagecreatefromjpeg($uploadedFile);

                $tmp = imageResize($imageSrc, $sourceProperties[0], $sourceProperties[1], $newImageWidth, $newImageHeight);

                imagejpeg($tmp, $dirPath . $preEXT . $newFileName . '.' . $ext);
                break;

            case IMAGETYPE_GIF:
                $imageSrc = imagecreatefromgif($uploadedFile);
                $tmp = imageResize($imageSrc, $sourceProperties[0], $sourceProperties[1], $newImageWidth, $newImageHeight);
                imagegif($tmp, $dirPath . $preEXT . $newFileName . '.' . $ext);
                break;

            default:
                echo "Invalid Image type.";
                exit;
        }

        return true;
    }

the function call:

$saveStatus = myFunction($data, $thumb, 'assets/thumbnails/', 'thumb-', 600, 400);

Strider, did you post this to the wrong page? Wasn’t that for the other post about changing file sizes?
This one was just about a simple filename change… Ooops?

The function pathinfo can help you here.

$file_path = 'image1.jpg';
$path_parts = pathinfo($file_path);
/**
 * $path_parts will now look something like:
 * Array (
 *   [dirname] => .
 *   [basename] => image1.png
 *   [extension] => png
 *   [filename] => image1
 * )
 */
$thumb_path = $path_parts['filename'] . '_thumb.' . $path_parts['extension'];

$thumb_path will now be set to image1_thumb.jpg.

1 Like

Thank you all for replying.

I created a working script that loads in all the images automatically.

<div id="mygallery">
			<?php
        $folder_path = 'images/full/'; //image's folder path
        $num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
        $folder = opendir($folder_path);
        if($num_files > 0)
        {
        	while(false !== ($file = readdir($folder))) 
        	{

        		$file_path = $folder_path.$file;
        		$file_path_thumb = $folder_path.$thumb;
        		$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
        		$files = substr($file, 0, strrpos($file, '.'));
        		if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
        		{
        			?>


        			<a data-fancybox="gallery" href="<?php echo $file_path; ?>"><img src="images/thumb/<?php echo $files . "_thumb.". $extension; ?>"></a>


        			<?php
        		}
        	}
        }
        else
        {
        	echo "the folder was empty !";
        }
        closedir($folder);

        ?>
    </div>

This PHP is in #mygallery for use in the justifiedGallery.js so the images are loaded in all
responsive and clean next to each other.

Two problems that are happening now are that the images are being showed too early,
because thejustifiedGallery.js is too late and jumps in 1 sec after page reload so the user will
see the image stacked below each other for a short time before they get in line.
The javascript is at the bottom of the page and called right before the body end tag.

<script>
    $(document).ready(function(){
        $('#mygallery').justifiedGallery({
         lastRow : 'center', 
         rowHeight : 170, 
         margins : 4,
         border: 3,
         randomize: true
     });
        $(".menuButton").click(function(){
            $("#main-navbar").slideToggle();
        });
    });
</script>

The second problem is a weird one. I can click all the images and they open in fancybox perfectly.
But, if I click around my image gallery, sometimes I get the message: the requested image could not be loaded, please try again later. Another try, results in a perfect opening image…

So, is there something wrong with my PHP maybe? If so, what could this be?

Javascript, including the Jquery you are using are all handled CLIENT-SIDE. Therefore, they might act differently on different machines. But, if you need the JS/Jquery code to delay, just add a delay in the script. You could delay it a second or two. To do that, you can put all your code into a “timeout” funciton. Here is a five second delay as an example:

setTimeout(
  function() 
  {
    //do something special after a 5 second delay...
  }, 5000);

As far as the second problem goes, there must be a click function in your thejustifedgallery.js that checks for a click. You would need to alter that to just work inside your gallery display only. My guess without looking at it, is there is a click function similar to your $(".menuButton").click() code, but, that points to the DIV that your gallery is placed into. So, you would need to alter that click pointer to not point at the div, but, just the thumbnails instead. Hope that helps…

Thank you.
I managed to fix the too early problem eventually with a display: none on the css.
Then in the script:

$(document).ready(function(){
        $('#mygallery').justifiedGallery({
         lastRow : 'center', 
         rowHeight : 130, 
         margins : 4,
         border: 3,
         randomize: true
     });
        $(".menuButton").click(function(){
            $("#main-navbar").slideToggle();
        });
        $("#mygallery").css("display", "block");
    });

The other problem still is there, and I cannot find anything to solve it unfortunately…
Thanks for helping!

I view it as one-down, one-to-go! Ha!

So, the second problem is when you click outside the thumbnail. Most likely, you just need to alter the click pointer to the class of of the thumbnail instead of the box they are in. So, let’s say you have a div or box of some sort with the thumbnails inside of it. The .click() function is pointing to the outside item. You need to change that to the class or id of the thumbnails.
< div class=thumbnails> <---- currently click() is pointing here!
< img class=“thumbnail” /> <---- point the click() function here instead of the DIV…
< img class=“thumbnail” />
< /div>
So, you can search for the .click() function and point it to the correct area. Then, it will only click when you are hovered over a thumbnail. Hope this make sense!

Yes, thank you very much!

It is a very good explanation of code.

Sponsor our Newsletter | Privacy Policy | Terms of Service