How to implement for custom theme

The plugin has an output filter which tries to locate linked images using a regular expression. Therefore images have to be inserted in specific way and without line breaks between <a> and <img>.

So this is OK:

<a href="..."><img ...></a>

But this won’t work:

<a href="...">
    <img ...>
</a>

<a href="...">
<img ...>
</a>

I’ll try to fix that in future updates, so linked images will also be recognized when the tags are across multiple lines – but at the moment, you have to take care to output links and the corresponding images in one line and without spaces between the tags.

Hi and sorry for my late reply.

I created a sample page you can look at:

https://www.stoffmagasin.no/2018/05/10/fotostoff/

This is my code in WordPress editor:

<a href="https://www.stoffmagasin.no/wp-content/uploads/2018/05/5.jpg"><img src="https://www.stoffmagasin.no/wp-content/uploads/2018/05/5-600x902.jpg" /></a>

[gallery link="file" size="medium" ids="7613,7581,7574"]

Unfortunately, it doesnt work at all. I have no idea why.

• This reply was modified 6 years, 6 months ago by marcusln.

The reason why it does not work, is as I already expected. Images and links are in separate lines and therefore not recognized by the plugin as linked images:

    <a href="/index.php">
	    	<img src="/wp-content/uploads/2017/04/stoff.png" class="" style="align-self: left; height: 30px; padding: 0 3px 0 15px; filter: invert(100%);">
	    </a>

I will try fix this for the next update – it is already on my todo-list. You may also try to add a hook for galleries in your theme to make sure linked images will be output with the link in one single line:

<a href="/index.php"><img src="/wp-content/uploads/2017/04/stoff.png" class="" style="align-self: left; height: 30px; padding: 0 3px 0 15px; filter: invert(100%);"></a>

Sorry – did not look carefully enough! Of course the images are already properly formatted. But it seems, there is one scripting missing in your example.

There should be a reference to wp-content/plugins/lightbox-photoswipe/js/photoswipe.js. Where is it? The script is on your server but it will never be included in your theme (see https://www.stoffmagasin.no/wp-content/plugins/lightbox-photoswipe/js/photoswipe.js). Do you have any hooks for included scripts which may cause scripts to be removed?

• This reply was modified 6 years, 6 months ago by Arno Welzel.

Wow! Nice catch! I added the script via wp_enqueue_script() and now everything works. Magic! Thank you so much! For an unskilled developer like me, the documentation was a bit vague as it says that “it just works”.

Thanks for the feedback.

However, you should check your theme code – the plugin adds the itself as well. So if you need to add another call to wp_enqueue_script() than you may have damaged something else in the first place which suppresses the scripts from plugins. Using a “manual” enqueue call is not a fix but just a workaround for some other error of your theme.

Hmmmm, I should check that out, thanks. Not really sure, the only thing related to scripts in functions.php is

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
}

Because I saw that jQuery was loading twice. So I load it via <script> in the header. I should perhaps use the wp_enqueue scripts functions properly. My impressions was that out of the box WordPress loads too much stuff I don’t use, so I wanted to keep it clean.