Adding short article description to popup in "My Works"

I am trying to figure out how I can add a short description (preferably like the first 30-40 words of my article) to the popup on the "my works" section. I am not using K2, I am using Joomla article creator. Right now it shows Title -> Category -> Author -> Date which is useless to me without explaining the popup picture. I'd like to add the section right below the date.

Any help would be greatly appreciated!

This requires editing template files and News Show Pro GK5 module files every time you update to latest versions. Are you sure you wanna do this otherwise it is possible.

Yes, that doesn't bother me at all. I am currently updated to the latest version.

News Show Pro GK5 & Writer Template j3.0 - Adding Short Description in popup from article content. Using jQuery.
Please update to latest News Show Pro GK5 for j3. Versions used NSP j3.0 v1.6.4, GK John Template v3.13
Edited files are attached to this post however as template and module files gets updated I won't be able to update the files all the time so follow below changes when you do update your files.

Update: Added readmore link to end of description linking to article.
See controller.php Line 74 changes.
See script.jquery.js Line 127 changes.

How it would look :


Following files will be edited. Backup before editing please.

Code: Select all

\modules\mod_news_pro_gk5\portal_modes\portfolio2\controller.php
\modules\mod_news_pro_gk5\portal_modes\portfolio2\script.jquery.js
\modules\mod_news_pro_gk5\portal_modes\portfolio2\style.css
\templates\gk_john_s\css\gk.stuff.css
\language\en-GB\en-GB.mod_news_pro_gk5.ini


1. Changes to "controller.php".
Open file:

Code: Select all

\modules\mod_news_pro_gk5\portal_modes\portfolio2\controller.php


Find Line: 74 which is below.

Code: Select all

data-img="'.strip_tags($this->get_image($i)).'"';


Replace it with below code

Code: Select all

data-img="'.strip_tags($this->get_image($i)).'"
data-desc-text="'.JText::_('MOD_NEWS_PRO_GK5_PORTAL_MODE_PORTFOLIO2_DATE_DESC_TEXT').'"
data-readmore-text="'.JText::_('MOD_NEWS_PRO_GK5_NSP_READMORE').'"
data-desc="'.implode(' ', array_slice(explode(' ', strip_tags($this->parent->content[$i]['text'])), 0, 30)).'... "';';


See number 30 at the end of the code, that is the number of word it would cut out from, so change that to your required word limit.
Save and close the file.

2. Changes to "script.jquery.js".
Find Line: 36 which is below.

Code: Select all

var popup_content = '<a href="#" class="gkPortfolioPrev">&laquo;</a><a href="#" class="gkPortfolioNext">&raquo;</a><a href="#" class="gkPortfolioClose">&times;</a><div><div class="gkPortfolioImage"></div><div class="gkPortfolioDesc"><h3 class="gkPortfolioTitle"></h3><small class="gkPortfolioCategory"></small><span class="gkPortfolioAuthor"></span><span class="gkPortfolioDate"></span></div></div>';


Replace it with below code.

Code: Select all

var popup_content = '<a href="#" class="gkPortfolioPrev">&laquo;</a><a href="#" class="gkPortfolioNext">&raquo;</a><a href="#" class="gkPortfolioClose">&times;</a><div><div class="gkPortfolioImage"></div><div class="gkPortfolioDesc"><h3 class="gkPortfolioTitle"></h3><small class="gkPortfolioCategory"></small><span class="gkPortfolioAuthor"></span><span class="gkPortfolioDate"></span><span class="gkPortfolioDescText"></span></div></div>';


Find Line: 46 which is below.

Code: Select all

var popup_date = popup.find('.gkPortfolioDate');


Replace it with below code.

Code: Select all

var popup_date = popup.find('.gkPortfolioDate');
var popup_desc = popup.find('.gkPortfolioDescText');


Find Line: 58 which is below

Code: Select all

popup_date.removeClass('active');


Replace it with below code.

Code: Select all

popup_date.removeClass('active');
popup_desc.removeClass('active');


Find Line: 76 which is below

Code: Select all

popup_date.removeClass('active');


Replace it with below code

Code: Select all

popup_date.removeClass('active');
popup_desc.removeClass('active');


Find Line: 103 which is below

Code: Select all

popup_date.removeClass('active');


Replace it with below code

Code: Select all

popup_date.removeClass('active');
popup_desc.removeClass('active');


Find Line: 127 which is below

Code: Select all

popup_date.html('<span>' + img.attr('data-date-text') + '</span>' + img.attr('data-date'));


Replace it with below code.

Code: Select all

popup_date.html('<span>' + img.attr('data-date-text') + '</span>' + img.attr('data-date'));
popup_desc.html('<span>' + img.attr('data-desc-text') + '</span>' + img.attr('data-desc') + '<a class="gkReadmore" href="' + img.attr('href') + '">' + img.attr('data-readmore-text') +'</a>');


Find Lines: 139 to 142 which is below

Code: Select all

                  setTimeout(function() {
                     popup_date.addClass('active');
                     blank = false;
                  }, 500);


Replace it with below code

Code: Select all

                  setTimeout(function() { popup_date.addClass('active'); }, 500);
                  setTimeout(function() { popup_desc.addClass('active');
                     blank = false;
                  }, 500);


Save and close the file.

3. Changes to modules "style.css".
Add following css code to end of style.css file.

Code: Select all

.gkNspPM-Portfolio2 .gkPortfolioDescText {
   display: block;
   margin: 0 0 24px 0;
   opacity: 0;
   top: 50px;
   position: relative;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText {
   border-top: 1px solid #ddd;
   font-size: 15px;
   padding-top: 12px;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText span {
   color: #aaa;
   display: block;
   font-size: 12px;
   line-height: 1;
   margin: 0 0 3px 0;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText.active {
   opacity: 1;
   top: 0;
}
@media (max-width: 840px) {
    .gkNspPM-Portfolio2 .gkPortfolioDescText {
      font-size: 12px;
      padding: 10px 0;
   }
}


4. Changes to "gk.stuff.css"
Add following css code to gk.stuff.css

Code: Select all

.gkNspPM-Portfolio2 .gkPortfolioDescText {
   display: block;
   margin: 0;
   opacity: 0;
   top: 50px;
   position: relative;
   -webkit-transition: all .25s ease-out;
   -moz-transition: all .25s ease-out;
   -ms-transition: all .25s ease-out;
   -o-transition: all .25s ease-out;
   transition: all .25s ease-out;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText {
   border-top: 1px solid #ddd;
   font-size: 15px;
   padding: 16px 0;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText span {
   color: #aaa;
   display: block;
   font-size: 12px;
   line-height: 1;
   margin: 0 0 3px 0;
}
.gkNspPM-Portfolio2 .gkPortfolioDescText.active {
   opacity: 1;
   top: 0;
}


5. Changes to "en-GB.mod_news_pro_gk5.ini".
Add following string to end of file.

Code: Select all

MOD_NEWS_PRO_GK5_PORTAL_MODE_PORTFOLIO2_DATE_DESC_TEXT="Description:"


That's it. It should work now regardless of data source, K2 or Joomla.

Thank you sooo much! I will be trying this out tonight. Gavick Pro support is the best

No problem at all, let us know if you need further help. See you around...

Hi Norman, first of all congratulation for your nice contribution for the NSP module.

I just did the modification to my John's template and it works great!

I have two questions for you:

How would you do it to add something at the end of the description that avoids "cutting short" in a middle of a phrase in a "dead end"? Could you help improving this mod by maybe adding a "read-more" link or a "..." (three dots) ?

I found your post because I wanted to add a link for a popup video instead of a description, could you give a hand with that?
See the following post:

https://www.gavick.com/forums/john-joom ... 67#p201767

Thanks &
Regards

Hi quebecguitare,

Read more with three dots is possible with minor changes, however regarding popup video, how would you or where from are you going to retrieve popup video links ?

Update: Added readmore link to mod and updated edited files.

Hi Norman, I gave a little bit of detail in my previous post with a link. But roughly I thought of using jcemediabox-zoom-image with a youtube link.

Thank you for the updated version with the read-more.

Regards

Hi quebecguitare,

Read more with three dots is possible with minor changes, however regarding popup video, how would you or where from are you going to retrieve popup video links ?

Update: Added readmore link to mod and updated edited files.

Hi quebecguitare,

I mean how we going to retrieve the video links back to nsp pro. Post a sample K2 item which has this plugin enabled so I can see if its possible to retrieve it. Otherwise you might have to use K2 extrafields to simply add the youtube link and retrieve it in nsp and display it with a custom lightbox.

See you around...

Thank you Norman.

The site is offline. Here's the link with the credential I am sending you in PM:
http://miggg.quebecguitare.com/cours-de ... ideoAnchor

Regards.

Hi Norman, how about we keep your nice work and just put the video link after the description AND read-more?

Regards

Hi quebecguitare,
I've done a quick test and added a youtube video as a popup, once clicked on button "Watch Video" it popups and auto plays and a second button "Read More" which displays item and these are placed after the description. There was a lot of errors obviously with jQuery so this needs to be debugged further. So I need to attend to other support queries and will continue on this when I get some free time.

See you around...

Hi Norman, that sounds great! I will use your final debug once you have it.

Please keep me in the loop.

Cheers!

Hi quebecguitare,

Video mod is done, due to space limitation this will not work in small devices. Also due to lots of edits I cannot post changes in here, so use compare tool to see the changes if you have modified your template files.



Changes :
1. Added Video button if item has video...
2. Added read more button...
3. Added Video Title in video.
4. Added read more link in video.
5. This will only work on window width > 800px.
6. This will not work responsive.
7. This will only work with K2 and Joomlaworks Allvideos plugin installed and enabled.
8. This is only if you want to display videos with description otherwise use previous mod below.
9. Attached file has all edits, backup and overwrite your files.
10. I cannot keep updating this mod so use a text editor or compare tool to see changes.
11. Enable Css Override in template settings > advanced settings.
12. You can tweak the css to suit your site.

Usage:
1. While adding new K2 item or editing K2 item, in media tab > media source > use online video service > select youtube.
2. Enter video ID only without url.
That's it...

Versions Used:

Code: Select all

NSP GK5 j3 - v1.7.0.1
Template v3.14


Files Edited:

Code: Select all

modules\mod_news_pro_gk5\portal_modes\portfolio2\controller.php
modules\mod_news_pro_gk5\portal_modes\portfolio2\script.jquery.js
modules\mod_news_pro_gk5\portal_modes\portfolio2\style.css
\language\en-GB\en-GB.mod_news_pro_gk5.ini
templates\gk_john_s\css\gk.stuff.css
templates\gk_john_s\css\override.css
templates\gk_john_s\css\small.tablet.css


See you around...

Hi Norman, well done!

I just one question, I have enabled the CSS overide from the template menu on the backend, but the popup box is not centered. So I had a look the code with a Developer Tool in Chrome.

From what I can see, the ajustment that I need to make in order to center the video box is not in a CSS. In other word, where can I tweak the CSS, do I need to add some variables and tweaks for the width that aren't in the CSS yet?

I also would like to enlarge the field for the title in the popup box; my article titles are too long and this creates 2 lines and moves the "read-more" button another line lower on the video box.

Regards
Cheers.
Alex

Hi quebecguitare,

See following file for following code ( Line 142 )
modules\mod_news_pro_gk5\portal_modes\portfolio2\script.jquery.js
Change left: 421px; top: 980px variables to match your screen.

Code: Select all

<div id="sbox-window" role="dialog" aria-hidden="false" style="z-index: 65557; left: 421px; top: 980px; width: 1040px; height: 620px;" class="shadow">\


For title try Increasing #sbox-info width in override.css, currently it is 50%.

Code: Select all

#sbox-info { width: 50%; }


When I get time I ll try making it responsive etc.

See you around...

Hi Norman, ok all is done and looking nice. I am really looking up to implementing it responsive though.

Wouldn't it be easier to use it with the JCE Media box? That way I think it automatically get the right size with the popup... but what do I know?

https://www.joomlacontenteditor.net/jcemediabox

I notice that hitting the "X" to close the popup reloads the home page, instead of just flushing the popup video. This would be important because people are hypotheticaly going to click on several items in a row (enlarge item, click on the video button, close video, go to next item, repeat etc.).

Good job!
Regards

Hi quebecguitare,

Regarding JCE Mediabox it didn't work out of the box so it was easier for me to append the layout rather then going through scripts to check for compatibility as there wasn't any error to debug.

Regarding homepage reload, I'll look into it but it is not easy getting everything work together. If I find any spare time I ll look into this and see if I can improve it.

See you around....

Hi Norman, any news on this?
We would really like to use it live and responsive.

Best regards.

Hi Norman, I need to translate the buttons "WATCH VIDEO", I can't seems to find the language string for it.
Do you remember?

Thank you
Regards

Anyone on this?

Much appreciated,
Regards

Hi Norman, please help I am about to put my site online and I can't find the line for the translation of the gkWatchVideo button in the NSP module. The "read-more" button goes like this MOD_NEWS_PRO_GK5_NSP_READMORE="Lire la suite"

...but the watch video button doesn't go like this:

MOD_NEWS_PRO_GK5_NSP_WATCHVIDEO="Voir Vidéo"

I've tried all logical possibilities.

Any clues?
Much Apprecitated.
Regards!

Hi Norman, we've addressed this problem before:

Would you have any clues on how to change the page returned after the video is played? For now it reloads the homepage after the video is played. It would be nice to be able to add an anchor like #my-work or another link. It kinda breaks the linearity of the work browsing; always coming back to the top of the page and having to scroll down again to the #my-work section.

An anchor would do. Do you have any advices?

Link: http://www.quebecguitare.ca/

Much appreciated Norman,
Best Regards

Hello!

I did this procedure, with the files available for download on this post.
Was using the old version and it worked well the modification made by the "normanUK".

But now I started a project with Joomla 3.4 and installed the new version of News Show Pro GK5 - 1.8.0.6.
These changes modification made by "normanUK" did not work for the new version of News Show Pro 5, the replacement files do not work in this version.

Simply nothing happens. The k2 of the text field is not loaded on the popup.

I'm using:
Joomla 3.4
K2 - 2.6.9
News Show Pro GK5 - 1.8.0.6.



Temp url: http://amorasamour.web1257.kinghost.net/j34/


"normanUK" could guide me how to proceed in this new version?

I look forward to your help!

Thank you very much!

Hi
same problem as Prates
no changes with J!3.4.0 and NSPGK5 v. 1.8.1
I found every lines to be changed and did the job but nothing happens
It would be great to have the same result with the new NSPGK5 - That would help every users of this version
Can you help us ?
Regards

Hi
same problem as Prates and Repitol.
Help us please.