Building a CPG 1.6.x responsive theme

[ron4mac]

Here is the start of my attempt at creating a responsive theme for CPG (1.6.x only). It still needs a lot of work but I thought I would put it here in hopes of getting feedback to help it along its way. The purpose for developing this is geared more toward determining how the CPG core will need to be changed to provide native support for responsive themes rather than just trying to create a super stylish theme. So the more people willing to test this theme and provide feedback, the sooner CPG will provide native support for responsive themes.

It currently uses the jQuery 1.11.2 and bootstrap 3.3.7 frameworks. I'm not happy using bootstrap and hope to soon write it out of use.

The theme will have built-in swipe and keyboard navigation.

It uses 2 .css files: theme.css (which should not be changed) and style.css. If a file named custom.css is placed in the theme folder, it will use that file instead of style.css. I totally suck at styling web pages so I'll hopefully be able to provide the means for you to make it look good. Don't put much effort into that yet, though, as it's currently being built on sand.

It is not dependent on its folder name, so you can name it as you please.

Update: v0.6 Added swipe and keyboard navigation; adjustments for some admin screens
Update: v0.8 Removed need for bootstrap; renamed folder to just respond

[phill104]

Well done on things so far. It is rare for coders to be talented designers and vice versa, I think that is why many open source projects struggle in this area.

As for bootstrap, I agree. Teams are moving away from it for so many reasons.

I look forward to seeing people's thoughs on your theme. It certainly seems the way forward to me.

[netb]

Looking forward to how this develops.

Quite a while ago I did replace some tables with div's in my theme.php and have been thinking of cleaning it up to post here as a sample but haven't got the time. Seems you did it in a better way, since what I did was kind of dirty, e.g.:

Code Select Expand

<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%">
        <div>
<div class="tableh2">
<span class="alblink"><a href="{ALB_LINK_TGT}">{ALBUM_TITLE}</a></span>
</div>
<div class="thumbnails">
<img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br /><a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
</div>
<div class="tableb tableb_alternate">
{ADMIN_MENU}
<!-- Hide Album Description below Gallery Thumbnail <p>{ALB_DESC}</p> -->
<p class="album_stat">{ALB_INFOS}<br />{ALB_HITS}</p>
</div>
</div>
        </td>
<!-- END album_cell -->
But hey, it worked for me and just used some css

Code Select Expand

@media only screen and (max-width:... to make some elemets responsive.


I don't like that there are jQuery and Bootstrap involved but it is my personal opinion of course because I like things to be more lightweight of sorts.

Great Job, nevertheless! Keep going.

[eule]

Thanks for the theme looks great i will try it on one of my pages.
I hope its ok if i remove the bricksotnes:-)

Greetings

[tomskafo]

Ron4mac, I put your theme. I like it - this is the best thing I've ever seen.
How it looks, see the link in my signature.
And also I will have comments and requests to correct what seems to me not to be as it should be.
Do you mind? I will use your theme and actively test.

1. At the top right, we see two words - Albums and Files - the words crawled over each other, blocked each other. That would be a fix.

[ron4mac]

1. At the top right, we see two words - Albums and Files - the words crawled over each other, blocked each other. That would be a fix.

See the update above...

[tomskafo]

Ron4mac, I put this theme now. At the top I do not like that there is very little space. The words "Gallery Name" and "Gallery Description" - these texts are almost invisible to me on large monitors:

Галерея цветов
Загружаемое фото обязательно подписывайте и показывайте в темах!

And on small monitors and smartphones, the phrases "Персональные альбомы ........................................ Альбомы492 Файлы12,021" - crawl over each other and overlap each other. This is very inconvenient and unreadable, spoils the style of the main page of the gallery.

See for yourself and try to compress the browser window to a minimum. Phrases and words should not crawl over each other. They should be readable on both large and small screens  http://fialka.tomsk.ru/forum/gallery/

In all other respects, this theme seemed to me more convenient and thoughtful. All elements have a very high degree of adaptability and mobility.

[ron4mac]

Thanks for your feedback.  I will be away for a while but will work on this again as soon as I can.

[tomskafo]

ron4mac, we are very pleased and grateful. This is the only mobile and adaptive Coppermine Photo Gallery in the world. This theme works very well and we will use it.

And now about what would like to fix. Above, I wrote is not quite accurate and correct when I said:

At the top I do not like that there is very little space. The words "Gallery Name" and "Gallery Description" - these texts are almost invisible to me on large monitors

Then I understood why I see it at the top of the gallery. It turned out that the top of the topic on my computer is blocked by a program - an ad blocker - it is called "Ad Muncher", this is its creator: https://www.admuncher.com/

And I thought: this is wrong. The ad blocker program does block not ads, but part of the style, an important top of the gallery theme. Therefore, I did not see any inscriptions there and it seemed to me that there was not enough space above.
The top of the topic should not be blocked by ad blockers. After all, other people also see the crumpled top of the gallery, many people today have ad blockers.

And why was the top of the gallery blocked? I think this is because of the name of the image file with tiles - it is called a "banner". Advertising blockers block all banners by default. It's unavoidable. Need a different name. It seems to me. Or search for another reason - why the top gallery are blocked by ad blockers.

[tomskafo]

About what I previously wrote:

And on small monitors and smartphones, the phrases "Персональные альбомы ........................................ Альбомы492 Файлы12,021" - crawl over each other and overlap each other. This is very inconvenient and unreadable, spoils the style of the main page of the gallery.

It looked like this on smartphones:

I corrected it, put one the phrase under the other so that they did not crawl onto each other.
didn't make any serious changes, except that he translated some words into our language and slightly changed color:
strip <div class="cat-stats">
and
picture /banners/banner5.jpg

[Sweetener]

You should put this code in order to make the film responsive too 

Code Select Expand

#film {
width: 100%!important;
}

#film .tape {
width: 100%!important;
height: 100%!important;
margin-left: 0!important;
}

#film .tape a {
width: 100%!important;
}

/* here you can decide the sizes */
#film .tape a img {
width: 14vw!important;
max-width: 100px;
}

[sharpo]

You've been very helpful with my problems in the past Ron, so having just noticed this topic I thought I would give it a try.

Swiping the intermediate image on my Android tablet works fine but on my mobile there are problems - swiping from right to left just moves the whole page across, as if you were viewing thumbnails, and swiping left to right does work, but only on the second swipe each time.

Just feedback for you, I'm not waiting for it to be corrected - but will give it a try later if you do fix the problem.

[sharpo]

Just wondering if it's my mobile that doesn't work properly with the theme?

http://www.transport-photos.co.uk/test/q16test/

It's just a new (temporary) install to test the theme with a few photos added, it might work for other people though??? See post above for the problem I had.

[ron4mac]

Sharpo,

I had not done any work on the theme to accommodate a film strip. Perhaps that is causing issues. There doesn't seem to be that much interest the theme and I doubt I'll do any more work on it. You should probably just stick with what works for you.

[lurkalot]

Ron, I love the idea of responsive themes for Coppermine, I wonder if the stock theme should be responsive actually, I mean that's the way everything is going these days.  I would imagine most of the sites people want to bridge or integrate a gallery script are already responsive.

[sharpo]

Yes Ron, I'll keep on using my proper galleries as they are now. I've not spent so much time on them since changing from camera to camcorder and concentrate more on filming these days but as they have been running for so many years I do try to make them as easy as possible to view by mobile, tablet or computer.

As lurkalot says, I also think the basic theme would be better if it was responsive for mobile users.

[phill104]

Ron,

Not had a chance to look deep,y. How did you deal with the fixed number of columns in config?

[ron4mac]

How did you deal with the fixed number of columns in config?

It just takes the thumbnails per page (rows x cols) and displays them free-form (via CSS) rather than in a table.

[allvip]

It currently uses the jQuery 1.11.2 and bootstrap 3.3.7 frameworks. I'm not happy using bootstrap and hope to soon write it out of use.

Now I really know how to make it responsive professionally.
If and only if you want I can make a basic theme for you.
Just white with black text and responsive and even tell you how I did it.

Just classic css compatible with old PCs and new devices.
No JS or frameworks.
Very responsive and simple.
Let me know.

[allvip]

BTW your theme is not really responsive.