Support Forum

Advanced Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
coding-topic
Where to change image popup code from JS to CSS class
Avatar
Michael Montague
Brisbane, Australia
Member
Free Members
sp_UserOfflineSmall Offline
Oct 27, 2015 - 2:34 am

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?

Avatar
Yellow Swordfish
Glinton, England
SP Master
sp_UserOfflineSmall Offline
Oct 27, 2015 - 5:35 am

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.

andy-signature.png
YELLOW
SWORDFISH
Avatar
Michael Montague
Brisbane, Australia
Member
Free Members
sp_UserOfflineSmall Offline
Oct 27, 2015 - 10:42 am

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/.....-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 Can Not Be Found]

Any advice would be great! Thanks

Avatar
Michael Montague
Brisbane, Australia
Member
Free Members
sp_UserOfflineSmall Offline
Oct 27, 2015 - 10:54 am

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. 

Avatar
Yellow Swordfish
Glinton, England
SP Master
sp_UserOfflineSmall Offline
Oct 27, 2015 - 11:51 am

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

andy-signature.png
YELLOW
SWORDFISH
Forum Timezone: Europe/Stockholm
Most Users Ever Online: 1170
Currently Online:
Guest(s) 1
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Mr Papa: 19448
Ike: 2086
Brandon: 864
kvr28: 804
jim: 649
FidoSysop: 577
Conrad_Farlow: 531
fiddlerman: 358
Stefano Prete: 325
Member Stats:
Guest Posters: 616
Members: 17348
Moderators: 0
Admins: 4
Forum Stats:
Groups: 7
Forums: 17
Topics: 10118
Posts: 79603