Full-size project in the pop-up (Projects section)

Hello everyone,

I’m completly fresh to WordPress and also to CSS/HTML, so everything what I have already done on my site, has been done mostly by your help from the other topics (Thanks to everyone!) or some CSS basics I have learned in the last few days.

My question is: Is there any possibility to make it: after clicking on the project thumbnail (in PORTFOLIO section) it will pop-up the window with full-image size of the project (instead of sending the user to the different URL with some kind of blog post section)?

I tried to make it by myself, but it was too tough.

Here is the link to the website: http://www.threelines.pl

Here are the additional CSS I’ve already added by myself: https://pastebin.com/9YHxHye4

Hello there,

There is no an easy way to achieve it as it requires complex jQuery code integration to add a pop-up functionality such as Fancybox. I am sorry I can’t provide you with code specific solution because it goes beyond the support service we can provide. But, for alternative solution which could be easier to do, I’d recommend you use one of these plugins:

Regards,
Kharis

Hmm, ok I get it. That would be great to make it possible to work on this theme.
Ok, so my other question is: where I can change the appearance of this page for example: https://ibb.co/nLWHSa, so it won’t look like blog post - I dont need all these categories and informations (in red borders) I just want full-size image (or images, if its possible to add some more images of the project), short description and come back button.

Thanks in advance!

Hello there,

Try adding the below extra CSS code to Appearance > Customize > Additional CSS in your site dashboard.


.single-projects #primary.col-md-9 {
  width: 100%;
}

.single-projects #secondary,
.single-projects .meta-post,
.single-projects .comments-area {
  display: none;
}

You can add more images along with your project description using “Add Media” button above the text editor.

To add a back button, try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

  'use strict'

    if( $('.single-projects') ) {

      var btn = '<a class="roll-button more-button" href="http://www.threelines.pl">Back to Home</a>';

      $('.hentry.projects').append(btn);
      
    }
      
})(jQuery);

  1. Update

Regards,
Kharis

Oh thank you now it looks much better! Is it possible to place the title above the main image, center-aligned? Now it is under the main photo, on the left like on the photo below:


Where can I modify this page so it will look the same for every project? I would like to have it in this order:
title
main photo
text description / other images (optional)
[COME BACK BUTTON]

Hello there,

Replace the jQuery code I suggested you to copy to your site’s Custom JavaScript with this one:


;(function($) {

  'use strict'

    if( $('.single-projects') ) {

      var btn = '<a class="roll-button more-button" href="http://www.threelines.pl">Back to Home</a>';

      $('.hentry.projects').append(btn);

      $('.entry-thumb').prependTo('.entry-content');
      
    }
      
})(jQuery);

Save changes. Then navigate to Appearance > Customize > Additional CSS. Add this extra CSS code:


.entry-thumb {
  display: none;
}

.entry-content .entry-thumb {
  display: block;
}

Regards,
Kharis

Kharis, you are the best! Thank you for all your help! One last thing and this topic can be putted to resolved - I would like to center-align project title, instead of left-align

To center the project title, you’ll need to add this extra CSS code:


.single-projects .entry-header {
  text-align: center;
}

Regards,
Kharis

Thanks, now its perfect! Problem solved. :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Thank you, I already have few other topics with still not resolved issues.

Regards,
Jacek