1. Tudásbázis
  2. Modulok használata
  3. Képstílus kép középre igazítás effekt

Képstílus kép középre igazítás effekt

Beküldte makgab - 2014. június 5. 21.56
makgab képe

Üdv!

Egy views_slideshow modullal létrehozott nézetben a commerce termékek képét jelenítem meg (képstílus), de balra igazítja alapból. Mivel lehetne rávenni, hogy középre igazítsa a képet?
(Az imagecahce_actions modul telepítve.)

Drupal verzió: 
7.x
Fórum: 
Modulok használata
wouhn képe

Beküldte wouhn - 2014. június 6. 08.10

Gondolom egy kis css-el meg tudnád váltani a világot. Itt a segítség.

0
0

http://visualstation.hu

makgab képe

Beküldte makgab - 2014. június 6. 10.48

CSS-el nem nagyon sikerült. Pedig csak egy zen (starterkit) alsminkkel próbáltam.
Div-ben van minden, de mégsem akart középre menni a kép.
Ha a képstílusnak adok pl. egy:
* Aránytartó méretezés szélesség 930
* Kivágás 930x300

effektust, akkor fekete háttérrel középre kerül.
A hátteret viszont nem tudom átszínezni css-el. De lehet hogy csak rossz helyen keresgélek...

0
0
L.Tiny képe

Beküldte L.Tiny - 2014. június 6. 12.24

Firebug-gal nézd meg, mitől lesz fekete a háttér és azt a stílust írd felül.

Mondjuk ez nem annyira Drupal-téma... :)

1
0
makgab képe

Beküldte makgab - 2014. június 6. 15.14

A képstílus állítja be a fekete hátteret. Több helyen is olvastam, hogy az imagecache_actions modullal a Canvas effektel lehet másik hátteret beállítani, de ez nem működik. :(

0
0
szantog képe

Beküldte szantog - 2014. június 6. 15.20

Én nem biztos, hogy értem, mit akarsz, valami ilyesmit? http://stocklogos.com/logo/planteye (jobb oldali képek) mert ez sima image preset beállítás.

0
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

dj képe

Beküldte dj - 2014. június 6. 17.42

canvas1
canvas2

0
0

Üdv!
Dudás József

dj képe

Beküldte dj - 2014. június 6. 20.46

a HEX mezőt.

0
0

Üdv!
Dudás József

makgab képe

Beküldte makgab - 2014. június 6. 22.13

A hex (háttérszín) üresen hagyásával is fekete volt a háttér.

0
0
dj képe

Beküldte dj - 2014. június 6. 23.43

tedd be egy modulba és nézd meg, hogy nálad mit csinálnak.

/**
 * Implements hook_image_default_styles().
 */
function mymodule_image_default_styles() {
  $styles = array();
 
  // Exported image style: test_gallery_thumb.
  $styles['test_gallery_thumb'] = array(
    'name' => 'test_gallery_thumb',
    'label' => 'Gallery thumbnail (90x90)',
    'effects' => array(
      13 => array(
        'label' => 'Aránytartó méretezés',
        'help' => 'Arányos átméretezés esetén az eredeti kép oldalarányai megmaradnak. Ha csak a szélesség, vagy a magasság van megadva, akkor a másik automatikusan lesz kiszámolva.',
        'effect callback' => 'image_scale_effect',
        'dimensions callback' => 'image_scale_dimensions',
        'form callback' => 'image_scale_form',
        'summary theme' => 'image_scale_summary',
        'module' => 'image',
        'name' => 'image_scale',
        'data' => array(
          'width' => 90,
          'height' => 90,
          'upscale' => 0,
        ),
        'weight' => 1,
      ),
      14 => array(
        'label' => 'Define canvas',
        'help' => 'Define the size of the working canvas and background color, this controls the dimensions of the output image.',
        'effect callback' => 'canvasactions_definecanvas_effect',
        'dimensions callback' => 'canvasactions_definecanvas_dimensions',
        'form callback' => 'canvasactions_definecanvas_form',
        'summary theme' => 'canvasactions_definecanvas_summary',
        'module' => 'imagecache_canvasactions',
        'name' => 'canvasactions_definecanvas',
        'data' => array(
          'RGB' => array(
            'HEX' => '',
          ),
          'under' => 1,
          'exact' => array(
            'width' => 90,
            'height' => 90,
            'xpos' => 'center',
            'ypos' => 'center',
          ),
          'relative' => array(
            'leftdiff' => '',
            'rightdiff' => '',
            'topdiff' => '',
            'bottomdiff' => '',
          ),
        ),
        'weight' => 2,
      ),
    ),
  );
 
  // Exported image style: product_full.
  $styles['product_full'] = array(
    'name' => 'product_full',
    'label' => 'product_full',
    'effects' => array(
      8 => array(
        'label' => 'Aránytartó méretezés',
        'help' => 'Arányos átméretezés esetén az eredeti kép oldalarányai megmaradnak. Ha csak a szélesség, vagy a magasság van megadva, akkor a másik automatikusan lesz kiszámolva.',
        'effect callback' => 'image_scale_effect',
        'dimensions callback' => 'image_scale_dimensions',
        'form callback' => 'image_scale_form',
        'summary theme' => 'image_scale_summary',
        'module' => 'image',
        'name' => 'image_scale',
        'data' => array(
          'width' => 478,
          'height' => 478,
          'upscale' => 0,
        ),
        'weight' => -10,
      ),
      12 => array(
        'label' => 'Define canvas',
        'help' => 'Define the size of the working canvas and background color, this controls the dimensions of the output image.',
        'effect callback' => 'canvasactions_definecanvas_effect',
        'dimensions callback' => 'canvasactions_definecanvas_dimensions',
        'form callback' => 'canvasactions_definecanvas_form',
        'summary theme' => 'canvasactions_definecanvas_summary',
        'module' => 'imagecache_canvasactions',
        'name' => 'canvasactions_definecanvas',
        'data' => array(
          'RGB' => array(
            'HEX' => '',
          ),
          'under' => 1,
          'exact' => array(
            'width' => 478,
            'height' => 478,
            'xpos' => 'center',
            'ypos' => 'center',
          ),
          'relative' => array(
            'leftdiff' => '',
            'rightdiff' => '',
            'topdiff' => '',
            'bottomdiff' => '',
          ),
        ),
        'weight' => -9,
      ),
    ),
  );
 
  return $styles;
}
0
0

Üdv!
Dudás József

Voluman képe

Beküldte Voluman - 2014. június 11. 14.04

Az első effektnek rakd be: Change file format. És állítsd be png-re. Azért fekete a háttered mert a jpg nem tud átlátszóságot kezelni.

0
0
makgab képe

Beküldte makgab - 2014. június 11. 21.44

Ezzel se megy:

Effektus:
Change file format Convert to: png
Define canvas left: right: top: bottom:  ##eeee  under image
Aránytartó méretezés szélesség 930
Kivágás 930x300

Ugyanúgy fekete. :(

0
0
makgab képe

Beküldte makgab - 2014. június 11. 21.46

Ezzel nem működik, ugyanúgy fekete:

Effektus:
Change file format Convert to: png
Define canvas left: right: top: bottom: ##eeee under image
Aránytartó méretezés szélesség 930
Kivágás 930x300

De nem a képet szeretném átlátszóvá tenni, hanem a képet körbe vevő feketeséget eltűntetni.

0
0
makgab képe

Beküldte makgab - 2014. június 11. 22.32

Ez sem segít. :(
Marad fekete a kép körül.

0
0
szantog képe

Beküldte szantog - 2014. június 11. 22.57

Úgy jpg-ből sem lesz png.
Neked kell gondoskodni megfelelő png file feltöltéséről, nincs az a php library, ami így hirtelen flottul és mindent kielégítően lekapja a hátteret egy random képről.
http://stocklogos.com/logo/green-city-apartment-homes
A jobb oldali képeken szerintem az van, amit akarsz. De ehhez kell egyrészt egy megfelelő forrás, egy megfelelő kép, amit oda lehet rakni.

0
0

----
Rájöttem, miért kérdezek olyan ritkán a drupal.hu-n. Amíg szedem össze az infokat a kérdéshez, mindig rájövök a megoldásra.

akosms képe

Beküldte akosms - 2014. június 12. 00.18

A képkezelő eszközkészleted GD vagy Imagemagick?

0
0
makgab képe

Beküldte makgab - 2014. június 12. 06.49

az admin reports status szerint:

GD függvénytár PNG támogatással 2.1.0
GD képkezelő könyvtár használata a forgatás és a színtelítettség-csökkentés hatásokhoz 2.1.0

0
0
makgab képe

Beküldte makgab - 2014. június 25. 18.36

A Beállításokban:
"A GD eszközkészlet telepítve van és helyesen működik."

Mivel működne az átlátszó háttér? GD vs. Imagemagick?

0
0
makgab képe

Beküldte makgab - 2014. június 26. 10.26

Hogyan kellene a views_slideshow modult beállítani, hogy a képnek nem ad keretet?
Itt egy minta ahol megjelenik a képen a "fekete keret":
http://kepfeltoltes.hu/140626/views_slide_www.kepfeltoltes.hu_.png

A képstílusban ez van beállítva:
Kivágás: 600*640
Aránytartó méretezés: szélesség 600

Vagy hogyan kellene beállítanom?

0
0
makgab képe

Beküldte makgab - 2014. június 26. 10.32

Hogyan kellene a képstílust beállítani, hogy a képnek ne adjon keretet?

A képstílusban ez van beállítva:
Kivágás: 600*640
Aránytartó méretezés: szélesség 600

Vagy ez a beállítás elvileg jó?

(A képek 300px szélesek.)

0
0
makgab képe

Beküldte makgab - 2014. június 26. 14.02

Szóval kivettem a képstílust a nézetban a kép mezőnél, hagytam az "eredeti kép" beállítást. Ez jó lesz csak balra rendezi, én meg középre szeretném.

<div class="view-content">
<div class="skin-default">
  <div id="views_slideshow_cycle_main_product_display_slideshow-block" class="views_slideshow_cycle_main views_slideshow_main viewsSlideshowCycle-processed">
    <div id="views_slideshow_cycle_teaser_section_product_display_slideshow-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 300px; height: 552px;">
    </div>
  </div>
</div>
</div>

Tudom, CSS a kérdés, de nem sikerül a képet középre igazítanom. Melyik div-vel tudnám középre igazítani? (Ha nagyon off a kérdés, akkor bocsi! Priviben tudna súgni valaki? Előre is köszönöm!)

0
0
makgab képe

Beküldte makgab - 2014. június 26. 14.29

Asszem megvan:

# css
.view-display-slideshow {
    clear: both;
    left: 200px;
    position: relative;
}

Nem biztos, hogy a legelegánsabb, de ott van nagyjbából ahova szeretném.

0
0
makgab képe

Beküldte makgab - 2014. július 1. 17.51

Egy baj van ezzel, hogy a blokk így jobbra tolódik el (200px) és rálóg a jobboldali régiókra:
Itt pl. rálóg a Kosár blokkra.
Ezt hogyan lehetne kiküszöbölni?

0
0