[Resolved] Repeatable PDF images broken

[Author]

Posts

[stuartm-2]

I am trying to:
To show PDF images. I managed to show only one image but what if we have a repeatable field?
What happens is that it displays broken images. See attached pic.
https://toolset.com/forums/topic/displaying-preview-images-of-uploaded-pdf/

But it didn't work so i found a similar post that another supporter -->Luo Yang suggested some small changes and it worked for only 1 pdf. (I cant find the link of the post)

How can this be fixed?
Below is the code that currently works for 1 PDF only. If you try to add another one it will contain 2 images together in the img tag. See attached pic.

function getPDFimg($atts) {
              
             extract( shortcode_atts( array(
            'size'=>'full',
            'url'=>''
        ), $atts ) );
         
              
       
           $image_url = str_replace(".pdf", "-pdf.jpg", types_render_field( "files-for-approval", array('output'=> 'raw'))); // publication_document = your field name
           
            $dirname = str_replace('.jpg','',str_replace(home_url('/'),'',$image_url));
            $images = glob($dirname."*.jpg");
            if(isset($images[0])){
                        $small_image = home_url('/').$images[0];
            }
            if(isset($images[1])) {
                        $medium_image = home_url('/').$images[1];
            }
            if(isset($images[2])) {
                        $large_image = home_url('/').$images[2];
            }

            switch($size) {
                        case 'small':
                                    if(isset($small_image) && $small_image != '' ) {
                                                $image_src = $small_image;
                                    }
                                    else{
                                                $image_src = $image_url;
                                    }
                        break;

                        case 'medium':
                                    if(isset($medium_image) && $medium_image != '' ) {
                                                $image_src = $medium_image;
                                    }
                                    else{
                                                $image_src = $image_url;
                                    }
                        break;

                        case 'large':
                                    if(isset($large_image) && $large_image != '' ) {
                                                $image_src = $large_image;
                                    }
                                    else{
                                                $image_src = $image_url;
                                    }
                        break;

                        default:
                                    $image_src = $image_url;

            }

	return $image_src;
}
add_shortcode('getpublicationpdfimg', 'getPDFimg');

[Shane]

Hi Stuart,

Thank you for contacting our support forum.

Normally custom coding isn't supported even if it as provided by one of our supporters, since its not apart of the toolset bundle.

However I can try to have a look as to what is happening here. Could you let me know how you are using this shortcode?

A screenshot of how it is inserted on the page would work, just to see the usage.

Thanks,
Shane

[stuartm-2]

Hello Shane,
Thanks for your help. The code was provided by 2 of toolset supporters so i dont see why it shouldnt be supported.
I uploaded the pic. I use the shortcode inside a content template. The problem occurs when i upload many pdf files.

Thank you for your time

[Shane]

Hi Stuart,

I'm not seeing from your screenshot where you are passing the url of the pdf into the shortcode.

it should be

{!{getpublicationpdfimg url='types shortcode goes here' }!}

This this only and let me know if it gives you the url for each image within the foreach.

Thanks,
Shane

[stuartm-2]

Hello Shane,
See attached pic for the results. What do you think?

Thank you

[Shane]

Hi Stuart,

Great is prints out the url's individually.

Now you can try this

<a href="Types shortcode"><img src="{!{getpublicationpdfimg url='types shortcode goes here' }!}"></a>

This should now give the desired results.

Thanks,
Shane

[stuartm-2]

Well its the same results i got from the beginning , two images inside a img tag each image is related to the other PDF. See attached pics. In pic 2test when i remove one image with inspector it works.Any ideas why? Is it maybe the code, that only works with one PDF only and not repeatable field?

Thank you

[Shane]

Hi Stuart,

Based on what I see it should work.

However would you mind allowing me to have admin access to the site and a link to this page where you are testing ?

It may be a case where we are using the code incorrectly or the code needs to be extended for repeatable fields.

Thanks,
Shane

[Shane]

Hi Stuart,

I did a small modification to the code that allow you to handle repeatable fields.

$img_arr = explode(" ",$image_src);
	
	$output = "test";
	foreach($img_arr as $img){
		$output .= "<a href='".$atts['url']."'><img src='".$img."'/></a>";
	}

	return $output;

The code should be displaying the images now.

Thanks,
Shane

[stuartm-2]

Hello Shane,

Indeed it is displaying the proper images but now the links link to two pdfs. Any idea why?

Thanks a lot for your help by the way.

[Shane]

Hi Stuart,

The issue was on my part.

This is the correction

$img_arr = explode(" ",$image_src);
	
	$output = "";
	foreach($img_arr as $img){
		$output .= "<a href='".$img."'><img src='".$img."'/></a>";
	}

	return $output;

Should be fine now.

Thanks,
Shane

[stuartm-2]

Good morning Shane,
When i click on it shows the image. I think you misunderstood i need to display the PDF images as img tags and when clicked href to the corresponding PDF file.

Thank you

[Shane]

Hi Stuart,

Sorry for the delay in resolving this.

However it should now be resolved. I had to replace the img extension with the pdf extension.

This should now be working fine.

$img_arr = explode(" ",$image_src);
	
	$output = "";
	foreach($img_arr as $img){
		$output .= "<a href='".str_replace("-pdf.jpg",".pdf",$img)."'><img src='".$img."'/></a>";
	}

	return $output;

Thanks,
Shane

[stuartm-2]

Awesome! Works like a charm, thank you for the invaluable support. 🙂

[stuartm-2]

Hello Shane,
Thank you for your help with the code above some time ago.
But i just noticed an issue as you can see in the pictures. When the field is repeatable it works as i want it to - show image and on click open related PDF file, but when the field has only one file it shows and image and on click it opens the image on a tab which i dont want - i need the PDF file.
How to make this work the same for one file?
Thank you.