Topic Closed
knuzen
42 Posts
Hello, I hope I'm right here
Is there someone who can help me add a simple responsive image or banner above the typesetter cms menu?
Maybe 200-300 pixels high, or so.
What should I do, because I know nothing about SCSS and so on.
4 years ago#8905

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

There are several possibilities to consider. Therefore some questions arise:

Do you want …

  • the banner to be the same on every page of your whole website? In this case it could be done only using CSS.
  • the banner to be different on every page? In this case we should use an editable section.
  • to show text or a logo on top of the banner image? In this case we would also need a container and editable subelements.
  • to scale the banner image proportionally on differnet screen sizes or keep it at a fixed height?
    if you want to keep a fixed height, does the banner image have important parts that should always show, even on narrow screens?
Edited: 4 years ago#8907

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

What should I do, because I know nothing about SCSS and so on.

BTW: SCSS is just another CSS preprocessor, similar to LESS. Both also allow standard CSS syntax to be used anywhere.

4 years ago#8912

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

Site-wide top banner for Bootswatch Scss, CSS only solution

Ok, let's start with a simple site-wide top banner using sole CSS. This example is for Typesetter5's default Theme "Bootswatch Scss".

In the Admin Topbar click the "Layout" link and add the following CSS declaration to the SCSS values, e.g. after line 4. In fact it could be anywhere.

nav.navbar-static-top:before{
  content:"";
  display:block;
  background:  
     url('http://www.typesettercms.com/data/_addondata/x_Addons/screenshots/2/232/Carousel2.png')
     no-repeat center top;  
  background-size:cover;
  height:200px;
}

For this example I used a screenshot from a plugin here on typesettercms.com as background-image. Just replace it with your own image url, which could be something like 'http://your.website.com/data/_uploaded/image/my-top-banner-backgound.jpg'

Edited: 4 years ago#8913

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

Site-wide top banner for Bootswatch Scss using a Responsive Image Section

In this example, we will use the "Responsive Background" section type which is part of my current Responsive Image version 1.5rc2 plugin, which you will have to download and install manually, since it's not yet released on typesettercms.com. Current stable version 1.2 will not work with Typesetter 5.

First we will have to edit the file /themes/Bootswatch_Scss/template.php and insert the following code line after the starting <body> tag (line 32):

...
<body>
<?php gpOutput::GetArea('Extra','TopBanner'); ?>
<nav class="navbar navbar-default navbar-static-top">...

Second, we need to define the Extra Content Area:
  In the Admin Toolbox click Content -> Extra Content. You will get a list of existing Extra Content Areas.
  At the end of the list there is an input field, insert Banner here and select "Responsive Background"  from the dropdown list next to it.
  Then click the [ Add New Area ] button.

Third, we will add the new Banner Area to the Layout:
  Go back to your Homepage and click the "Layout" link in the Topbar.
  In the Layout Editor's page preview we see a new gray block at the top of the page. Click the [ + Insert ] button here.
  The popover box will show the list of available Extra Content areas, find Banner and click the [ Add ] button next to it.

  Now we also need to style the new area so it's 200px high:
  In the CSS/SCSS editor panel add the following declaration anywhere, e.g. after line 4.

  .gpArea_Extra_Banner {
    position:relative;
    height:200px;  
  }

  Click the [ Save ] button, then click [ Cancel ] to return to your Homepage.

Last, we need to choose the banner image.
  Back at your Homepage, simply edit the new Banner section on top of the page and upload/choose an image by clicking the [ Select Image ].
  When everything is set, click the [ Publish ] button which will appear below the editor next to [ Close ].

Done.

Edited: 4 years ago#8914

knuzen
42 Posts

Everythings is fine but the extra Content makes following Warning: (using here rc3)
 

file_exists(): open_basedir restriction in effect. File(/var/www/web41/html/tbk/ts5rc3/data/_extra/index.html/page.php) is not within the allowed path(s): (/var/www/web41/html/:/var/www/web41/phptmp/:/var/www/web41/files/:/var/www/web41/atd/:/usr/share/php/:/opt/php/)
    in: /var/www/web41/html/tbk/ts5rc3/include/admin/Content/Extra.php
    on line: 154
    Request: /ts5rc3/Admin/Extra
    Method: GET

Show Backtrace

array( [0] => array( [file] => (string)/var/www/web41/html/tbk/ts5rc3/include/admin/Content/Extra.php [line] => (integer)154 [function] => (string)file_exists [args] => (string)array(1) ) [1] => array( [file] => (string)/var/www/web41/html/tbk/ts5rc3/include/admin/Content/Extra.php [line] => (integer)130 [function] => (string)AreaExists [class] => (string)gp\admin\Content\Extra [type] => (string):: [args] => (string)array(1) ) [2] => array( [file] => (string)/var/www/web41/html/tbk/ts5rc3/include/admin/Content/Extra.php [line] => (integer)117 [function] => (string)AddArea [class] => (string)gp\admin\Content\Extra [object] => (string)object gp\admin\Content\Extra [type] => (string)-> [args] => (string)array(1) ) [3] => array( [file] => (string)/var/www/web41/html/tbk/ts5rc3/include/admin/Content/Extra.php [line] => (integer)68 [function] => (string)GetAreas [class] => (string)gp\admin\Content\Extra [object] => (string)object gp\admin\Content\Extra [type] => (string)-> [args] => (string)array(0) ) [4] => array( [file] => (string)/var/www/web41/html/tbk/ts5rc3/include/admin/Content/Extra.php [line] => (integer)20 [function] => (string)SetVars [class] => (string)gp\admin\Content\Extra [object] => (string)object gp\admin\Content\Extra [type] => (string)-> [args] => (string)array(0) ) )
---
I have ignored that and add the "Banner"/ "Responsiv" OK!
Found the grey Block, Insert Banner,  OK!

But after insert your code in the CSS/SCSS editor panel (on the right side?) and saved,
then the big area was divided in a top part, then the ts-menu and then the rest of the reserved area for the picture.

All this doings you suggested were always interrupted by the warning message (see above)
And: After logout, no picture was seen, only the "Caption Heading" in a black (small) box.

All what you wrote was good to understand, but at the end, there must be a system-error or something like that.

Thanks a lot for your hints, dear Jürgen





 

Edited: 4 years ago#8918

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

Hmm, I don't know what exactly is going on here. But with this …

/var/www/web41/html/tbk/ts5rc3/data/_extra/index.html/page.php

… there is definitely something wrong.

Can you post a link to the website? This might help to find out more about what's wrong here.

Edited: 4 years ago#8943

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

But after insert your code in the CSS/SCSS editor panel (on the right side?) and saved,
then the big area was divided in a top part, then the ts-menu and then the rest of the reserved area for the picture.

 

Could it be that you inserted a "Responsive Image" section instead of the new "Responsive Background" section type?

In fact both are the same just with different preset values, so you could just edit it and set Height -> fixed, 200 px or 100 %

Edited: 4 years ago#8947

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

…then the big area was divided in a top part, then the ts-menu and then the rest of the reserved area for the picture.

Anyway, try to save the layout and go back to the Homepage and see if it actually works.

Layout Editor preview will not always reflect exactly how the result will look like, especially not in cases where JavaScript is involved, like it is in the Responsive Image plugin.

 

Edited: 4 years ago#8949

knuzen
42 Posts
@Jürgen: dear Jürgen, please have some time with an old man. Everythink must go step by step.
Josh has now found this nasty warning error. This is fixed, but I have to exchange the files first.
This is done now
So now I have done everything what you have written so lovingly, that a beginner can understand.
I'm totally satisfied with your instructions, so I can continue earlyer
with my website (e.g. ts.knuzen.de). Please remember I'm only a stupid user.
Again, thanks a lot for your friendly help.

Wow! The only pity is, that I don't see the top banner, when I logout and call the site.
But maybe this will be solved maybe later. If you want have a look login as User:Juergen PW:typesetter at ts.knuzen.de
And see what's maybe wrong.
Edited: 4 years ago#8960

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

Wow! The only pity is, that I don't see the top banner, when I logout and call the site.

You're right. I actually didn't log out when I tested it on my own server.
I already asked Josh to change this for Typesetter 5 final. I hope he will have time for it. Otherwise we will find a different solution.

Please remember I'm only ...

No. It's not your fault, you've done everything right.

 

Edited: 4 years ago#8962

knuzen
42 Posts
OH, I'm so glad and that you will fix it in the future. Please keep in touch with me, when it's solved.
4 years ago#8963

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

Josh already fixed this.

If you want to implement the fix, replace the file /include/tool/Output.php with this one (right click -> save target as...)

4 years ago#8968

knuzen
42 Posts
Heureka ! It works well. Now, I'm really glad for that.
But you see, sometimes some stupid questions will help to improve some parts of a whole system.
Thanks Jürgen & Josh
4 years ago#8972

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

But you see, sometimes some stupid questions will help to improve some parts of a whole system.

Certainly! Most addons and features are initially being developed with quite a distinct use case in mind. They eventually evolve and benefit greatly from 'deviant application', 'stupid questions' and feature requests.

So thanks for the idea to use Responsive Image in the page header and pointing to the issue, which is now solved. This will also be beneficial for other cases!

 

4 years ago#8987

knuzen
42 Posts

Responsive Image Plugin from Jürgen

Addendum: if you have a logo with a fixed pixel width,
then the above proposed Responsiv Background always show only a part in the selection.
This absolut ok, if you need it so.

While the selection of Responsive Image ultimately shows the full width !
I use now 1058x244px topbanner for my purposes.
And it also looks much better at the smartphone. :-)
If you have widened the top banner (maybe with white) , you can also customize that topbanner beautiful narrow with the %-parameters.
A little experimentation is worthwhile here.

ultimately a really great plugin

Edited: 4 years ago#9073

juergen
1.4K Posts
53.1K Downloads
16 Plugins
design, web development & visual effects

ultimately a really great plugin

Thx!

The Responsive Image plugin in fact is not made with logos in mind, because clipping an image to cover a section is it's central feature.
Clipping isn't what we normally want with logos but I'm glad if you managed to make it work for your project (likely using proportional height).

4 years ago#9074

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register