Jump to content

[Erledigt] Responsive Layout Kategorie Bilder 870x217

ZoXx

By ZoXx
in Generelle Fragen

 Share

Recommended Posts

ZoXx Newbie

ZoXx

Posted
Posted (edited)

Hey,

ich stehe vor einem Problem.

Und zwar habe ich das Kategorie Bild auf 870x217 Pixel.

Sieht auf dem PC auch alles soweit gut aus, jedoch wenn ich das Fenster dann kleiner schiebe (Responsive Layout nutze) wird das BIld überschnitten.


Durch den Firebug habe ich das Problem auch schon gefunden:

<div class="content_scene_cat_bg" style="min-height: 217px; background: url(https://LINK/img/c/28-category_default.jpg) 100% 50% / cover no-repeat;"/>
 

min-height steht auf 217 px.

 

wie kann ich das Bild nun als Responsive setzen?
Also je kleiner ich den Bildschirm mache, desto kleiner wird das Bild?

Ich finde keine Anpassung in der category.css


Danke !

 

 

Edited by ZoXx (see edit history)
Link to comment
Share on other sites
  • 2 weeks later...
Shad86 Newbie

Shad86

Posted
Posted

Guck dir mal die Bilder Mapping geschichte an.

Habe ich selber erst vor wenigen Tagen richtig endteckt.

Ich wollte auch in jeder Oberkategorie einen Banner haben, wie du es hast.

Und das ist extrem einfach per Bilder Mapping möglich. Zusätzlich kannst du die Artikel in dem Bild auch noch direkt verlinken.

Worum es aber hauptsächlich geht ist, du kannst dort deinen Banner hochladen und dann für eine Kategorie aktivieren.

Probier doch mal aus ob der Banner dann mehr responsive ist.

Achso, wenn die Größe deines Banners dort nicht richtig angezeigt wird, unter Voreinstellungen / Bilder kannst du die Standartgröße der Banner ändern. Standartmäßig ist es Scene-default, kannst du aber per firebug herausfinden welches dein theme nutzt.

  • Like 1
Link to comment
Share on other sites
ZoXx Newbie

ZoXx

Posted
  • Author
Posted

Einfach bei der background-size "contain" statt "cover" verwenden.

 

in welcher css datei und welche zeile finde ich das?

hab schon einige mal rumprobiert auch mit img-responsive etc. aber keine Besserung!

 

 

 

 

Guck dir mal die Bilder Mapping geschichte an.

Habe ich selber erst vor wenigen Tagen richtig endteckt.

Ich wollte auch in jeder Oberkategorie einen Banner haben, wie du es hast.

Und das ist extrem einfach per Bilder Mapping möglich. Zusätzlich kannst du die Artikel in dem Bild auch noch direkt verlinken.

Worum es aber hauptsächlich geht ist, du kannst dort deinen Banner hochladen und dann für eine Kategorie aktivieren.

Probier doch mal aus ob der Banner dann mehr responsive ist.

Achso, wenn die Größe deines Banners dort nicht richtig angezeigt wird, unter Voreinstellungen / Bilder kannst du die Standartgröße der Banner ändern. Standartmäßig ist es Scene-default, kannst du aber per firebug herausfinden welches dein theme nutzt.

Klingt gut !

Wenn das andere nicht funktionieren sollte, werde ich das mal testen!!!

Habe die scene default auch schon versucht zu ändern, aber! aufm desktop passt es alles, nur wenn es in die mobile ansicht geht, wird es katastrophal!

Link to comment
Share on other sites
scbawik Newbie

scbawik

Posted
Posted (edited)

in welcher css datei und welche zeile finde ich das?

hab schon einige mal rumprobiert auch mit img-responsive etc. aber keine Besserung!

 

Steht in deinem Eingangspost.

Wo das definiert wird, weiß ich nicht. Aber da es Inline-Styles sind, vermutlich im Template - also in der category.tpl.

 

Wenn man es ordentlich responsive haben möchte, müsste man ein <img> statt CSS background-image verwenden und noch weitere Anpassungen vornehmen. 

Im Prinzip ganz einfach: Ein <img> mit "width" oder "max-width" 100%. Die Höhe wird dann proportional skaliert.

Der Text kann dann, wenn nötig, mit position:absolute über dem <img> positioniert. 

 

Dies ist möglicherweise auch bei der Image Mapping-Methode der Fall.

 

Die Änderung der background-size auf "contain" sollte jedoch für deine Bedürfnisse reichen.

Edited by scbawik (see edit history)
Link to comment
Share on other sites
ZoXx Newbie

ZoXx

Posted
  • Author
Posted

Steht in deinem Eingangspost.

Wo das definiert wird, weiß ich nicht. Aber da es Inline-Styles sind, vermutlich im Template - also in der category.tpl.

 

Wenn man es ordentlich responsive haben möchte, müsste man ein <img> statt CSS background-image verwenden und noch weitere Anpassungen vornehmen. 

Im Prinzip ganz einfach: Ein <img> mit "width" oder "max-width" 100%. Die Höhe wird dann proportional skaliert.

Der Text kann dann, wenn nötig, mit position:absolute über dem <img> positioniert. 

 

Dies ist möglicherweise auch bei der Image Mapping-Methode der Fall.

 

Die Änderung der background-size auf "contain" sollte jedoch für deine Bedürfnisse reichen.

 

Wäre super wenn du mir da mal unter die Arme greifen kannst!

Finde die Änderung nicht!

 

Weder in der category.tpl noch in der category.css 

blockcategories.css ist ebenfalls nichts vorhanden?

 

Link to comment
Share on other sites
scbawik Newbie

scbawik

Posted
Posted (edited)

Wäre super wenn du mir da mal unter die Arme greifen kannst!

Finde die Änderung nicht!

 

Weder in der category.tpl noch in der category.css 

blockcategories.css ist ebenfalls nichts vorhanden?

 

 

Im category.tpl steht im Default Theme auf Zeile 48 folgendes:

<div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>

So sollte es funktionieren:

<div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:contain; min-height:{$categorySize.height}px;"{/if}>

Wenn du nicht das Standard Theme verwendest, weicht der Code natürlich unter Umständen ab.

Edited by scbawik (see edit history)
  • Like 1
Link to comment
Share on other sites
ZoXx Newbie

ZoXx

Posted
  • Author
Posted

Yes!!!
Funktioniert !!
Riesen Dank schonmal !!!

 

Problem ist jetzt natürlich nur, dass der Abstand mit dem Responsive nach oben und unten echt groß wird.
Also je kleiner das Bild wird, desto mehr Abstand hat es nach oben und unten.

Kennst du da evtl. auch noch eine Lösung für?
Riesen Dank schonmal!

Link to comment
Share on other sites
scbawik Newbie

scbawik

Posted
Posted (edited)

Yes!!!

Funktioniert !!

Riesen Dank schonmal !!!

 

Problem ist jetzt natürlich nur, dass der Abstand mit dem Responsive nach oben und unten echt groß wird.

Also je kleiner das Bild wird, desto mehr Abstand hat es nach oben und unten.

 

Kennst du da evtl. auch noch eine Lösung für?

Riesen Dank schonmal!

 

Ja, das meinte ich in meinem zweiten Post:

Um es ordentlich responsive zu haben, müsste man tiefer eingreifen und <img> statt background-image verwenden.

 

Das sieht dann ungefähr so aus:

<!-- Category image -->
<div class="content_scene_cat_bg">
	{if $category->id_image}
		<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="" style="max-width:100%">
	{/if}
</div>
Den Beschreibungstext habe ich weg gelassen, da sonst noch CSS Änderungen nötig wären. Edited by scbawik (see edit history)
Link to comment
Share on other sites
ZoXx Newbie

ZoXx

Posted
  • Author
Posted

 

Ja, das meinte ich in meinem zweiten Post:

Um es ordentlich responsive zu haben, müsste man tiefer eingreifen und <img> statt background-image verwenden.

 

Das sieht dann ungefähr so aus:

<!-- Category image -->
<div class="content_scene_cat_bg">
	{if $category->id_image}
		<img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}" alt="" style="max-width:100%">
	{/if}
</div>
Den Beschreibungstext habe ich weg gelassen, da sonst noch CSS Änderungen nötig wären.

 

Der Code kommt wieder in die category.tpl ?

Also anstelle des vorhanden richtig?

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...