Jump to content
ZoXx

[Erledigt] Responsive Layout Kategorie Bilder 870x217

Recommended Posts

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_bgstyle="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)

Share this post


Link to post
Share on other sites

Habe mal 4 Bilder dran gehangen, damit man sehen kann, wo das Problem liegt.

post-258256-0-11108000-1420287776_thumb.jpg

post-258256-0-41352100-1420287784_thumb.jpg

post-258256-0-73794100-1420287790_thumb.jpg

post-258256-0-41267200-1420287796_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

 

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?

 

 

Share this post


Link to post
Share on other sites

Der Code kommt wieder in die category.tpl ?

Also anstelle des vorhanden richtig?

Na klar, wo denn sonst ;)

  • Like 1

Share this post


Link to post
Share on other sites

Und es funktioniert genauso, wie wir es haben wollten!
Riesen Dank für die absolute top Unterstützung!!!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More