Recent Topics

[4.1.x] photoblog improvements / slide show

Started by on Sep 06, 2012 – Contents updated: Jul 23, 2013

Sep 06, 2012 15:47    

My b2evolution Version: 4.1.x

Hello gals and guys :)

I'm not (yet) a great specialist in developping skins, but I managed to improve (this is my point of view) the photoblog skin. Here are the changes that I made :

* 1/ changed photos Index display to limit to main category; this allows to display only the thumbs corresponding to a particular album instead of all albums (in this limited display, a link is provided to get the full display)

* 2/ added a display of the status private or protected (usefull to remind you which posts are reallly published when browsing the albums)

* 3/ added the possibility to navigate in the album with left/right arrow keys; in addition, Ctrl + right arrow-key = displays the photo index; Ctrl + left arrow-key = displays the initial post of the photoblog. (edited)

* 4/ added links to share with Facebook or Google+ without linking to any remote site iin your posts

* 5/ added a slide show with variable delay

The files concerned by these changes are
* _html_header.inc, _item_block.inc, _mediaidx.disp
* and /inc/widgets/widgets/_coll_media_index.widget.php

I added 1 javascripts (edited)
* jl_photoblog.js

(edited) for non-french and non-englih, you should add your language directory in photojl/locales/ and put there a copy of the file found in the fr-FR directory modified with the translations in your own language

You may want to first see a demo ? Please visit my photoblog:
http://www.le-fataliste.fr/photo
(main menu is in french, if you don't understand click on any item)

(edited) A complete copy of the skin directory may be loaded from this post
http://www.le-fataliste.fr/blabla/atelier.php/enhanced-photoblog

New I also describe a slide show which can be included in any type of blog in this post : http://www.le-fataliste.fr/blabla/atelier/jl-diarama

- the name of the skin is photojl (may be changed);
- copy the unzipped file to the your-blog/skins sub-dir

- inside the photojl dir, you'll find a file named
backup_see-warning-inside_coll_media_index.widget.php
you have to copy this file in the following dir:
your-blog/inc/widgets/widgets/
Then process as follows:
- rename the original _coll_media_index.widget.php to
_coll_media_index.widget.php.bak (for instance)
- rename the new file to
_coll_media_index.widget.php

** more explanations are given as comments in index.main.php and in any modified file

- import and install like any other skin

- Enjoy !

Since I'm not an expert in b2evo programming, I probably missed some points which would have made the modifications more elegant ?

Comments and criticisms wellcome.
best regards.
Jacques Louvel

Sep 06, 2012 19:49

Here's how you get current blog URL.

PHP

echo $Blog->gen_blogurl(); // current blog URL

There's no special property that define a blog as "protoblog", all depends on the skin you are using. So what you can do is get all blogs that use a skin named "photojl". Let me know if that's what you want.

Sep 06, 2012 20:14

@sam2kb : Great! This is exactly what I needed. I understood tha the photoblog is nothing else than a blog :)

So I edited my previous post to remove the description of the extra steps no longer needed. The only other extra change that remains to be done by the user is in the language file.

Sep 06, 2012 20:34

You can add translation files to your skin. And put only one string in that _global.php
/yourskin/locales/fr_FR/_global.php

Then instead of T_('my string') you use $Skin->T_('my string')
If the $Skin variable is not available make add this at the top of your file

PHP

global $Skin;

Sep 06, 2012 20:36

/yourskin/locales/fr_FR/_global.php

PHP

<?php
if( !defined('EVO_MAIN_INIT') ) die'Please, do not access this page directly.' );
 
$trans['fr_FR'] = array(
'__meta__' => array('format_version'=>1'charset'=>'iso-8859-1'),
'' => '',
'my string' => 'my translation',
);
?>

Sep 06, 2012 22:51

i have also kind of made photoblog into sth different here:
http://www.tilqi.com/resimli-sozler.php

The idea was to make it look as much like FB without actually using their copyrighted stuff.Let me know if you see anything you like

Sep 06, 2012 23:39

sam2kb wrote:

You can add translation files to your skin. And put only one string in that _global.php
/yourskin/locales/fr_FR/_global.php

Then instead of T_('my string') you use $Skin->T_('my string')
If the $Skin variable is not available make add this at the top of your file

PHP

global $Skin;

Thanks for these interesting pieces of info :)
I have no problem with adding a new string in the french language file. But anyone using my version of the photoblog will have to add the string in his/her own language file ? Or is there something I do not get ?

Sep 06, 2012 23:45

Instead of touching global translation file you can create a new locales folder in your skin and add missing/new translation strings there. For that to work you have to use $Skin->T_() function instead of just T_().

Here's the edited file

PHP

// JL120905 mod 1 continued
global $jl_main_cat$Skin;
if($jl_main_cat == 24){ $jl_main_cat ''$jl_main_cat_name 'Tous';};
// End of JL120905 mod 1
// --------------------------------- START OF MEDIA INDEX --------------------------------
skin_widgetarray(
        // CODE for the widget:
        'widget' => 'coll_media_index',
        // Optional display params
        'block_start' => '',
        'block_end' => '',
        'block_display_title' => false,
        'thumb_size' => 'fit-80x80',
        'thumb_layout' => 'grid',
        'grid_start' => '<table class="image_index" cellspacing="3">',
        'grid_end' => '</table>',
        'grid_nb_cols' => 8,
        'grid_colstart' => '<tr>',
        'grid_colend' => '</tr>',
        'grid_cellstart' => '<td>',
        'grid_cellend' => '</td>',
        'order_by' => $Blog->get_setting('orderby'),
        'order_dir' => $Blog->get_setting('orderdir'),
        'limit' => 9999,
    ) );
// ---------------------------------- END OF MEDIA INDEX ---------------------------------
// JL120905 mod 1 continued
if($jl_main_cat != '')
{
    echo '<center><a href="/blabla/photos/?disp=mediaidx" style="color:jlyellow;">'.$Skin->T_('Show all Albums (clic)').'</a></center>';
    $jl_main_cat '';
};

Sep 07, 2012 00:11

sam2kb wrote:

Instead of touching global translation file you can create a new locales folder in your skin and add missing/new translation strings there. For that to work you have to use $Skin->T_() function instead of just T_().
[clip]

Thanks again for the help. I did what you suggested (finished just now)
regards.
Jacques

Sep 07, 2012 14:58

leFataliste wrote:

My b2evolution Version: 4.1.x [...]I managed to improve (this is my point of view) the photoblog skin. Here are the changes that I made : [skip]
* 3/ added the possibility to navigate in the album with left/right arrow keys; in addition, Ctrl + right arrow-key = displays the photo index; Ctrl + left arrow-key = displays the initial post of the photoblog. (edited)

Correction : the arrow-keys nav is now active also in the "single post" display mode. Please load the new version :
http://www.le-fataliste.fr/blabla/media/shared/photojl.zip
regards,
Jacques

Sep 09, 2012 12:22

Hi,

Is there a way to include the file :
inc/widgets/widgets/_coll_media_index.widget.php
in a skin directory. I tried to create a "widgets" or "widgets/widgets" or "inc/widgets/widgets" sub dr in my modified skin directory and to put the file there, but it didn't work. :(

regards,
Jacques

Sep 09, 2012 19:27

PHP

in a skin directoryI tried to create a "widgets" or "widgets/widgets" or "inc/widgets/widgets" sub dr in my modified skin directory and to put the file therebut it didn't work. Sad

It doesn't work that way.

Try this

PHP

skin_widgetarray(
        // CODE for the widget:
        'widget' => 'coll_media_index',
        // Add optional widget params here
        'block_display_title' => false,
        'thumb_layout' => 'grid',
    ) );

Sep 09, 2012 20:25

Hello,
Thanks for your answer to my post.
In fact I have seen what you wrote in the mediaidx.disp.php file.
However, I do not see any parameter which could do what I need.

I modified the file _coll_media_index.widget in the function "display($params)" as follows :

$SQL->WHERE( 'cat_blog_ID IN ('.$list_blogs.')' ); // fp> TODO: want to restrict on images :]
$SQL->WHERE_and( 'post_status = "published"' ); // TODO: this is a dirty hack. More should be shown.
if( !empty($jl_main_cat) ){ $SQL->WHERE_and('post_main_cat_ID = ' . $jl_main_cat);};
$SQL->WHERE_and( 'post_datestart <= \''.remove_seconds( $localtimenow ).'\'' );
$SQL->GROUP_BY( 'link_ID' );
$SQL->LIMIT( $this->disp_params[ 'limit' ]*4 ); // fp> TODO: because we have no way of getting images only, we get 4 times more data than requested and hope that 25% at least will be images :/

** see the bold line.

So I think that this is a modification which has not been considered :(
Or do you have a solution for this which could involve juste a change in the skin dir ?

regards.
Jacques

Sep 09, 2012 22:19

This should work

PHP

* * *
// Add optional widget params here
'block_display_title' => false,
'thumb_layout' => 'grid'
'ji_main_cat' => 778,

and

PHP

if( $this->disp_params['ji_main_cat'] ) $SQL->WHERE_and('post_main_cat_ID = '.$this->disp_params['ji_main_cat']);

Sep 10, 2012 11:18

sam2kb wrote:

This should work

PHP

* * *
// Add optional widget params here
'block_display_title' => false,
'thumb_layout' => 'grid'
'ji_main_cat' => 778,

and

PHP

if( $this->disp_params['ji_main_cat'] ) $SQL->WHERE_and('post_main_cat_ID = '.$this->disp_params['ji_main_cat']);

Ok, thanks, I tried, but it didn't work.
Where to put the second part ? If it is in the _coll_media_index file, then this doesn't solve the problem which is to limit modifications to the skins sub-dir...
regards. Jacques

Oct 04, 2012 17:13

leFataliste wrote:

My b2evolution Version: 4.1.x
(skip) * 5/ added a slide show with variable delay

I recently made a few changes in the slide-show option :
- added a visual indication of elapsing time
- the slide-show may be stopped with escape key
check this here :
http://www.le-fataliste.fr/blabla/photos.php/la-chaine-des-puys/

A full copy of the modified skin can be downloaded from here:
http://www.le-fataliste.fr/blabla/atelier/enhanced-photoblog

NEW a plugin for a slide show that you may insert in a post in any type of blog is described there :
http://www.le-fataliste.fr/blabla/atelier/a-slide-show-in-a-post

regards. Jacques

Jan 31, 2013 08:25

Can you tell me please the exactly code of this plugin to the post? Because I can not make a correct syntax...

Feb 05, 2013 10:21

@spyrou wrote:

Can you tell me please the exactly code of this plugin to the post? Because I can not make a correct syntax...

It seems that I received a late warning concerning this post... I already answered to a direct message contact. My answer was that the code is given in the description of the plugin visible in the "Plugins" tab of the "General settings" (in the back office). To better understand the code parameters, please read my page here : http://www.le-fataliste.fr/blabla/atelier/a-slide-show-in-a-post

Jul 17, 2013 14:22

Hi,
I have tried using your modified skin, but facing issues related to FB & Google+ button.
After applying the skin, in the blog I'm getting below text. I have translated the title but before also it was showing the same.
Share » Beautiful Spider&src=sp" title="This link opens a new window to share this post on your Facebook wall (if you have a Facebook profile, of course)" target="_blank">Share this post on Facebook Beautiful Spider" title="This link opens a new window to share this post on your Google+ profile (if you have a G+ profile, of course)" target="_blank">Share this post on Google+
Check the attached screenshot.
It seems there is a syntax issue in the code, but I'm not good with PHP.
Below is the line of the code

PHP

echo ' <a href="http://www.facebook.com/sharer.php?u='; echo $Item->permanent_url(); echo '&t='; echo $Item->title(); echo '&src=sp" title="This link opens a new window to share this post on your Facebook wall (if you have a Facebook profile, of course)" target="_blank"><img style="width:22px;vertical-align:-5px;" src="img/fb.png" alt="Share this post on Facebook" /></a>';
echo ' &nbsp;<a href="https://plus.google.com/share?url='; echo $Item->permanent_url(); echo '" &title="'; echo $Item->title(); echo '" title="This link opens a new window to share this post on your Google+ profile (if you have a G+ profile, of course)" target="_blank"><img style="width:21px;vertical-align:-4px;" src="img/gplus-32.png" alt="Share this post on Google+" /></a>';
echo '</div>';

Can anybody help me to correct it?

Jul 17, 2013 18:10

In my opinion, you are maybe facing a character set problem. Try to write the code using plain ascii. (I suppose that you made the translation in a word processor and then pasted back the result in the php file ?) Second point : check that you have the required images in the appropriate location; check also that the the files have the right attributes to be red by anybody...

Here is the working code as it appears in the file _item_block.inc.php (there is no syntax issue in it, but it may fail depending on the content of your title - I forgot to test for the presence of simple or double quotes which are not allowed):


PHP

echo ' <div class="action_right" style="margin-top:-7px;">';
    echo ' <span style="color:white;">Share »</span>';
    echo ' <a href="http://www.facebook.com/sharer.php?u='; echo $Item->permanent_url(); echo '&t='; echo $Item->title(); echo '&src=sp" title="This link opens a new window to share this post on your Fracebook wall (if you have a Facebook profile, of course)" target="_blank"><img style="width:22px;vertical-align:-5px;" src="img/fb.png" alt="Share this post on Facebook" /></a>';
    echo '  <a href="https://plus.google.com/share?url='; echo $Item->permanent_url(); echo '" &title="'; echo $Item->title(); echo '" title="This link opens a new window to share this post on your Google+ profile (if you have a G+ profile, of course)" target="_blank"><img style="width:21px;vertical-align:-4px;" src="img/gplus-32.png" alt="Share this post on Google+" /></a>';
    echo '</div>';

Please tell me when you find what's wrong.
If you need more help, you should give the url of your site.
Regards,
Jacques

Jul 17, 2013 19:47

Hi Jacques,

Thanks a lot for the information.

The link to the blog: http://nerurkars.in/blogs/index.php/Photoblog/

I'm not sure if it is due to the translation, since when I applied the skin for the first time, that time too I was facing the same issue.
The issue starts after '&src=sp" statement.
Also if I access the url to the blog then I face this issue.
But when I access the post then the skin shows properly. Here is the link to the post: http://nerurkars.in/blogs/index.php/Photoblog/beautiful-spider-1

There is another issue, I'm not able to view the enlarged image after clicking on the image in the post.

Can you check what could be the issue?
The php file is also attached.


Attachments:

Jul 17, 2013 22:08

Ok. I've seen where the issue is : you have a link on your titles. You should disable this feature. I don't remember precisely where is this setting, but as soon as I find it I tell you. Meanwhile you should explore the photblog settings to try to find it. Also there is a part that you did not translate. It says "Réagir" you should translate to "React" or "Comment"
Regards. Jacques

Jul 17, 2013 22:31

I found the location of the setting to remove the link on the titles.
Go to the back office.
Select the tab for your Photoblog
then select the SEO tab
Under "Post titles" select "No link on titles" (or similar options since I have a french version and I do not know what it says exactly in English).

I think that this should solve the problem. Please tell me.
Can you tell which version of b2evo you are using ?

Concerning the fact that a click on the photo does nothing : look Inside the _item_block.inc.php and in the image properties array locate the following setting

'image_link_to' => '', // Can be 'orginal' (image) or 'single' (this post)

put original between the 2 empty single quotes.
But this could interfere with my "slideshow in a post" option if you also want to use it.

Regards
Jacques

Jul 18, 2013 07:52

Hi Jacques,

Thanks a lot, it worked! I had to type 'original' rather than 'orginal' which was taking me back to the default blog.
Regarding the translation yes, I have not translated all the text due to these issues. Thanks a lot for improving such a potential skin for photographers.
I'll keep bugging you for more :), since I'm not that skilled with coding.

Jul 18, 2013 10:06

Hi Jacques,

Now when I click on photo in the post it opens the original photo in the same window.
In case of original photoblog screen there was a dynamic window which was overlayed in the browser, but with the reduced size, not the original size.
Is there any way to achieve this in your skin?

Jul 18, 2013 17:57

Hi Abhi
I'm sorry but I never saw what you describe in the original photoblog (by the way you did not told me what is your version of b2evo; it may be is v5 which I did not try yet ?). In v4.1.x, clicking on the image opens it full size in the current window with no provision to go back except with the help of the browser. This is why I disabled this feature in my modified photoblog. The settings for the image parameters is not mine. It was there in the original photoblog. in v4.1.x, the behavior that you describe is that of the files window in the back office : if you click on a miniature you open a new window with the image in its original size and the legend below (if one has been entered).

I checked the demo for v5 and it behaves like you said. So since what you want is the default behavior in v5, the solution is maybe to simply comment the parameter line (see below)

'before' => '<div class="bImages">',
'before_image' => '<div id="jl_bImg" class="image_block">',
'before_image_legend' => '<div class="image_legend">',
'after_image_legend' => '</div>',
'after_image' => '</div>',
'after' => '</div>',
//'image_link_to' => '', // Can be 'original' (image) or 'single' (this post)
'image_size' => 'fit-720x500',

Then I shall have to test my photoblog version with b2evo v5... Until that, it is possible that some other issue arise :(
Please keep me informed with your own experience. Thank you.

regards
Jacques

Jul 18, 2013 18:31

@lefataliste : when you post to the forums, instead of the codespan button you should use the PHP button to mark PHP code.

Jul 18, 2013 18:39

@fplanque wrote earlier:

@lefataliste : when you post to the forums, instead of the codespan button you should use the PHP button to mark PHP code.

Thanks François. I'll do so.
For what I saw of the new behavior of v5 concerning the display of original photos, it's a great improvement ! Thanks also for that. I expect a lot of goodies when I switch (but since I modified quite a few files, I have first to carefully save them.
Regards.
Jacques

Jul 18, 2013 18:55

note: ideally you should carefully save a backup of everything, not just the files you modified ;) You never know what you may have missed.

Jul 18, 2013 19:39

@lefataliste wrote earlier:

Hi Abhi
I'm sorry but I never saw what you describe in the original photoblog (by the way you did not told me what is your version of b2evo; it may be is v5 which I did not try yet ?). In v4.1.x, clicking on the image opens it full size in the current window with no provision to go back except with the help of the browser. This is why I disabled this feature in my modified photoblog. The settings for the image parameters is not mine. It was there in the original photoblog. in v4.1.x, the behavior that you describe is that of the files window in the back office : if you click on a miniature you open a new window with the image in its original size and the legend below (if one has been entered).
I checked the demo for v5 and it behaves like you said. So since what you want is the default behavior in v5, the solution is maybe to simply comment the parameter line (see below)

PHP

'before' =>                    '<div class="bImages">',
    'before_image' =>           '<div id="jl_bImg" class="image_block">',
    'before_image_legend' => '<div class="image_legend">',
    'after_image_legend' =>   '</div>',
    'after_image' =>             '</div>',
    'after' =>                      '</div>',
    //'image_link_to' =>           '',  // Can be 'original' (image) or 'single' (this post)

'image_size' => 'fit-720x500',
Then I shall have to test my photoblog version with b2evo v5... Until that, it is possible that some other issue arise :(
Please keep me informed with your own experience. Thank you.
regards
Jacques

Thanks a lot Jacques. I already tried commenting that line but unfortunately that didn't help.
My version of B2Evolution is 4.1.5.
I compared both the skins (original vs your version) but could not find the difference.
Else everything is running fine, including slideshow. In the mean time I'm playing with the style.
Hope you will find the solution.

Jul 19, 2013 23:44

@abhijitkn wrote earlier:

Thanks a lot Jacques. I already tried commenting that line but unfortunately that didn't help.
My version of B2Evolution is 4.1.5.
I compared both the skins (original vs your version) but could not find the difference.
Else everything is running fine, including slideshow. In the mean time I'm playing with the style.
Hope you will find the solution.

I finally found why the click on the image did not work as you were expecting.
I developped my modified version starting from an early version of the photoblog which did not include the skin class which does the job that you want. I think that the solution is simply to add this class into the directory (I join it). But be carefull : this class is for a skin the name of which is photojl. In case you adopted a different name, you'll have either to switch back to the name that I proposed or to change the name Inside the class. For the second solution : open the file, locate the line "class photojl_Skin extends Skin" (close to the top of file)
and replace "photojl" by the name of your skin; then save. Put the file into your modified photoblog directory. Note that this works with the parameter line "'image_link_to' => 'original'" or commented out in the file _item_block.inc.php
Regards
Jacques


Attachments:

Jul 20, 2013 00:16

Hi Jacques,

That worked!
Earlier I too tried copying that class file from Photoblog skin, but made a stupid mistake that, didn't change the skin name.
& now I have upgraded to 5.0.4, there are few issues I'm facing. Will try to solve them or else will get back to you.
Thanks a lot!

Jul 20, 2013 11:02

@abhijitkn wrote earlier:

Hi Jacques,
That worked!
Earlier I too tried copying that class file from Photoblog skin, but made a stupid mistake that, didn't change the skin name.
&amp; now I have upgraded to 5.0.4, there are few issues I'm facing. Will try to solve them or else will get back to you.
Thanks a lot!

I'm happy that it worked also for you. Thanks for the feedback.
Concerning the upgrade to version 5.0.4 I'm afraid that I shall not be of great help right now since I'm myself not yet ready with that new version.
Regards.
Jacques

Jul 20, 2013 16:47

Hi Jacques,

The skin is working fine. There was issue regrading linking images with the post. But it was due to the media folder link in the blog. Corrected the path. Now it's working as expected.

Jul 20, 2013 19:43

@abhijitkn wrote earlier:

Hi Jacques,
The skin is working fine. There was issue regrading linking images with the post. But it was due to the media folder link in the blog. Corrected the path. Now it's working as expected.

Ok. Great !
Have you seen the "sideshow in a post" which comes as a complement of my modified version of the photoblog ? If not, have a look at this example (it's on my personnal blog) :
http://www.le-fataliste.fr/blabla/photos.php/belle-ile-elements-de-flore-littorale
If this correspond to your needs, then visit this page :
http://www.le-fataliste.fr/blabla/atelier.php/a-slide-show-in-a-post
Regards
Jacques

Jul 20, 2013 20:50

Yeah, I liked it. Will try out for sure.
But I feel, this skin is much more capable than the current version. Since it's a photoblog, how about adding an index of thumbnails on the right, since there is a lot of space which can be used or adding at least the titles of the post on right. This will be useful for the visitors to walk through the blog. Would love to have a sidebar.
There was mention of adding sidebar to the photoblog. I'll try it out.

Jul 20, 2013 22:13

Hi Jacques,

Now I have added the sidebar to your photoblog skin. Also started using widgets.
But the issue is the post is pushed downwards on the page. Here is the link: http://nerurkars.in/blogs/index.php/Photoblog/

Can you tell me how to bring the post up from the top of page?

Jul 21, 2013 01:12

Hi Abhijit
@abhijitkn wrote earlier:

Hi Jacques,
Now I have added the sidebar to your photoblog skin. Also started using widgets.
But the issue is the post is pushed downwards on the page. Here is the link: http://nerurkars.in/blogs/index.php/Photoblog/
Can you tell me how to bring the post up from the top of page?

The photoblog was designed without side bars...
If you like to have one, why not simply use a standard blog with a side bar ? Then it's easy to insert a photo-index Inside the bar.
Regards.
Jacques

Jul 21, 2013 07:54

Hi Jacques,

I do not want to use other skin due to the layout of this skin.
I have already added the sidebar but facing issue with the position of the post.
Appreciate if you could help.


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.