Support Forum

Where to change image popup code from JS to CSS class

MM Michael Montague
Michael Montague
Member

In my WP theme I can reference a CSS class that gives me a nice popup image effect. I’d like to use this rather than the JS popup image default. Which file and where specifically can I alter the <a href> code for images that are embedded in a forum post?

4 Answers

New Answer

YS Yellow Swordfish
Yellow Swordfish
Member

at: /simple-press/sp-api/sp-api-filters.php

and the display function is sp_format_display_image()

Of course I would not recommend editing core code which will then be overwritten on future updates. If you give us more useful information and data on what you are after we might be able to advise on a better way to proceed. For example – have you tried turning the popup enlargement option off – which can work if the code you have active hunts for images and attaches something to the tag through a script.

Don’t forget also that Simple:Press adds many WP action/filter hooks throughout the code which might also be usable.

MM Michael Montague
Michael Montague
Member

Hi YS,

Thanks for your advice. FYI, the modal image effect I am wanting is to be consistent with the rest of the site. Click an image on this page for example and it does a nice lightbox with caption etc: http://panorev.com/2015/09/11/springfest-one-fashion-show-at-the-university-of-michigan/

Currently when I create a post in WP editor I select to use the modal effect on a per image basis, and it applies the class to the image’s a href. I guess the class is referencing some JS rather than CSS but I’m not too sure. I don’t think it is that smart, so I wondered if I could hardcode that class into the href for image display to test it at least.

I’ve tried to hardcode it but the output html is quite odd.

From line 1477:

# Use popup or not?
 if ($sfimage['enlarge'] == true) {
 $out = '<a href="javascript:void(null)" class="" title="'.sp_text('Click image to enlarge').'" onclick="spjPopupImage(''.$src[1].'', ''.$w.'', ''.$h.'', ''.$sfimage['constrain'].'');" >';
 $out = apply_filters('sph_display_image_popup', $out, $src[1]);
 } else {
 #mike
 #$out = '<a href="'.$src[1].'" '.$thistitle.'>';
 $out = '<a href="'.$src[1].'" class="td-modal-image" '.$thistitle.'>';
}

Output HTML:

 

giphy.gif
Image Enlarger

Any advice would be great! Thanks

MM Michael Montague
Michael Montague
Member

Actually, never mind. I think the image enlargement is too messy at this stage so I will disable all of it and just display the images not as thumbnails. I was concerned they may not work well on mobile but it all seems to scale nicely. 

YS Yellow Swordfish
Yellow Swordfish
Member

I think we should be able to successfully add a class name in the tag if you change your mind.