- This topic has 9 replies, 4 voices, and was last updated 5 years, 3 months ago by Leo.
-
AuthorPosts
-
October 8, 2018 at 1:37 pm #696561Ian
Featured images are basic, one size, no caption, and no pop-up lightbox option. I was able to improve the features using:
- GeneratePress Elements:
Lets you build your own custom Featured Image template. - Custom Content Shortcode (CCS) plugin:
Lets you add Custom Fields (such as the featured image) to the template - Featured Image Caption plugin:
Lets you add a caption to the feature image - Responsive Lightbox & Gallery plugin:
Lets you turn an image into a popup
Instructions (ensure all plugins are installed and enabled):
- Select Appearances | Elements
- Select Add New, an Element type of “Hook”, and enter a relevant title
- In main editing area, enter the following HTML and CCS shortcodes, eg:
[if field=image-url]<div class="featured-image page-header-image"> <a href="[field image-url]" rel="lightbox"> <img src="[field image-url size=medium]" alt="Featured image"> </a> [cc-featured-image-caption] </div>[/if]
- Make sure the “Execute Shortcodes” checkbox is checked
- Select a Hook location, eg. “before_content”
- Then in display rules, select a location, eg. Pages
- Click Save, or Update
Add an image and caption, and make sure the Lightbox plugin has a lightbox effect selected (eg. prettyPhoto).
Notes
- The CCS shortcodes [if field=image-url] .. [/if] ensure that the HTML is displayed, only if there is a featured image
- The DIV classes are the same as the usual featured images DIV classes, so that any CSS you use will work (see below)
- The [field image-url] shortcode is provided by CCS and merely provides the features image URL.
- rel=lightbox is used by the Lightbox plugin to trigger the pop-up.
- The image tag uses a parameter to select and display the medium sized featured image (which links to the full-size image)
- The [cc-featured-image-caption] shortcode is provided by the Featured Image caption plguin to display the caption text.
CSS used
I used the following CSS (entered in Appearance | Customise, then select Additional CSS):/* Featured image */ .featured-image {width:256px} .featured-image img {border:1px solid black;} .ccfic {margin:0px 0 0 0;font-size:80%;;line-height:16px}
.ccfic is a class used by the Featured Image Caption plugin.
#ends#
October 8, 2018 at 7:30 pm #696723TomLead DeveloperLead DeveloperAwesome stuff! Thanks so much for sharing 🙂
January 18, 2019 at 9:33 am #785737Alain AubryHi Tom
How can this be done without plugins? maybe using hooks and some code, btw, I don’t need the caption just to popup the image…
Thanks
AlainJanuary 18, 2019 at 10:33 am #785768LeoStaffCustomer SupportPerhaps WP featherlight is what you are looking for?
https://wordpress.org/plugins/wp-featherlight/If not then the plugins solution is still the way to go if you aren’t comfortable with a lot of custom coding.
January 18, 2019 at 1:00 pm #785835Alain AubryHi Leo
Now I am using “Simple Lightbox” https://wordpress.org/plugins/simple-lightbox/
It works with images inside a post but not with the featured image displayed by the theme, this one lacks the “a” tag wrap. Looking for this issue is the reason why I came to this post…
I guess that “WP Featherlight” will have the same behavior, I will give it a try.
I don’t mind using custom code, if it not way too complex…
January 18, 2019 at 2:51 pm #785917LeoStaffCustomer SupportWP Show Posts pro has this feature as well that you can consider:
https://docs.wpshowposts.com/article/images-overview/#image-lightboxDo let us know if you find a good solution 🙂
January 18, 2019 at 3:27 pm #785933Alain AubryLeo
Look at any single page from here: https://www.casa-indigo.com/artigos/
Once the single page is displayed, you cannot click on the featured image. So none of “Simple Lightbox”, “WP featherlight”, “WP Show Posts pro” will do it. Because the “a” tag is missing.Ian, author of the post manage to do it, but using “Custom Content Shortcode” plugin.
My question was about doing the same, but without an extra plugin.
Thanks
AlainJanuary 18, 2019 at 6:28 pm #786000LeoStaffCustomer SupportWould something like this help?
https://generatepress.com/forums/topic/post-image-in-lightbox/January 19, 2019 at 12:53 am #786085Alain AubryThis is the kind of code I am looking for… Great!
But still I cannot make work, I copied the following into my functions.phpadd_filter( 'generate_single_featured_image_output', function( $output, $image_html ) { printf( '<div class="featured-image"> <a href="%1$s"> %2$s </a> </div>', get_the_post_thumbnail_url(), $image_html ); }, 10, 2 );
but it is not adding the “a” tag… maybe I need to hook it in a different way?
January 19, 2019 at 10:35 am #786459LeoStaffCustomer SupportTested the code and it’s working nicely.
https://www.screencast.com/t/ZKb6kv4i3Can you open a new topic if you still can’t figure out?
I would like to keep author’s working solution clean.
Thanks!
- GeneratePress Elements:
-
AuthorPosts
- The topic ‘Pop-up (lightbox) featured image with caption (Solved)’ is closed to new replies.