[Resolved] Size attribute not working in types image shortcode with custom WP directory structure

[Author]

Posts

[eSaner]

I am trying to: Get an image thumbnail to display from an image custom field.

I expected to see: The default WP thumbnail size 150x150.

Instead, I got: The full-size image.

Fresh 4.9.7 WP install. Latest Types plugin downloaded from toolset.com. No other plugins or custom code. Default Twenty Seventeen theme.

[Luo Yang]

Hello,

Thanks for the screenshots, I can see the image is outputted full-size image even you are using attribute size="thumbnail" in the Types shortcode.

The problem is abnormal, please try this:
1) Dashboard-> Toolset-> Settings-> Custom Content
click "Clear Cached Images" and "Clear Outdated Cached Images", and test again

2) Open PHP debug mode, copy and paste the debug logs here, we need to know if there is any PHP errors in your website:
https://toolset.com/faq/provide-supporters-copy-site/

3) If the problem still persists, please provide a test site with the same problem, I need to debug it in a live website, thanks

[eSaner]

Also, I've added a custom plugin with just the following shortcode to display the thumbnail. This shortcode does work.

// Render thumbnail image from URL
add_shortcode('image-thumbnail', function () {

    // get the image url
    $image_url = types_render_field('image', ['output' => 'raw']);

    // convert the image url to id
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url)); 
    $image_id = $attachment[0];
    
    // render the thumbnail image
    return wp_get_attachment_image($image_id, 'thumbnail');
});

[Luo Yang]

Thanks for the details, it should be a server problem, I have tried these:
1) Export your website setting, and import it into below test site
hidden link
user/pass: xgren/111111

2) Create a page, with shortcode:
[types field='image' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]
and upload a new image to test:
hidden link

It works fine in front-end:
hidden link
There isn't similar problem, it does output the image in thumbnail size:
hidden link

You might consider to test it in another web server.

[eSaner]

Can you point me to where the code is in the Types plugin that renders the image? The server setup is pretty standard, so perhaps there is an error in Types. I see it works on your test site, but there are other server environments where Types should still work.

Also, using the attribute url='true' does work. The correct thumbnail url is displayed. So it seems more like a problem with how Types is generating the image.

[Luo Yang]

Please check Types plugin file types\vendor\toolset\types\embedded\views\image.php, the Types function types_image_resize() is defined in this file.

[eSaner]

If I set Toolset > Settings > Allow resizing of remote images to true, then a 150x150 image is displayed, but from uploads/1970/, so it is not the actual thumbnail. It has been resized and saved by Types. Why does Types think it is a remote image? I have the following defined in functions.php

/** @var string Directory containing all of the site's files */
$root_dir = dirname(__DIR__);

/** @var string Document Root */
$webroot_dir = $root_dir . '/web';

define('CONTENT_DIR', '/app');
define('WP_CONTENT_DIR', $webroot_dir . CONTENT_DIR);
define('WP_CONTENT_URL', WP_HOME . CONTENT_DIR);

Types can handle such definitions, correct? Also WordPress in a sub directory?

Also, if I edit toolset-types/application/models/media/service.php line 90 to print $resized object like below.

$resized = types_image_resize( $image_abspath, $args );
if ( is_wp_error( $resized ) ) {
	//return $media->get_url();
	print_r($resized);
}

I see the following Types error:

Types_Error Object ( [errors] => Array ( [Types_Image_Utils::Types_Image_Utils::getWritablePath] => Array ( [0] => Destination dir not writable ) ) [error_data] => Array ( ) )

Perhaps an issue with permissions?

[Luo Yang]

Q1) Types can handle such definitions, correct? Also WordPress in a sub directory?
First, those definitions should be put into file wp-config.php,

I suggest you try to remove them, and upload an image and test again.

If it is fixed, then there might some problem with your custom definitions.

Q2) Perhaps an issue with permissions?
Yes, as the error message, there is an issue with file permissions: Destination dir not writable
I suggest you check the Q1 first.

[eSaner]

Sorry, I missed typed. Those definitions are in wp-config.php, not functions.php.

Do you know which directory the error refers to?

[Luo Yang]

I have tried your definitions settings in my localhost, the wp-content folder does not take effect any more, and I have tried to upload and install Types plugin, but get below error:

The link you followed has expired.

Please try again.

So there should be some wrong in your custom definition .

But I am not sure which definition is wrong, you can debug it like this: remove them one by one, and test again

[eSaner]

Did you also modify your directory structure to match the definitions? Of course it will not work if you define content directory as /app, but the directory is still named wp-content. I also have wordpress core files in a subdirectory, so the following definitions are included wp-config.php as well (local dev url shown below, but it's is updated to the correct domain on the live site).

define('WP_HOME', 'hidden link');
define('WP_SITEURL', 'hidden link');

The directory structure for my site is as follows.

/site-root
    /app 
        /mu-plugins
        /plugins
        /themes
        /uploads
    /wp
    index.php
    wp-config.php

[Luo Yang]

Have you tried it in a fresh wordpress installation? Does it work? Can you confirm it?

I have tried the steps you mentioned above, please correct me if there is anything missing

1) Install a fresh wordpress installation hidden link
2) change the the folder name "wp-content" to "app"
change the the folder name "wp-includes" to "wp"
3) add below codes in wp-config.php:

/** @var string Directory containing all of the site's files */
$root_dir = dirname(__DIR__);
 
/** @var string Document Root */
$webroot_dir = $root_dir . '/web';
 
define('CONTENT_DIR', '/app');
define('WP_CONTENT_DIR', $webroot_dir . CONTENT_DIR);
define('WP_CONTENT_URL', WP_HOME . CONTENT_DIR);

define('WP_HOME', '<em><u>hidden link</u></em>');
define('WP_SITEURL', '<em><u>hidden link</u></em>');

And test it in front-end, I get this PHP error:
Warning: require(D:\wamp64\www\wordpress/wp-includes/load.php): failed to open stream: No such file or directory in D:\wamp64\www\wordpress\wp-settings.php on line 19

Can you install the the duplicator plugin in your website, and share a downloadable URL for the duplicator package?
https://toolset.com/faq/provide-supporters-copy-site/

[Minesh]

Luo is on vacation. This is Minesh here and I will take care of this ticket. Hope this is OK.

I tried to access the google drive URL but I do not able to download it as I need permission to access it.

However, as - you said image is not resizing, could you please tell me to which file the following code is added?

$resized = types_image_resize( $image_abspath, $args );
if ( is_wp_error( $resized ) ) {
    //return $media->get_url();
    print_r($resized);
}

Additionally, could you please share problem URL where above code is loaded?

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - I've set the image resizing setting from: Toolset => Settings => Custom content => Images section

I see its displaying resized images now.

Please check following image:
hidden link

Could you please confirm.

[eSaner]

I see that you can generate a custom size, but that is not a solution. That creates a new file and saves it to /uploads/1970/. It does not load the thumbnail size created by WordPress when an image is uploaded. The file I'm trying to load is not an external image, it does not need to be resized by Types. The thumbnail created by WordPress already exists, but the Types shortcode is not able to load it.