rignano

Thanks for your response. It’s not an issue with the gallery, but when the full-sized image is loaded up in Foobox. Basically, I want the images in Foobox to always show at original, physical pixel size (not CSS pixel size). In other words, on devices with pixel ratios greater than 1 (such as the iPad) then the image width and height is reduced in order to maintain a 1:1 physical pixel ratio.

Device pixel ratio of 1 = Image shown 100% width, 100% height
Device pixel ratio of 2 = Image shown 50% width, 50% height
Device pixel ratio of 4 = Image shown 25% width, 25% height

This will then keep 1:1 ratio with the physical pixels of the screen and ensure smaller images are kept sharp. Hope this makes sense!

I found the code for the custom caption plugin on GitHub. I was able to just add the ACF fields into that and worked fine.

Many thanks.

I got the answer from the developer and thought I would post in case anyone else needed it:

jQuery(".toggle-caption-button").on("click", function(e){
	// your code that toggles the captions
	
	// the code that tells the gallery to lay itself out again
	jQuery("#foogallery-gallery-XXX").foogallery("layout");
});

Obviously just need to swap in the relevant button and gallery details.

Many thanks for your great support. Can confirm titles now showing.

Thanks for replying. I am using v 1.2.2, which I thought was the latest version. Where can I get v 1.2.3?

Thanks for replying. I’ve sent an email with the web address.

Hi Karen. Your site is looking good.

I turned off responsive images and tweaked some of the portfolio files to load lower res thumbnails and think it is working a bit better now. Also, I’ve installed an image compressing plug-in to knock a few more bytes off my images. I think this template was created before WordPress had responsive images. I also don’t think it was designed for the homepage to display loads of thumbnails, so I think it will need a bit of tweaking if this is needed, or perhaps using a different theme. I’ve also found out that there doesn’t seem to be a way to set up the homepage for infinite scrolling (so it loads more thumbnails when you reach the bottom of the page).

As for amending functions.php, make a backup version of the file so u can revert it if needed. All the changes I’ve made just involved adding code to the end of the file, rather than changing existing code, so if something doesn’t work I just delete it. I’m pretty new to this myself (more familiar with Joomla).

Yeah, making a child theme is the best way to make amendments to the theme so you don’t risk loosing them when the theme gets updated. However, I’ve not made too many amendments, so I just made a note of what I’ve changed (rather than create a child theme) so I should be able to redo them again when the theme gets updated.

Good luck with the site.

Just thought I would mark this as solved as I did manage to sort out the issue. I added the following to functions.php

function illustratr_content_image_sizes_attr($sizes, $size) {
    $width = $size[0];
    //Portfolio thumbnail pages
    if (is_page_template('page-templates/portfolio-page.php')) {
       	return '(max-width: 767px) 767px, (max-width: 959px) 480px, 340px';
    }
    //Regular pages
    return '(max-width: ' . $width . 'px) 100vw, ' . $width . 'px';
}
add_filter('wp_calculate_image_sizes', 'illustratr_content_image_sizes_attr', 10 , 2);

This tells the browser what size images will be needed on the homepage depending on the size of the viewport.

However, I did run in to some other issues with images occasionally not displaying correctly in Microsoft Edge until the page is refreshed. Apparently this seems to be a common issue with Edge and srcset, so I’ve now disabled responsive images in WordPress and the theme seems to run better now in Edge. Microsoft are working on a fix apparently.

After a bit further investigation it seems that the proper solution is to amend the theme’s functions.php file and add in a wp_calculate_image_sizes() function to basically set it so that when the portfolio-page template is used that the maximum-width of the images changes depending on the width of the screen (and therefore the number of columns).

I’ve tried several times but I just can’t seem to get it working.

Ok, just to confirm, I’ve changed:

// Setup the default ‘sizes’ attribute.
$sizes = sprintf( ‘(max-width: %1$dpx) 100vw, %1$dpx’, $width );

to:

// Setup the default ‘sizes’ attribute.
$sizes = sprintf( ‘(max-width: %1$dpx) 100vw, 25vw, %1$dpx’, $width );

in media.php and this nearly halved the speed of my homepage loading and had no noticeable effect on image quality. This is a bit of a hack as I’m not sure what I’m doing, but thought some people might find this a useful starting point.

• This reply was modified 8 years, 2 months ago by rignano. Reason: Typos

Ok, think I am getting somewhere with this problem. Basically, the image served by srcset works fine when you have an image taking up the full width of the site. But on the homepage, images are not taking up the full width of the site (on a desktop you are likely to get three columns, each column taking up about a third of the total site width).

The problem seems to be with the following which appears in the tag of each image:

sizes=”(max-width: 800px) 100vw, 800px”

I don’t think this is letting the browser know that at certain resolutions the images will be split into columns and not appear full width. Therefore, srcset is always getting the larger version of the files.

If I change it to:

sizes=”(min-width: 800px) 33vw, 800px”

then the browser is basically being told, ‘once the screen size is over 800px then the images will probably only take up a third of the usual size’. This seems to work, and you get a much more appropriate image resolution served.

Now I just need to figure out how I can get this changed for each portfolio image on the home page. I can change media.php in wp-includes but then it changes it for every image.