Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Building a CPG 1.6.x responsive theme  (Read 7433 times)

0 Members and 2 Guests are viewing this topic.

ron4mac

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1343
Building a CPG 1.6.x responsive theme
« on: January 05, 2019, 04:28:27 pm »

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
« Last Edit: April 10, 2019, 04:52:49 pm by ron4mac »
Logged

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4683
    • Windsurf.me
Re: Building a CPG 1.6.x responsive theme
« Reply #1 on: January 05, 2019, 10:53:31 pm »

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.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

netb

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 82
Re: Building a CPG 1.6.x responsive theme
« Reply #2 on: January 11, 2019, 01:32:35 pm »

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]
<!-- 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]
@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.
Logged

eule

  • Coppermine newbie
  • Offline Offline
  • Posts: 12
Re: Building a CPG 1.6.x responsive theme
« Reply #3 on: February 13, 2019, 08:40:09 am »

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
Logged

tomskafo

  • Coppermine newbie
  • Country: ru
  • Offline Offline
  • Gender: Male
  • Posts: 16
    • Fialka
Re: Building a CPG 1.6.x responsive theme
« Reply #4 on: April 09, 2019, 05:11:17 pm »

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

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1343
Re: Building a CPG 1.6.x responsive theme
« Reply #5 on: April 10, 2019, 04:54:19 pm »

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...
Logged

tomskafo

  • Coppermine newbie
  • Country: ru
  • Offline Offline
  • Gender: Male
  • Posts: 16
    • Fialka
Re: Building a CPG 1.6.x responsive theme
« Reply #6 on: April 10, 2019, 06:24:48 pm »

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:
Quote
Галерея цветов
Загружаемое фото обязательно подписывайте и показывайте в темах!

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

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1343
Re: Building a CPG 1.6.x responsive theme
« Reply #7 on: April 10, 2019, 07:00:36 pm »

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

tomskafo

  • Coppermine newbie
  • Country: ru
  • Offline Offline
  • Gender: Male
  • Posts: 16
    • Fialka
Re: Building a CPG 1.6.x responsive theme
« Reply #8 on: April 12, 2019, 08:01:43 pm »

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:
Quote
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

  • Coppermine newbie
  • Country: ru
  • Offline Offline
  • Gender: Male
  • Posts: 16
    • Fialka
Re: Building a CPG 1.6.x responsive theme
« Reply #9 on: April 12, 2019, 08:16:19 pm »

About what I previously wrote:
Quote
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

  • Coppermine novice
  • *
  • Country: 00
  • Offline Offline
  • Posts: 49
Re: Building a CPG 1.6.x responsive theme
« Reply #10 on: October 21, 2019, 06:34:08 am »

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

Code: [Select]
#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

  • Coppermine frequent poster
  • ***
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 324
Re: Building a CPG 1.6.x responsive theme
« Reply #11 on: October 21, 2019, 12:43:05 pm »

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.
Logged
Sharpo (not an expert, just a Coppermine user)
3 live galleries, first started in 2006, all now 1.6.04.
http://www.sharpos-world.co.uk/BB3cpg/ (1.6.07)with over 8,000 images.
http://www.sharpos-world.co.uk/cpg/ with over 25,000 images
http://www.sharpos-world.co.uk/kc/ with over 300 images

sharpo

  • Coppermine frequent poster
  • ***
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 324
Re: Building a CPG 1.6.x responsive theme
« Reply #12 on: October 26, 2019, 11:51:21 am »

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.
Logged
Sharpo (not an expert, just a Coppermine user)
3 live galleries, first started in 2006, all now 1.6.04.
http://www.sharpos-world.co.uk/BB3cpg/ (1.6.07)with over 8,000 images.
http://www.sharpos-world.co.uk/cpg/ with over 25,000 images
http://www.sharpos-world.co.uk/kc/ with over 300 images

ron4mac

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1343
Re: Building a CPG 1.6.x responsive theme
« Reply #13 on: October 26, 2019, 02:29:43 pm »

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.
Logged

lurkalot

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 904
  • +Tinyportal Support team.
Re: Building a CPG 1.6.x responsive theme
« Reply #14 on: October 26, 2019, 03:17:47 pm »

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.
Logged
Running SMF 2.0.15  / Tinyportal 1.6.4, bridged with Coppermine 1.6.06, plus cpmfetch 2.0.0

sharpo

  • Coppermine frequent poster
  • ***
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 324
Re: Building a CPG 1.6.x responsive theme
« Reply #15 on: October 26, 2019, 03:29:52 pm »

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.
Logged
Sharpo (not an expert, just a Coppermine user)
3 live galleries, first started in 2006, all now 1.6.04.
http://www.sharpos-world.co.uk/BB3cpg/ (1.6.07)with over 8,000 images.
http://www.sharpos-world.co.uk/cpg/ with over 25,000 images
http://www.sharpos-world.co.uk/kc/ with over 300 images

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4683
    • Windsurf.me
Re: Building a CPG 1.6.x responsive theme
« Reply #16 on: October 26, 2019, 11:43:01 pm »

Ron,

Not had a chance to look deep,y. How did you deal with the fixed number of columns in config?
Logged
It is a mistake to think you can solve any major problems just with potatoes.

ron4mac

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1343
Re: Building a CPG 1.6.x responsive theme
« Reply #17 on: October 27, 2019, 03:29:58 am »

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.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1325
Building a CPG 1.6.x responsive theme
« Reply #18 on: November 08, 2019, 09:40:07 pm »

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.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1325
Re: Building a CPG 1.6.x responsive theme
« Reply #19 on: November 08, 2019, 09:43:05 pm »

BTW your theme is not really responsive.
Logged
Pages: [1]   Go Up
 

Page created in 0.025 seconds with 21 queries.