Increase the quality of the images (image list) in the Ajax portfolio preview - Support

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
June 14, 2022 at 12:34 pm #1355156

fkm
Participant

Hi Enfold team,

I´m using the Ajax portfolio preview for my site and I´d like to increase the pixel resolution of the images at the image lists.
The proportions of the images are the same as the original images, but their quality/resolution seems to be reduced.

For some portfolio entries I´m using the slider show (Ajax preview) and here the proportions and the resolution seem to correspond to the original image after adding the following entry (which I found on the Enfold forum) to the funktions.php:

add_action( ‘avf_portfolio_preview_template_params’, ‘avf_portfolio_preview_template_params_mod’, 10, 2 );
function avf_portfolio_preview_template_params_mod($params, $entry) {
if($params[‘method’] == ‘slideshow’) {
$params[‘preview_size’] = ‘no scaling’;
}

if($params[‘method’] == ‘gallery’) {
$params[‘preview_size’] = ‘no scaling’;
}
return $params;
}

Is there a similarly way to also increase the quality of the images in the image lists?

Thank you very much in advance.

Best regards,
fkm

June 14, 2022 at 12:45 pm #1355157

fkm
Participant

This reply has been marked as private.

June 16, 2022 at 4:29 am #1355423
Ismael
Moderator
Hi,

Thank you for the inquiry.

You can replace the filter with the following code to adjust the image preview size when using an image list.
```
add_action('avf_portfolio_preview_template_params', 'avf_portfolio_preview_template_params_mod', 10, 2);
function avf_portfolio_preview_template_params_mod($params, $entry)
{
    if (in_array($params['method'], ['slideshow', 'list', 'gallery'])) {
        $params['preview_size'] = 'full';
    }

    return $params;
}
```
Best regards,
Ismael
June 20, 2022 at 12:04 pm #1355831

fkm
Participant

Hi Ismael,

thank you very much for your reply and the code.
Slideshow, gallery and list preview images do now all have the original proportions.

However, they seem to differ in their resolution:
While the preview images in the gallery or slideshow appear as if the full image resolution of 1800 x 1200 is given, the images in the list appear as if the resolution is reduced.

I took some screenshots (please take a look) of the preview images in the browser at 300% magnification to show what I mean:

Jpg-Files:
1. list_jpg.jpg: image a little blurry
2. slideshow_jpg.jpg: image much sharper

A gif file is displayed animated in slideshow and gallery and in the list it´s displayed in reduced resolution and without animation.
Maybe that could be a clue!?
3. list_animated-gif.jpg
4. slideshow_animated-gif.jpg
Please see website for the animation of the gif.

Is it possible to change the images at the list preview according to the others (slideshow and gallery), so that the resolution is increased and also the animation of gif files works?

Thanks a lot for another reply in advance.

Best regards,
fkm

June 21, 2022 at 3:19 am #1355918

Ismael
Moderator

Hi,

Thank you for the update.

Did you switch the portfolio preview back to gallery? The page looks different now. Please create a test page so that we can check the issue properly.

1. list_jpg.jpg: image a little blurry
2. slideshow_jpg.jpg: image much sharper

The gallery and image list should pull the same images, with similar names.

Best regards,
Ismael

June 21, 2022 at 10:27 am #1355968

fkm
Participant

Hi Ismael,

thank you very much for your reply and please excuse my sometimes clumsy attempts to explain.

I didn´t switch the portfolio preview to gallery, I only added “gallery” as option for a preview in the portfolio itmes settings (please see screenshot).

All three ajax portfolio preview options are now represented on the page (and named like that): Gallery, Slideshow, Image List.
For each option I´m using the same source images: a JPG and an animated GIF (both in a resolution of 1800 x 1200 px).
Please click on each of them to see the differences.

Thanks a lot for another reply.

Best regards,
fkm

June 22, 2022 at 3:14 am #1356074
Ismael
Moderator
Hi,

Thank you for the clarification.

We might have found the issue with the code. Please look for this line within the filter above..
```
$params['preview_size'] = 'no scaling';
```
.., and replace ‘no scaling’ with ‘full’.
```
$params['preview_size'] = 'full';
```
You can also include this code in the functions.php file.
```
add_filter('avf_ajax_preview_image_size', function($size) {
   return 'full';
}, 10, 1);
```
Best regards,
Ismael
June 22, 2022 at 11:37 am #1356138

fkm
Participant

Hi Ismael,

thank you very much again.

Actually, according to the filter in your post above, it already should have been “full” instead of “no scaling” (but it wasn´t, you´re right).
I probably opened several tabs with the backend in the browser and then refreshed the wrong one. My mistake. Sorry.

I hope it’s correct now. Please see screenshot.
However, nothing seems to have changed: the images in the list are still reduced in resolution and the GIF does not play.

Please check again if there is another way to fix this.

Thanks a lot in advance.

Best regards,
fkm

June 24, 2022 at 7:42 am #1356360
Ismael
Moderator
Hi,

Looks like it defaults to the “large” thumbnail when using the list style. Please try to edit the enfold/config-templatebuilder/avia-shortcodes/portfolio/portfolio.php file and look for this code around line 1470.
```
//	create array with responsive info for lightbox
				$img = Av_Responsive_Images()->responsive_image_src( $attachment->ID, 'large' );
```
Replace “large” with “full”.
```
//	create array with responsive info for lightbox
				$img = Av_Responsive_Images()->responsive_image_src( $attachment->ID, 'full' );
```
Best regards,
Ismael
June 24, 2022 at 10:03 am #1356377

fkm
Participant

Hi Ismael,

that´s it – now it works exactly as I imagined.
I suddenly feel euphoric, thank you so much. :)

Do I have to manually edit the line after each future Enfold update so it doesn’t change back again?

Best regards,
fkm

June 25, 2022 at 11:26 pm #1356498

Mike
Moderator

Hi,
Glad that Ismael could help, you can add the edited /portfolio/portfolio.php to your child theme so future updates won’t overwrite this customization, please see our documentation here.

Best regards,
Mike

June 28, 2022 at 11:29 am #1356703

fkm
Participant

Hi Mike,

thank you very much for your reply and the link.

Accordingly, I tired to follow the instructions and (at least) added the provided function to my child’s functions.php.
Unfortunately, I don´t know how to add a new folder to the child theme directory called shortcodes.
I can´t even find it.

Please help me how to proceed further.

Thanks a lot in advance.

Best regards,
fkm

June 28, 2022 at 1:42 pm #1356723

Mike
Moderator

Hi,
To add a new folder to the child theme directory called shortcodes you will need to do so with FTP or your web host “file manager” you can’t do this from inside WordPress.
If you include your login to your web host we could help, or you could ask your web host support to create the directory for you and copy the modified file to it as explained above.

Best regards,
Mike

July 5, 2022 at 3:22 pm #1357289

fkm
Participant

Hi Mike,

thank you very much for your reply and please excuse my delayed one.

As described in the Enfold documentation, I added the following function to the child´s functions.php.

add_filter(‘avia_load_shortcodes’, ‘avia_include_shortcode_template’, 15, 1);
function avia_include_shortcode_template($paths)
{
$template_url = get_stylesheet_directory();
array_unshift($paths, $template_url.’/shortcodes/’);

return $paths;
}

Unfortunately I don’t know how to proceed from now on or rather how to add the edited /portfolio/portfolio.php to my child theme.
Please give me further instructions on what to do next.

You are also welcome to log into the technical administration of my hosting (if it is not too much to ask) to take a look.

Thanks a lot for another reply.

Best regards,
fkm

July 6, 2022 at 3:33 am #1357344

Ismael
Moderator

Hi,

Thank you for the info.

We are able to login to the dashboard and go to the FTP page but we are not sure which user to login and which directory we are supposed to go to. We opened the floriankmueller.de folder but it is empty.

Please contact your hosting provider and ask them to generate a new FTP account with permissions to edit the floriankmueller.de site or directory.

Best regards,
Ismael

July 7, 2022 at 11:58 am #1357513

fkm
Participant

Hi Ismael,

thank you very much for your support and the detailed information.
That’s exactly how I’m going to do it – I’ll let you know as soon as it’s done.

Best regards,
fkm

September 21, 2022 at 4:38 pm #1365876

fkm
Participant

Hi Enfold team,

finally I just added the edited portfolio.php to a new folder named “shortcodes” at the child theme directory with FTP as suggested by Mike above and it works.
I’m learning (slowly but surely), thank you very much for your support.

Please feel free to close this topic as successfully completed.

Best regards,
fkm

September 21, 2022 at 7:06 pm #1365900

Mike
Moderator

Hi,
Glad to hear, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Increase the quality of the images (image list) in the Ajax portfolio preview’ is closed to new replies.