Curve responsive theme (responsive coppermine theme)

[allvip]

Curve responsive theme is the curve theme made responsive just with css.
You can test the theme for all monitor resolution, tables and phones at http://quirktools.com/screenfly/ after you install it. No need to change the theme from Config. Just type in the box your_domain_name/index.php?theme=curve_responsive.

I only added this styles to styles.css (code from v1.3) :

Code Select Expand


/******START Styles responsive theme*******************/

#cpg_logo_block_logo img {
    max-width: 100%;
    width: 100%!important;
    height: auto!important;
}
.cpg_starttable_outer,
.cpg_starttable_outer div.cpg_starttable_inner {
background-color: #C7D0DB!important;
background-image: none!important;
    }
.albumName,
.thumbsAdmin {
    float: left;
padding: 0.5%;
margin: 0px;
}
.sortorder_cell {
    float: right;
}
#formcell {
    float: left;
}
.thumbnail,
.catrow_noalb img,
.catrow img {
    max-width: 12vw!important;
    height: auto!important;
}
.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
    max-width: 12vw!important;
    overflow: hidden;
word-break: break-all;
}
@media all and (min-width : 0px) and (max-width : 320px) {
    .albumsThumbnails p {
    font-size: 3.2vw!important;
    }
}
@media all and (min-width : 0px) and (max-width : 500px) {
    .catrow_noalb table,.catrow table  {
    font-size: 80%!important;
    }
.alblink a {
    font-size: 80%!important;
    }
.statlink h2 {
    font-size: 3.5vw!important;
    }
body {
padding: 0px!important;
}
#cpg_main_block_outer,
    .cpg_main_block_inner {
padding: 0px!important;
}
#cpg_logo_block_outer,
    #cpg_logo_block_outer div.cpg_logo_block_inner,
    #cpg_header_block_outer,
    #cpg_header_block_outer div.cpg_header_block_inner {
      background-color: #E3E9EF!important;
      background-image: none!important;
    }
.tableb {
padding: 0px!important;
    }
.buttonlist ul li a span {
    height: 3vw!important;
    line-height: 2vw!important;
    }
   .buttonlist ul li a{
    font-size: 3vw!important;
    }
   .navmenu img,.buttonlist img {
    max-width: 3vw!important;
    height: auto;
   }
   .navmenu {
    font-size: 3vw!important;
   }
.tableh2 {
    padding: 0px!important;
    }
.tableh1 {
    font-size: 80%!important;
padding:  0px 2px 0px 0px!important;
    }
.thumbnails {
padding: 0px!important;
}
.thumbsAdmin .admin_menu {
margin: 2%!important;
    }
.thumbsAdmin a {
font-size: 2.5vw!important;
    }
}

.strip_image {
    max-width: 10vw!important;
    height: auto;
}
#film {
    width: 100%!important;   
}
#film .thumb a:link  {
    width: 100%!important;
}
.tape  {
    width: 100%!important;
    height: 100%!important;
    margin-left: 0px!important;
}
.remove {
    display: none!important;
}
.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media td.image {
    background-color: #1E1E1E;
background-repeat:no-repeat;
background-position: center center;
    background-size: contain;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}
#picinfo {
    width: 100%!important;
    overflow: scroll;
}
.sortorder_cell img,.thumb_caption_rating img,#comments img {
    max-width: 2vw!important;
    height: auto!important;
}

#comments #captchaImg img{
    max-width: 25vw!important;
    height: auto!important;
}
.comment_date {
    font-size: 1.8vw!important;
}
/********END Styles responsive theme**************************************/



I also added:
_function <<<$template_add_your_comment>>> to theme.php to add  id="captchaImg".The image for captcha (confirmation for comments) and the smilies must have diffrent widths.
_function <<<$template_thumbnail_view>>>  to theme.php to add  id="tabsMenu".The tabs navmenu and displayimage.php must have diffrent styles.

CHANGES FOR v1.1

For v1.0 I forgot to declare the viewport in curve_responsive/template.html right before <title>{TITLE}</title>:

Code Select Expand


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


I also forgot some text to make it responsive.
You can look it style.css and read from START Styles responsive theme to END Styles responsive theme to see the diffrence between v1.0 and v1.1.
I made no changes to theme.php

CHANGES FOR v1.2
1)You can look in style.css and read from START Styles responsive theme to END Styles responsive theme to see the diffrence between v1.1 and v1.2.
2) I added function $template_thumb_view_title_row and function $template_album_list at the end of theme.php

I removed v1.3. Had some mistakes. I reuploded it on 25/05/2015.

CHANGES FOR v1.3
1) You can look in style.css and read from START Styles responsive theme to END Styles responsive theme to see the diffrence between v1.2 and v1.3.
2) I added function $template_album_list_cat in theme.php (When Config - Album list view - Show first level album thumbnails in categories ON now is responsive too. I forgot about it in the other version)
3) I edited function $template_album_list  in theme.php a little:
changed

Code Select Expand

<img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
to

Code Select Expand

<img src="images/spacer.gif" width="1" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
4) Now when Config - Image view - Insert a transparent overlay to minimize image theft is ON the image is responsive (details  Reply #2)

CHANGES FOR v1.4

I made it to work with The settings for Album list view - Number of columns for the album list MUST BE MAX 3 instead of MAX 2 like in version 1.3.

I replaced:

Code Select Expand


@media all and (min-width : 0px) and (max-width : 320px) {
    .albumsThumbnails p {
    font-size: 3.2vw!important;
    }
}


WITH:

Code Select Expand


@media all and (min-width : 0px) and (max-width : 320px) {
    .albumsThumbnails p {
    font-size: 3.2vw!important;
    }
    .buttonlist ul li a {
    margin-left: 0px!important;
    }
    .album_stat,.tableh2 {
    overflow: hidden;
word-break: break-all;
   } 
}


WEB BROWSERS I TEST IT ON Firefox, Opera, Internet Explorer, Safari, Chrome. Works fine but not on Safari lower then version 6 or 7. Viewports is something new so proabibly does not work on many old version browsers, but users proabibly update their browser every time.

IMPORTANT

Can please someone test the new 1.3 on Apple PC and iphones or phones with Apple OS. I belive only Safari on all PCs is a problem not the Apple OS. I also belive it works on Safari 6 and higher, but is not available for Windows (There is no Safari 6 for Windows. Apple discontinued the Windows version of Safari after 5.1.7.) I don't have an Apple (MAC) PC or Apple iphone, phone or table to test it.

[allvip]

Some details:

IS 100% RESPONSIVE (everything is responsive) but not the admin pages like catmgr.php,pluginmgr.php  etc.

The setting for Config -Thumbnail view- Number of columns on thumbnail page must be a reasonable number like 5 not 10. The settings for Album list view - Number of columns for the album list MUST BE MAX 3 .
If you want a big number for Config -Thumbnail view- Number of columns on thumbnail page change max-width: 12vw!important; for .thumbnail and .thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments with a smaller value like 5vw.

To make images responsive the css rule is:

Code Select Expand


img {
    max-width: 100%!important;
    height: auto;
}


It works only with divs and not with tables.For tables I used viewports:

Code Select Expand


img {
    max-width: 12vw!important;
    height: auto;
}


The image on displayimage.php is also responsive but if you want to use  Images to fit screen resolution plugin ( responsive image plugin ) http://forum.coppermine-gallery.net/index.php/topic,77586.0.html then

delete from style.css:

Code Select Expand


.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}


or uncomment the code like this:

Code Select Expand


/*************************
.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}
**********************************************/


The plugin is better because downscale the image if needed to fit the users screen resolution. A click on the picture scales it to full original size.

[allvip]

When Config - Image view - Insert a transparent overlay to minimize image theft is ON the image itself because background image and the td that has image.gif (the image overlay to prevent image theft) takes the css:

Code Select Expand


.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}


So image.gif has max-width: 70vw!important; and IMG_2996.jpg becomes a background.

The attachments Transparent overlay OFF.jpg and Transparent overlay ON.jpg shows how the image IMG_2996.jpg becomes a background. The entire table structure changes.

This way the image looks hidden (see attachment hidden.jpg). I fixed that in v1.3 adding:

Code Select Expand


.display_media td.image {
    background-color: #1E1E1E;
background-repeat:no-repeat;
background-position: center center;
    background-size: contain;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}


Now is resonsive with Transparent overlay ON too and it looks like in attachments: image transparent overlay ON.jpg and image transparent overlay ON 2.jpg. Is the only fix I can find for this.

Thanks to moklein. He brought it to my attention.

[allvip]

I can not post a DEMO because I made this theme on localhost (my pc).
I made screenshoots to all the pages small browser window: see attachments.

[pols1337]

I didn't use but thanks for creating this!

[whats_up_skip]

Does anyone have an example of this working?

I tried it, but much of the text didn't scale and some of the tables didn't work either.

I am not sure if it is something I have done to the gallery or a configuration issue.

[allvip]

I tried it, but much of the text didn't scale and some of the tables didn't work either.

I notice the text issues, but can you be more specific about the tables?
I will make a new version this week.

I also like to see your gallery with curve responsive theme if you agree. If you have it in the themes folder then I can see it like this: yourdomain/index.php?theme=curve_responsive. No need to change the theme in Config.

[whats_up_skip]

Any idea why I getting a big gap between the Menu and the Breadcrumbs:
http://www.gojapango.com/japan_picture/index.php?cat=16

It is happening on another gallery as well.

[whats_up_skip]

I notice with this theme that when the screen becomes smaller such as one a mobile phone that the outer border/background still shows. It would be good if this disappeared completely.

[whats_up_skip]

I have been looking further into this theme and I can't understand how it is calling or formatting the intermediate image page as there doesn't seem to be a {IMAGE} in the theme.php file.

[allvip]

Any idea why I getting a big gap between the Menu and the Breadcrumbs:
http://www.gojapango.com/japan_picture/index.php?cat=16

It is happening on another gallery as well.

Even the default curve theme has the gap, but if you don't like it then open themes/curve_responsive/style.css and find:

Code Select Expand


.menuheight {      /* IE7 */
    width: 1px;    /* IE7 */
    height: 95px;  /* IE7 */
}


replace 95 with a smaller value like 45 or 25.

[allvip]

I notice with this theme that when the screen becomes smaller such as one a mobile phone that the outer border/background still shows. It would be good if this disappeared completely.

Added to version v1.2.

[allvip]

I have been looking further into this theme and I can't understand how it is calling or formatting the intermediate image page as there doesn't seem to be a {IMAGE} in the theme.php file.

All the functions are in include/themes.inc.php. You must never edit themes.inc.php. They don't have to be in your theme. Only when you want to edit the page that has the image you need to add the function that has {IMAGE} in your theme. This functon is $template_display_media:

Code Select Expand


/******************************************************************************
** Section <<<$template_display_media>>> - START
******************************************************************************/
// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media" nowrap="nowrap">
                        <table width="100%" cellspacing="2" cellpadding="0">
                                <tr>
                                        <td align="center" style="{SLIDESHOW_STYLE}">
                                                {IMAGE}
                                        </td>
                                </tr>
                        </table>
                </td>
            </tr>
            <tr>
                <td>
                        <table width="100%" cellspacing="2" cellpadding="0" class="tableb tableb_alternate">
                                        <tr>
                                                <td align="center">
                                                        {ADMIN_MENU}
                                                </td>
                                        </tr>
                        </table>


<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb tableb_alternate" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb tableb_alternate"><h1 class="pic_title">
                                                {TITLE}
                                        </h1></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb tableb_alternate"><h2 class="pic_caption">
                                                {CAPTION}
                                        </h2></td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;
/******************************************************************************
** Section <<<$template_display_media>>> - END
******************************************************************************/


OR theme_display_image

Code Select Expand


/******************************************************************************
** Section <<<theme_display_image>>> - START
******************************************************************************/
function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $CONFIG, $LINEBREAK;

    $superCage = Inspekt::makeSuperCage();

    $width = $CONFIG['picture_table_width'];

    echo '<a name="top_display_media"></a>'; // set the navbar-anchor
    starttable();
    echo $nav_menu;
    endtable();

    starttable();
    echo $picture;
    endtable();
    if ($CONFIG['display_film_strip'] == 1) {
        echo $film_strip;
    }


    echo $votes;

    $picinfo = $superCage->cookie->keyExists('picinfo') ? $superCage->cookie->getAlpha('picinfo') : ($CONFIG['display_pic_info'] ? 'block' : 'none');
    echo $LINEBREAK . '<div id="picinfo" style="display: '.$picinfo.';">' . $LINEBREAK;
    starttable();
    echo $pic_info;
    endtable();
    echo '</div>' . $LINEBREAK;

    echo '<a name="comments_top"></a>';
    echo '<div id="comments">' . $LINEBREAK;
        echo $comments;
        echo '</div>' . $LINEBREAK;

}
/******************************************************************************
** Section <<<theme_display_image>>> - END
******************************************************************************/



You can find all the functions in themes/sample/theme.php. Anytime you need to make changes, just add the function you need to theme/your_theme_name/theme.php and make changes. Do not copy them from include/theme.inc.php.

[whats_up_skip]

Thanks again for your work on this.

I have been having a go at making some adjustments, but I seem to break as much as I fix. You can see what I have done so far:
http://www.gojapango.com/japan_picture/displayimage.php?album=60&pid=1436&theme=curve_responsive_craig

Even works ok on the thumbnails.php?album page: http://www.gojapango.com/japan_picture/thumbnails.php?album=60&theme=curve_responsive_craig

There are clearly still many problems I haven't worked through:
Breadcrumbs are going below their bar and the links are too close together.
Navigation bar just below: text is too small and the up down arrows are too small and too close together.
Navigation bar at the bottom of the page: text is too small, individual page links are on top of each other.


index.php?cat is a real problem. The pictures need to be aligned above the text as is the case for the thumbnails.php?album page

[whats_up_skip]

The main table in index.php?cat doesn't seem to be working responsively.

It isn't obvious why as the code basically looks responsive, with the possible exception of

Code Select Expand


.tableb {
    background: #F0F4F7 ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}


Particularly the padding left and right are fixed, not percentages, but this isn't the real cause of the problem.

I notice with thumbnails.php?album pages that the code for defining the table is very different using three columns:

Code Select Expand


<!-- Start standard table -->
<table align="center" width="100%" cellspacing="1" cellpadding="0" class="maintable ">

        <tr>
            <td colspan="3" align="left">
                <div class="cpg_starttable_outer">
                    <div class="cpg_starttable_inner">


Where as index.php?cat

Code Select Expand


<!-- Start standard table -->
<table align="center" width="100%" cellspacing="1" cellpadding="0" class="maintable ">

        <tr class="tableb tableb_alternate">

        <td width="34%" valign="top">
        <table width="100%" cellspacing="0" cellpadding="0">


I haven't been able to get any further than this so far.

[allvip]

Your website loads very slow, but I can see it works. Is responsive.

[whats_up_skip]

Your website loads very slow, but I can see it works. Is responsive.

Was it one particular page or the whole site that was slow?

It shouldn't be. It is a lightly loaded dedicated server in the USA.

[allvip]

It shouldn't be. It is a lightly loaded dedicated server in the USA.

Sorry my internet connection was slow, not your gallery.
I will release a new version of the theme in 2 days with your suggestions.
Thanks.

Thanks again for your work on this.

I have been having a go at making some adjustments, but I seem to break as much as I fix. You can see what I have done so far:
http://www.gojapango.com/japan_picture/displayimage.php?album=60&pid=1436&theme=curve_responsive_craig

Even works ok on the thumbnails.php?album page: http://www.gojapango.com/japan_picture/thumbnails.php?album=60&theme=curve_responsive_craig

There are clearly still many problems I haven't worked through:
Breadcrumbs are going below their bar and the links are too close together.
Navigation bar just below: text is too small and the up down arrows are too small and too close together.
Navigation bar at the bottom of the page: text is too small, individual page links are on top of each other.
index.php?cat is a real problem. The pictures need to be aligned above the text as is the case for the thumbnails.php?album page

Breadcrumbs -solved.
Navigation bar (if you mean the sort option I changed it to drop down menu that is more fit for small screens)
Navigation bar at the bottom of the page: users can use Jump to page on small screens.

[whats_up_skip]

Sorry my internet connection was slow, not your gallery.

OK, had me worried there for a moment

I will release a new version of the theme in 2 days with your suggestions.
Thanks.

I look forward to it. Thanks again for all you work on this theme. I just wish I could be of more help.

[allvip]

whats_up_skip let me know what else is not ok.