forum.coppermine-gallery.net
Support => cpg1.5 themes (visuals) => cpg1.5.x Support => cpg1.5 theme contributions => Topic started by: allvip on July 14, 2014, 11:03:49 pm
-
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) :
/******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>:
<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 <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
to <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:
@media all and (min-width : 0px) and (max-width : 320px) {
.albumsThumbnails p {
font-size: 3.2vw!important;
}
}
WITH:
@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.
-
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:
img {
max-width: 100%!important;
height: auto;
}
It works only with divs and not with tables.For tables I used viewports:
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:
.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:
/*************************
.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.
-
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:
.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:
.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 (http://forum.coppermine-gallery.net/index.php?action=profile;u=124975). He brought it to my attention.
-
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.
-
I didn't use but thanks for creating this!
-
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.
-
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.
-
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.
-
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.
-
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.
-
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:
.menuheight { /* IE7 */
width: 1px; /* IE7 */
height: 95px; /* IE7 */
}
replace 95 with a smaller value like 45 or 25.
-
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.
-
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:
/******************************************************************************
** 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
/******************************************************************************
** 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.
-
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
-
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
.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:
<!-- 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
<!-- 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.
-
Your website loads very slow, but I can see it works. Is responsive.
-
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.
-
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.
-
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.
-
whats_up_skip let me know what else is not ok.
-
I feel a bit dumb, but where do I find your responsive theme ?
thanks, Martin
-
whats_up_skip let me know what else is not ok.
Sorry for getting back to you in a timely manor. I will try the new update really soon.
Thanks again for all your hard work on this theme.
-
I feel a bit dumb, but where do I find your responsive theme ?
thanks, Martin
There is a link/attachment at the bottom of the first post. You only need to download the latest version.
-
completely overlooked it, thanks for the help.
-
For some reason on my iphone 4S iOS 7.1.2 portrait, thumbnail view will not fit on the screen when I set 'display file caption' to on. Fits perfectly well without the file captions. File captions do not seem to take any more space then the thumbnail itself, but the margins seem to grow. I do not see this happen when I reduce the size of the window on my laptop, nor does it show when I test in screenfly.
I have been searching for a reason, but am unable to find it. Do you have any idea why this is happening (I tried different browsers...) ?
thanks, Martin
-
Intermediate images show the same problem, they are about twice the screenwidth.
On a shrinked window on my laptop, the width does get adjusted by cropping the
image, but the height stays the same. I gather the surrounding table gets resized in
width and the image overflow gets hidden...
-
For some reason on my iphone 4S iOS 7.1.2 portrait, thumbnail view will not fit on the screen when I set 'display file caption' to on. Fits perfectly well without the file captions. File captions do not seem to take any more space then the thumbnail itself, but the margins seem to grow. I do not see this happen when I reduce the size of the window on my laptop, nor does it show when I test in screenfly.
I have been searching for a reason, but am unable to find it. Do you have any idea why this is happening (I tried different browsers...) ?
thanks, Martin
I relesed v1.3. I added word-break: break-all; because on small space a big word does not have space to show.
-
the height stays the same.
Responsive is about width. An website page can be as long as she wants. Users scroll.
Intermediate images show the same problem, they are about twice the screenwidth.
On a shrinked window on my laptop, the width does get adjusted by cropping the
image, but the height stays the same. I gather the surrounding table gets resized in
width and the image overflow gets hidden...
Because Config - Image view - Insert a transparent overlay to minimize image theft is ON
More details on Reply #2 page 1.
-
I relesed v1.3. I added word-break: break-all; because on small space a big word does not have space to show.
Works great now, thanks
-
Found something strange (in my eyes), see attachment.
Didn't expect to find this in a rendered page ?
-
Found something strange (in my eyes), see attachment.
Didn't expect to find this in a rendered page ?
Is not strange at all in a rendered page. Is OK like that. Is the token for the slideshow button.
If you don't want to post your gallery link here, you can send it to me at allvip.us@gmail.com
-
The gallery is at www.verwonderwolken.nl.
I will try it on windows xp tomorrow (have
to get some sleep, been working all day and
also this evening...). I tried it on Safari on
my Mac and it seems that the thumbnails
are not responsive there at all....
Will dive into that tomorrow as well.
best wishes, Martin
Thanks, I will let you know if I might stumble into a fix... (for Safari)
best wishes and a nice weekend,
Martin
-
Thanks moklein (http://forum.coppermine-gallery.net/index.php?action=profile;u=124975) and whats_up_skip (http://forum.coppermine-gallery.net/index.php?action=profile;u=2578) for your suggestions.
Let me know if v1.3 is OK or you want something to be diffrent.
I deleted a few post because the thread was too long. I "commpressed" them in previous posts.
-
Made some changes to fit my needs, but 1.3 works fine.
thanks, Martin
-
ShaneOss made the dark version of this theme that shoud have her own topic so I moved it here http://forum.coppermine-gallery.net/index.php/topic,78480.0.html (http://forum.coppermine-gallery.net/index.php/topic,78480.0.html).
Thank you for your contribution.
-
Hello allvip and the others,
I also used your css hints to make coppermine responsive, and it worked great. Thank you!
As you said that you have to choose 2 columns for the album overview - is this still valid today? It would be great if I could choose 3, but this doesn't work, indeed. Perhaps anyone has a new idea to enable 3 columns there?
kind regards,
Peter
-
I will definitely take a look at this as soon as I can.
I've been trying to code a responsive theme for CPG for at least three months now but I never got passed the navigation/table parts.
Thank you.
-
Hello allvip and the others,
I also used your css hints to make coppermine responsive, and it worked great. Thank you!
As you said that you have to choose 2 columns for the album overview - is this still valid today? It would be great if I could choose 3, but this doesn't work, indeed. Perhaps anyone has a new idea to enable 3 columns there?
kind regards,
Peter
I made a new version 1.4 that allows you to choose 3 for the album overview. Read the first post to read the CHANGES FOR v1.4 and download it. It can be done even to allow 5 columns but the text will be to small like the thumbnails text.
I never got passed the navigation/table parts.
Thank you.
http://forum.coppermine-gallery.net/index.php/topic,78591.0.html (http://forum.coppermine-gallery.net/index.php/topic,78591.0.html)
http://forum.coppermine-gallery.net/index.php/topic,78596.0.html (http://forum.coppermine-gallery.net/index.php/topic,78596.0.html)
-
Just tried using this theme and it seems good, but one of my questions when using a mobile is about "Album list". When using a pc you get the options of last upload, last comments etc. but with a mobile those options appear then immediately disappear from view. You can try it on my gallery:-
http://www.sharpos-world.co.uk/cpg/
-
Just tried using this theme and it seems good, but one of my questions when using a mobile is about "Album list". When using a pc you get the options of last upload, last comments etc. but with a mobile those options appear then immediately disappear from view. You can try it on my gallery:-
http://www.sharpos-world.co.uk/cpg/
You need to press and keep the finger on Album list link and the sub items will stay in view.
With just touch, the sub items won't stay into view.
Is the curve theme menu.
I did not changed a thing in the menu.
On mobile the curve theme has the same behaviour.
Post this issue to the coppermine team (start new topic).
-
Hello,
is there a way to use the theme in Coppermine 1.6? I tried the theme in Coppermine 1.6 and as admin everything works, but as guest and registered user you only get a white page when you want to show an image.
The index page and overview does not work for all groups, only the display of single pictures does not work.
greetings spun
-
I attached it.
Let me know how it works.
-
Many thanks for the quick answer. The usage now works with all groups, but the display of the pictures is not yet correct. if you want to look at a picture you have to scroll first see attachment and the pictures in the overview are displayed flush on the left.
the problem is only with the view on the PC mobile everything works perfectly
greetings spun
-
Please post a link to your gallery.
-
I have found the problem, only an adjustment via css was necessary to adapt it to my needs :D. It all works perfectly, thanks to you for adapting it to work in 1.6.xx.