Try the Pro version for more options!
Wouldn’t it be nice if Divi’s portfolio modules worked with blog posts? Portfolio Posts solves this problem!
Portfolio Posts adds three new modules to the Divi builder. Each module is similar to the default portfolio modules included in Divi, except our modules work with blog posts instead of projects. We’ve also added a lightbox option. Clicking on the featured image opens the image in a lightbox popup window vs opening the post (optional).
Best of all, it’s free! If you like the plugin but need more options, try the pro version.
Portfolio Posts Pro adds the following features:
- Ability to display any Custom Post Type (CPT).
- Option to display featured images in a lightbox or lightbox gallery.
- Load a custom lightbox gallery of images for each post.
- Display post content in a popup window.
- List Layout option - display posts vertically with featured images to the left of post title, meta, excerpt, etc.
- Control the order of the filters in the filterable module.
- Remove current post.
- Set a custom URL for each post.
- Include/exclude posts by taxonomy.
- Order By option (date, title, slug, random).
- Custom Query option gives you complete control of query arguements using a filter.
- Display custom fields and optional label for each custom field.
- Display custom content using a filter.
Click here for a side-by-side comparison.
Below are the modules included in Portfolio Posts (free version). Each module is loading blog posts, not projects.
DP Blog Portfolio
DP Filterable Blog
DP Fullwidth Blog
How to add Pagination?
Good point. Let me work on that and I’ll update the plugin once it’s added
Pagination is now available on the standard layout [tweak_blog pagination="on"]. Please download the latest version of the plugin and add pagination to the shortcode. Let me know if you have any issues.
Hi Brad, thanks for helping out with this, can you tell me, once I’ve downloaded this, what do I need to do next? Do I need to upload to a specific place? Feel stupid asking, unless you’ve already mentioned it somewhere.
Thanks in Advance,
Judah
Hi Judah. You need to go to the WordPress dashboard, click on Plugins along the left sidebar, then Add New, then Upload Plugin. Select the file you downloaded from here and then activate it
I’m an Idiot, thanks Brad!
Full width is working but standard is not working for me. Its just printing out the shortcode.
[tweak_blog categories="Recipes" display="5" color="#3C8901" opacity=".4" text="dark"]
Any ideas what’s wrong?
Thanks,
Charlie
Hi Charles. What version of Divi are you using? Have you modified the theme, specifically any code that changes the functionality of the standard portfolio modules? The example on this page uses the code exactly as is above.
Also make sure you are inserting it into a text module
I am using the latest version of Divi. I have not changed any code.
Love it! Question though – I had a different theme before I switched to Divi that resized the featured image. Since installing Divi I’ve regenerated all of my images but when I use this plugin it’s pulling images that were the resized/cropped image rather than the original for the full width carousel, so all the images look blurry. I’ve tried uploading new images to set as the featured image to see if it would work but it didn’t. Any ideas? Here’s the page where I’m testing it on – http://kimmywilliams.com/about/
Thanks!
as a follow up – I created a project portfolio using the same images and the portfolio module used the correct images, so I’m assuming it’s something based in the script of the plugin…
Hey Kimmy. Sorry for your troubles. Looks like you’re on your way to a beautiful website, but I do see the blurry image problem. I’ve updated the plugin to pull thumbnails exactly as the original Divi portfolio module. Let me know if that fixes the problem. Thanks.
Thanks Brad for getting back to me about that. I updated the plugin and it almost worked…it’s still pulling the cropped image instead of the original image but now it’s squished to fit the width. If you look at the page again, you’ll see. Any ideas? I went through my website files and removed all possible files from previous themes that might be causing it and regenerated thumbnails but still no go…the thumbnails work fine on the standard width…so I’m not sure where to go from here to diagnose.
Also, ideas for future:
1. update from within wordpress (so you don’t have to delete and upload a new copy every time)
2. have the same carousel for full width available in standard width (that would be awesome!!)
Thanks! You rock!
Hey Kimmy. Again, sorry for the troubles. Your website is definitely pulling a thumbnail that is too small. But I’m starting to wonder if the issue is unrelated to the plugin. I downloaded the full size version of one of your blurry images from your site, set it as a featured image on my test site, and used it with the plugin with no problems. After a little digging, it sounds like Jetpack’s “Photon” CDN feature can cause this issue. Do you have this enabled? If not any other CDN plugins like Cloudflare? If you have a caching plugin like WPCache try emptying the cache or disabling it. If none of that works, please let me know and I’ll keep digging. I’m going to send you an email and we’ll post our findings back in the comments for others
Brad, that’s probably the first time I’ve posted in a forum on a decade. After some 3 days digging for what was causing the blurriness on the featured images on my portfolio, your suggestion of disabling Photon came as I was about to give up.
Thank you enormously for helping me!
🙂 That’s awesome!!! Glad it helped resolve your issue.
Thank you very much!
Brad,
May I propose to add excerpt shortcode?
Would you want this only on grid layout, fullwidth grid, fullwidth carousel or all three?
Sorry about the silly question, but this plugin only works with post categories? Is it possible to work with both Project and Post categories at the same time?
I actually never thought of that as a possibility. Right now it only works with posts. You can still use the original Divi project modules. I might look into adding the option to combine categories from both. Thanks
I will really appreciate it. I need to use a regular 4-itmers portfolio with both entries from post and projects, so what I’m doing now is to create a two row section with a project portfolio in a row and the post portfolio on the other. Each portfolio is showing only 2 itemts, so this way I have a regular portfolio with 4 entries, two from posts and two from projects.
Using categories from both projects and post could be a mesh if the same slug is used in both. I think that to avoid name duplicities, a good way to choice is adding projects or posts before category’s name, for example: [tweak_blog categories="post/sample, project/sample, post/foo, project/foo"] and so on.
I’m working on this, but I’m not very familiar with wordpress plugins. Anyway, if I made any progressions I will let you know before using it if you agree with that.
Regards,
I’ve actually created a pro version of the plugin that migrates the options into a custom module that can be accessed from Divi’s page builder. You could just separate them by offering a post category checklist and a project category checklist. I need to find out which options are the most popular for the next update. Either way, feel free to make any changes to either plugin to meet your needs.
Brad, great plugin. Do you have an update on adding the filterable portfolio for posts? Thanks!
Hi Benjamin. I replied to your original comment but just to update everyone else I am very close. I have everything working except pagination. As soon as that is solved, I will release it. Thanks!
Filterable portfolio is now available in the pro version!! Also added is the ability to insert the layouts right from within the page builder using custom modules 🙂
Check it out!
I LOVE this plugin! Is there anyway to turn off showing the featured image? (for my purposes specifically on the grid)
Would you want it to then look for the first image in the post to display? This is already possible. You just have to go to your Divi Theme Options and enable “Grab the first post image” in the epanel
I removed all images from my archived articles, but want to display them in a grid. When I do this, it puts a little box in a space above each one. I thought if there was a way to turn off the featured image displaying then it would look perfect. I’m just using divi’s default blog module though, and it’s working fine. 🙂
Is there anyway to have this also utilized designated Pages instead of posts?
I just bought something to do this very thing…but the look I want is what you have!
I will give it a try…and see. Thanks for this. I will save it for real posts…for sure.
I suppose this could probably be added. I could create a text box where you could add the ID # of each page you wanted to add. I might add this and/or the option for both posts and projects as Chelu suggested.
One more question, is it possible to show the category name below post title, just like the date? Thanks.
Yes! In the Pro version 🙂
Hi Brad,
How do I give each image a url to go to when clicked rather than a post page?
I know you said to turn the lightbox off…but I want to send people off to external sites and also internal pages.
[tweak_fwblog layout="carousel" categories="sample" display="12" autorotate="off" lightbox="off" color="FDF554" opacity=".9" text="dark"]
Not possible as of this moment Anna. I considered it for the Pro version but I really just wanted to get it released and bug free before tackling too much at once. If I do, I’ll probably give two options. An option to add a custom field in the settings. You would then add that custom field to each post and for the value you would enter the URL you wanted the image to redirect to for that post. The other option would be to set one URL for all images.
I figured out my other issue, but now I’m wondering if there is a way to change the arrow color on the carousel, preferably to white. I know this is a seemingly benign detail, but the dark on my dark images is difficult for users to see. GREAT plugin, btw!! Life saver!
.et-pb-arrow-prev, .et-pb-arrow-next {
color: #fff;
top: 75%;
}
You may have to add !important to the end of the color. I added the top: 75% to show how you can move the vertical placement in case your post titles are too long and interfere with the arrows.
Hi Brad,
Does pagination works on full width using grid?
Thanks
I am sorry but pagination does not work on full width grid.
Hi Brad,
Great plugins! Wondered if this is possible: I’d like to display the excerpt text from each blog post inside the overlay, the same way the title is available on the full-width blog module, and the title itself under the image.
Also, how can I make a standard-width module behave like the full-width blog module, i.e. no gutter between the images (and if possible excerpt displayed in the overlay)
Thanks!
Eyal
Hi Eyal. I have added this feature to the pro version of this plugin. Excerpt inside overlay on fullwidth and under image for standard grid layout
Hi, will it works also with custom posts?. That would be a really great addition.
Hi Ama. Currently no but I am hoping to add this to the pro version soon.
Hi Brad,
Nice addon! 🙂
Could it be that the ratio needs to be constant (4:3)? When I use more panoramic images the content seems to get crammed. The plugin doesn’t dynamically calculate points where to let the images start and stop so as to keep their aspect ratio in tact?
Sincerely,
Lucas
Exactly right Lucas. If you maintain a 1.33 ratio your images should come out great and not skewed.
Hi Brad,
any plans on adding lightbox support for standard portfolio?
/Stefan
Hi Brad,
just noticed that it’s possible in the pro version.
Hey Brad – I’m testing out the posts as portfolio plugin and when I activate it, none of the new modules are showing in my page builder. Do I need to do something else to get those to show?
Hey Ashley. The free version of the plugin uses shortcodes. The pro version is the one that you can create from within the page builder using modules. Is that what you’re looking for? Hoping I didn’t misunderstand your question.
Where can I find the shortcodes to paste in?
(NM, found them above) 🙂
Hey Brad,
Is there a way to get this plugin to work with products?
Or will it only work with standard posts?
Thanks!
Kevin
Hi Kevin. Sorry for such a late response. The latest update to the pro version now support custom post types, including products.
Hi Brad,
Is it possible to display the posts as a carousel under the line of filters (categories) instead of pictures linked to the posts.
Thank you,
Bruno
Hi Bruno. Sorry for the late response. If I’m understanding you correctly, this is not possible. You want a filterable carousel correct?
Hi Brad!
Awesome plugin! thank you! There is any chance to sort randomly the post in carousel mode?
Thanks Juan. I’m afraid there is no option to randomly sort the post. You might try a WordPress plugin that does this but I can’t guarantee it would work.
Hey there,
Nice plugin, I’m trying it and I’ve just hit a wall when trying to add pagination, I added this line to a text module on a page:
[tweak_blog pagination="on" display="12" color="#4f5946" opacity="4"]
The pagination link appears but it always points to the second page and doesn’t change when I change the page.
Am I doing something wrong?
Thank you very much!
Hey there, its a nice plugin, but im strangling with using the divi functions( like the portfolio and postsliders and stuff) with custom post types. Is it possible to do that with any of you plugins?
Hi Axel. The Pro version of this plugin allows you to use Custom Post Types. You could modify the free version yourself to work but it requires a lot of effort. The Pro version will open up all post types for you. Thanks.
Thank you for this amazing plugin! Is it possible to put captions in the lightbox pop up? I like having the titles on the thumbnail overlay but upon clicking the image I’d love it if there can be a caption beneath the image. Thanks so much in general — I was struggling to find a solution and this plugin has helped me immensely!
Hi Stefanie. Currently it is not possible but I will definitely consider that as a new feature. Great idea!
Hi Brad, the plugin doesn’t work for me. I have a blank area where I want to put my portofolio. I’m using a last version of Divi. Could you help me ?
Hi Nerelle. I just tested the shortcodes with Divi 2.7.5 and everything is working for me. Are you still having issues with the layout not showing?
Hello, is there any option to make the size of the images smaller? i would look forward to have a less prominently visible solution… thx a lot in advance!
Hi Tom, I’m afraid there is no easy solution for this. You would have to use CSS to change the grid item default sizes.
Hi Brad,
I have installed the free plugin and actived it too. But I cannot see anything in the “insert full width slider module” am I doing something wrong?
R.
The free version of the plugin uses shortcodes to create the layouts. If you go to the top of this page, you’ll find directions on how to use those shortcodes within fullwidth and standard sections.
Hi, I just downloaded the plugin and paste 6 fake posts in the category. Unfortunately fifth picture and post is missing (disappears) in the row so it is not screen wide.
Look here (at the bottom):
http://standrebessette.mariannaosko.com/
Is there anything to do with it? I have the latest Divi 3.0.7 Previously the plugin worked. I tried to switch off any other plugins and functions. Nothing worked.
Marianna
It happens when the browser is wider than 1590 px.
Hi Marianna. I have the fullwidth carousel working on my dev site with Divi 3.07 without the problem you are experiencing. I can see that you are getting a javascript error on your page, which might be causing the issue. I would try this:
1. Create a new blank page, add a fullwidth carousel, and see if it does the same thing.
2. If it does, add the default Divi fullwidth blog carousel and see if it does the same thing.
Please let me know what you find out. Thanks
I just realized you are using the free version of the plugin. I have not tested this with the latest version of Divi. I would still do steps 1 and 2
Hi Brad,
I am using the full width grid, and no matter what number I type into display, it will not display more than 16 posts. I would like to view more posts, and also have pagination. I have read above that pagination is not an option for full width – are there any plans to incorporate that?
Thanks for a great plugin, and for your time.
Sorry – just realized my mistake. I CAN get more than 16 posts. However, I am still wondering about the possibility of pagination. Thanks.
Hi Linda. Glad to hear everything is working for you. I probably will not add pagination to fullwidth modules. However, I am looking into possibly adding AJAX loading options to all modules. The modules would initially load a set amount of results that you define, and would then dynamically load more results as you scroll down the page. Would this be something you would be interested in?
Is there a shortcode attribute for font style? And what about displaying 5 columns instead of four? And what about making the section 1/2 as tall? Thanks!
Hi Nicholas. The pro version of the plugin adds new modules to the Divi builder and gives you options for font style in the module settings. Displaying 5 columns would be difficult. A class is added to the last column of every row depending on the browser screen size. This is done with a javascript function in the Divi theme and would be difficult to bypass/alter. You could make the sections half as tall by changing the thumbnail sizes using this method: http://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/. You would need to change the thumbnails to 400 x 142
Is there any possibility to change the “+” icon?
Hi Nhaem. You could probably change that manually with CSS or you could install the Pro version and change it in the module settings.
Great plugin works well. One issue that seems to be ongoing that you may want to sort out is image aspect ratio. If pulling images from a post, there would most likely be different image sizes and orientations, and this mod simply fits the images without preserving aspect ratio, seen here: http://www.keywestphoto.ca/media/ . Can you suggest an edit to preserve aspect ratio, perhaps in a “fill method, where the image will fill the narrowest dimension first?
Nevermind, found it! For anyone who wants to correct the improper formatting of varied images within the plugin, use this:
.et_portfolio_image {
padding-top: 100%;
}
.et_pb_portfolio_image img {
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Works perfectly!
Great Job. It´s working in Divi 3.0 really nice.
Thanks a lot
Hey Brad,
I am using this to bring learndash courses custom post types to display in Divi portfolio. Do you know if your plugin is compatible with their CPT’s categories?
I added a full width section and then for the test module added the shortcodes but cannot get them to display.
If it helps their CPT is post_type=sfwd-courses
Okay downloaded the Pro version and everything works as expected!
Great! Glad to hear Sebastian
Brad,
Need help. Was using the Pro version and it worked fine for the first module created and now I cannot open Divi builder or any modules if PPP is activated. I am using Divi with a child them on the latest version. I tried it with the divi child theme disabled as well. Still no go. Whenever I try to open a module with the PPP plugin enabled I have a never ending load as per the screenshot: https://www.screencast.com/t/uo2hx9yPMXJn
Could you please help? I have enabled debugging but do not see any useful information in it related to the plugin.
Hi Sebastian. This is usually a PHP memory issue or a conflict with another plugin. Since you are running a LMS, my guess is a memory issue. I would start by checking with your host and see what your PHP memory limit is currently set to. I would recommend 256MB minimum.
I have also found on my localhost that if I just wait 2-3 seconds before clicking on the Divi Builder, it will load. This is with or without the plugin activated. Divi requires a lot of resources.
Hey Brad,
You were right and your suggestion lead me to overall performance improvement finding this tutorial on GoDaddy for increasing all the limits. It was driving me crazy because editing the php and htaccess files were not working until I found this YouTube video:
hxxps://www.youtube.com/watch?v=tdUlIkZcOe0&feature=youtu.be
Your plugin is working wonderfully 🙂
Awesome!!
Hey Brad, I’m using the Portfolio Posts Plugin but I’m not sure I’m executing it right. I downloaded and activated the plugin and created a new fullwidth code module. But when I put the shortcode into the content all that shows up is a blank space, any suggestions? This is how I have it typed out [tweak_fwblog layout="grid" categories="My Favorite Work" display="8" autorotate="off" lightbox="on" color="E0E0E0" opacity=".4" text="light"]
Hi Joshua. I’m not sure what the issue is. I just tested in the latest version of Divi and the shortcode worked for me. Does that category have published posts? Maybe test with another category. Clear any caching plugins. If you view the source code, are the posts there in the HTML?
Hi Brad,
We love this plugin. However, opacity does not seem to work, and I am copying exactly from the examples shown by you and above. I would like to put a 70% black overlay over the slides so that the white text pops. I would also be open to using custom css to create a transparent bar under the text as an alternative. No matter what I enter into color and opacity, there is no change to the appearance. Any suggestions? Thank you!
[tweak_fwblog layout="carousel" categories="Inspiration, Icons & Interviews " display="50" autorotate="on" speed="7000" lightbox="off" color="000000" opacity=".7" text="light"]
Regarding my question above, I had to enter a background color for the section, and then could play with the opacity. However, the text is also “under” the opacity, and so fades out and is not very readable. Will continue trying to play with css to put an opaque section under the text only, but it does seem that the plugin works correctly. Thank you.
Thanks Linda. By default, the overlay should be “under” the text. Can you send me a URL to see if I can spot the issue?
Hi Brad
I’ve downloaded the elegant-tweaks-posts.php and tried to upload it to my WordPress site. It won’t upload and I get the following error: “The package could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature”
Any suggestions you might have would be very welcome. I am running the latest version of WordPress according to my site (version 4.9.6). Thanks Deb
Hi Deborah. Sounds like you are unzipping the file and then trying to install the unzipped files. When you upload the plugin in the WordPress dashboard, select the zipped file.
Thanks Brad. That worked :o) Cheers Deb
I love it and it works great so far. I am just curious if I can remove the circle plus sign when hovering over blog featured images?
Hi Alli! Please try adding the following CSS to your child theme’s stylesheet or the Divi -> Theme Options -> Custom CSS section:
.dp_ppp_module .et_overlay:before {display: none !important;}