Contextual links létrehozása mezőkhöz

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.
Kategória: 
Leírás
Contextual links létrehozása mezőkhöz

A drupal 7 egyik komoly ux újdonsága, a contextual links. Ez gyakorlatilag azt jelenti, hogy egy adott elemen állva (pl egy blokkban, vagy views listában nodeokon) megjelenik néhány olyan link, amikkel az elemre tudunk hatni, például törölhetjük, szerkeszthetjük.

Esetemben konkrétan az volt a feladat, hogyha feltöltünk imagefielden keresztül egy képet, amit a media modul kezel, akkor a node megtekintésekor legyen egy ugyanilyen csini legördülő menü magukon a képeken, amivel egyből szerkeszthetjük azokat.

Na ez azért nem egy egyszerű mutatvány, legalábbis ha elsőre kell ilyet csinálni, de ha megvan a logika, akkor utána könnyebben megy.

Alapértelmezett contextual linkekként olyan útvonalakat tudunk megjeleníteni, amelyek minimum egy adott vonalból származnak. Kell még hozzá egy másik feltétel is, amit a modulfejlesztők a menu felépítésekor adhatnak meg, tehát a hook_menu-ban deklarált menütömbnek tartalmaznia kell a következő elemet:

[geshifilter-code] 'context' => MENU_CONTEXT_PAGE | MENU_CONTEXT_INLINE, [/geshifilter-code]

Ha ez nincsen, akkor nem fog megjelenni a contextual linkek között. Ezt könnyen áthághatjuk, de erről majd máskor.

Akkor lássunk neki! A következő lépésekre van szükségünk:

1. Hozzá kell adni a saját sminkdeklarációnkat ahhoz az elemhez, amihez contextual links-t akarunk kapcsolni.
2. Be kell regisztrálni a sminkdeklarációt.
3. Elő kell készíteni az adatokat a template fájlba íráshoz.
4. Létre kell hozni a szükséges template file-t.
5. Opcionális - belebabrálhatunk a most létrehozott linkekbe

Először a hook_entity_view_alter hookot kell megvalósítanunk. Ebben a hookban tudjuk módosítani a megjelenítendő elemek paramétereit, többek között befolyásolhatjuk, hogy hogyan, milyen sminkfüggvényeket használjon. Mi pontosan ezt fogjuk tenni.

Ez a funkció mindegy egyes entitás megjelenése előtt meghívódik. A $build változó tartalmazza azt a renderable array-t (wtf lehetne ez magyarul???), amiből az egyes elemek sminkelődni fognak. Ez a hook igen érzékeny, mivel akár egy user, akár egy comment akar kirajzolódni az oldalon, ez mindenképpen szaladni fog, szóval bánjunk vele úgy, mint egy hímes tojással, mert könnyen olyan adatokat babrálhatunk benne, ami nem is létezik.

A mi feladatunk ebben a funkcióban, hogy keressük meg azokat az elemeket, amelyek mezők, és media vagy image típusúak, és adjunk hozzá egy saját sminkfüggvényt, mégpedig #theme-wrapperként. Ez azt jelenti, hogy nem magát az elemet fogja a függvényünk sminkelni, hanem az elem köré építünk html-t. Valamint itt hozzuk a drupal tudtára, hogy márpedig nekünk ide contextual links kell.
Most szépen magyarul felkommentelem, ám ezt rendes kódban nem illik. :P

[geshifilter-drupal6]/* * Implements hook_view_entity_alter */ function mymodule_hooks_entity_view_alter(&$build, $type) { //Végigszaladunk az elemeken, amik nem paraméterek, tehát nem #-vel kezdődnek. foreach (element_children($build) as $field) { //Ez az a feltétel, ami nekünk kell. A media gallery tartalomtípust azért vesszük ki, // mert azt a media_gallery modul szolgáltatja, és ő csinál hozzá saját contextual linkeket. if (isset($build[$field]['#field_type']) && ($build[$field]['#field_type'] == 'image' || $build[$field]['#field_type'] == 'media') && $build['#bundle'] != 'media_gallery') { //Mivel egy mezőben akár több érték is lehet, tehát egy mezőhöz több kép is kapcsolható, // végigmegyünk az összesen, mert minden képnek saját menüt akarunk foreach (element_children($build[$field]) as $delta) { //Ez azért kell, mert lehetnek a tömbben olyan segédváltozók, //amik valójában nem egy-egy elemet jelentenek. if (is_numeric($delta)) { //És íme a lényeg: a contextual links deklaráció, magyarázat a kód alatt $build[$field][$delta]['#contextual_links']['field_image'] = array('media', array($build[$field]['#items'][$delta]['fid'])); //Ő lesz a mi kis saját sminkfüggvényünk. $build[$field][$delta]['#theme_wrappers'] = array('mymodule_contextual_links'); } } } } }[/geshifilter-drupal6]

Ezt a részt vesézzük ki, mert baromira nem egyértelmű elsőre:

[geshifilter-drupal6] $build[$field][$delta]['#contextual_links']['field_image'] = array( 'media', array($build[$field]['#items'][$delta]['fid']) ); [/geshifilter-drupal6]

Mi itt most egy field_image nevű contextual links elemet gyártunk A contextual links deklarációja egy tömb, ami minimum két értéket kíván. Az első az az útvonal, aminek a 'context' => MENU_CONTEXT_PAGE | MENU_CONTEXT_INLINE, paraméterrel ellátott gyermekei fognak megjelenni a menüben. A media útvonalhoz jelen esetben a media/[fid]/edit útvonal tartozik. A másodikban az útvonal argumentumait adjuk meg szintén egy tömbben. Itt és most azt mondtuk neki, hogy argumentumként használd az adott mezőhöz tartozó file azonosítóját.

Akkor a kövi, hozzuk létre a saját sminkdeklarációnkat. Ez itt olyan hülyén hangzik, ha jobbat mondasz, lecserélem. A lényeg, hogy a hook_theme megvalósításával tudatjuk a drupallal, hogy helló, nekünk van egy template fájlunk, használd légyszi.

[geshifilter-drupal6]/** * Implements hook_theme(). */ function mymodule_hooks_theme() { $items = array( //nézd csak vissza, 'mymodule_contextual_links', ezt adtuk meg az előbb a #theme_wrapper változónak 'mymodule_contextual_links' => array( 'render element' => 'element', //contextual_links_wrapper.tpl.php - ez lesz a fáljunk, amit létre fogunk hozni. 'template' => 'contextual_links_wrapper', ), ); return $items; }[/geshifilter-drupal6]

Na, mivel szépen akarunk csinálni mindent, nem csak úgy belehányunk fűt-fát a tpl.php fáljunkba, hanem előtte szépen előkészítjük az adatokat. Minden .tpl.php fájlhoz tartozik egy előfeldolgozó, aminek a neve [mymodule]_preprocess_[fájlneve].

@todo: ahogy ez most leírtam, rájöttem, hogy én nem így csináltam, de működik. Szóval most vagy nem tartozik automatikusan minden .tpl.php-hez előfeldogozó, hanem a _theme-ben beállított változóhoz tartozik (mymodule_contextual_links), vagy mindkettőt lehet használni, vagy egyszerűen én bénáztam, hogy kiléptem a namespaceből, és a templatenek is 'mymodule_contextual_links'-t kellett volna megadni, illetve mymodule_contextual_links.tpl.php-t használni.

Valósítsuk hát meg:

[geshifilter-drupal6]/** * Implements template_preprocess_contextual_links */ function mymodule_preprocess_mymodule_contextual_links(&$variables) { //Ezzel lehetőséget adunk más moduloknak is, hogy extra css classt adjanak a mi tpl.php-nkhez. if (isset($variables['element']['class'])) { $variables['classes_array'][] = $variables['element']['class']; } //Ő lesz maga a tartalom, tehát a renderelt, megsminkelt mező. Miután #theme-wrapperként adtunk //hozzá a sminkdeklarációnkat, ezért az eredeti tömb #children-ként szerepel benne $variables['content'] = $variables['element']['#children']; }[/geshifilter-drupal6]

Eddig csúcs, már csak a .tpl.php-nk hiányzik, hozzuk hát létre, és tegyük bele a kövit:

[geshifilter-drupal6]<?php /** * @file contextual_links_wrapper.tpl.php * Default template implementation to display contextual links around image fields. * */ ?> <div class="<?php print $classes; ?>" <?php print $attributes; ?>> <?php print render($title_prefix); ?> <?php print $content ?> <?php print render($title_suffix); ?> </div>[/geshifilter-drupal6]

Azért itt látszik, hogy sokat nem csináltunk. Ami a lényeg, az a $title_prefix, és $title_suffix. Hogy ez gyárilag mit csinál lövésem nincs. Valószínűnek tartom, hogy a drupal ezeket a változókat magának tartja fenn, ugyanis ezekben írja ki a contextual linkekhez szükséges html-t.

Ha ez megvan, akkor egy smink gyorstár ürítés, és már ott is vannak a képeken a csini linkek. És miután megtelt a node, a belebabrálásról máskor mesélek majd.

Hozzászólások

Thank you for the auspicious

Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how could we communicate?|

Howdy excellent website! Does

Howdy excellent website! Does running a blog such as this require a great deal of work? I've very little expertise in programming however I was hoping to start my own blog in the near future. Anyways, should you have any suggestions or tips for new blog owners please share. I know this is off topic however I simply wanted to ask. Appreciate it!|

Amazing! Its truly awesome

Amazing! Its truly awesome paragraph, I have got much clear idea on the topic of from this piece of writing.|

Hey I know this is off topic

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I've been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.|

Wonderful article! This is

Wonderful article! This is the kind of information that should be shared across the internet. Disgrace on the seek engines for not positioning this publish upper! Come on over and seek advice from my site . Thank you =)|

Hi! This is my first comment

Hi! This is my first comment here so I just wanted to give a quick shout out and say I genuinely enjoy reading your posts. Can you suggest any other blogs/websites/forums that cover the same topics? Appreciate it!|

Great information. Lucky me I

Great information. Lucky me I found your website by accident (stumbleupon). I've saved as a favorite for later!|

I know this site provides

I know this site provides quality dependent posts and other data, is there any other website which gives these information in quality?|

Hello, I think your website

Hello, I think your website might be having browser compatibility issues. When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, great blog!|

Outstanding quest there. What

Outstanding quest there. What occurred after? Good luck!|

Hello there, simply was aware

Hello there, simply was aware of your blog via Google, and located that it's truly informative. I'm going to watch out for brussels. I'll be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!|

Today, I went to the beach

Today, I went to the beach with my kids. I found a sea shell and gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!|

Currently it appears like

Currently it appears like Movable Type is the top blogging platform out there right now. (from what I've read) Is that what you are using on your blog?|

Excellent post. I was

Excellent post. I was checking constantly this blog and I am impressed! Very useful information particularly the last part :) I care for such information a lot. I was seeking this particular info for a very long time. Thank you and good luck.|

Thanks for sharing such a

Thanks for sharing such a pleasant opinion, post is fastidious, thats why i have read it fully|

What i don't realize is

What i don't realize is actually how you are no longer really much more well-appreciated than you might be right now. You're very intelligent. You recognize thus significantly with regards to this topic, made me individually consider it from so many various angles. Its like women and men don't seem to be interested except it is something to accomplish with Lady gaga! Your individual stuffs great. All the time take care of it up!|

Thanks for sharing your

Thanks for sharing your thoughts. I truly appreciate your efforts and I will be waiting for your further write ups thank you once again.|

What a material of

What a material of un-ambiguity and preserveness of valuable familiarity concerning unexpected emotions.|

Thanks for sharing your

Thanks for sharing your thoughts. I truly appreciate your efforts and I am waiting for your next post thanks once again.|

Hello There. I discovered

Hello There. I discovered your weblog the usage of msn. That is a very neatly written article. I will make sure to bookmark it and come back to learn extra of your helpful info. Thanks for the post. I'll definitely comeback.|

Hmm is anyone else

Hmm is anyone else experiencing problems with the pictures on this blog loading? I'm trying to figure out if its a problem on my end or if it's the blog. Any suggestions would be greatly appreciated.|

Hello, Neat post. There's a

Hello, Neat post. There's a problem together with your website in web explorer, might check this? IE nonetheless is the market chief and a big component to other folks will omit your magnificent writing due to this problem.|

I like it whenever people get

I like it whenever people get together and share opinions. Great website, continue the good work!|

Article writing is also a

Article writing is also a excitement, if you be acquainted with afterward you can write if not it is difficult to write.|

For latest news you have to

For latest news you have to go to see world-wide-web and on web I found this website as a most excellent web site for most up-to-date updates.|

This is really interesting,

This is really interesting, You're a very skilled blogger. I've joined your feed and look forward to seeking more of your excellent post. Also, I have shared your web site in my social networks!|

I'd like to thank you for the

I'd like to thank you for the efforts you've put in penning this blog. I really hope to check out the same high-grade content from you in the future as well. In truth, your creative writing abilities has motivated me to get my own, personal blog now ;)|

It's truly very difficult in

It's truly very difficult in this full of activity life to listen news on Television, therefore I only use world wide web for that reason, and take the newest information.|

My brother recommended I

My brother recommended I would possibly like this website. He was entirely right. This submit truly made my day. You cann't imagine just how a lot time I had spent for this information! Thanks!|

With havin so much content do

With havin so much content do you ever run into any issues of plagorism or copyright violation? My website has a lot of unique content I've either created myself or outsourced but it appears a lot of it is popping it up all over the web without my authorization. Do you know any solutions to help protect against content from being ripped off? I'd certainly appreciate it.|

We stumbled over here coming

We stumbled over here coming from a different web page and thought I should check things out. I like what I see so now i'm following you. Look forward to exploring your web page repeatedly.|

Thanks for some other

Thanks for some other excellent post. Where else may just anybody get that type of info in such a perfect means of writing? I've a presentation subsequent week, and I'm at the search for such information.|

Hello I am so thrilled I

Hello I am so thrilled I found your site, I really found you by mistake, while I was browsing on Digg for something else, Anyways I am here now and would just like to say thanks for a marvelous post and a all round exciting blog (I also love the theme/design), I don't have time to go through it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb job.|

My spouse and I stumbled

My spouse and I stumbled over here coming from a different web page and thought I should check things out. I like what I see so i am just following you. Look forward to looking at your web page repeatedly.|

Howdy would you mind stating

Howdy would you mind stating which blog platform you're using? I'm going to start my own blog soon but I'm having a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design seems different then most blogs and I'm looking for something unique. P.S Apologies for getting off-topic but I had to ask!|

Hey very interesting blog!|

Hey very interesting blog!|

Hi there fantastic blog! Does

Hi there fantastic blog! Does running a blog like this take a great deal of work? I have very little understanding of programming however I was hoping to start my own blog soon. Anyway, if you have any ideas or tips for new blog owners please share. I understand this is off topic however I just wanted to ask. Appreciate it!|

Hi every one, here every

Hi every one, here every person is sharing these kinds of experience, thus it's nice to read this weblog, and I used to pay a visit this weblog everyday.|

Greetings from Florida! I'm

Greetings from Florida! I'm bored at work so I decided to check
out your site on my iphone during lunch break. I love
the knowledge you present here and can't wait to
take a look when I get home. I'm shocked at how fast your blog loaded on my mobile
.. I'm not even using WIFI, just 3G .. Anyhow, superb site!

Very nice article, exactly

Very nice article, exactly what I needed.|

An outstanding share! I have

An outstanding share! I have just forwarded this onto a colleague who has been doing a little homework on this. And he actually bought me breakfast because I discovered it for him... lol. So allow me to reword this.... Thanks for the meal!! But yeah, thanx for spending the time to discuss this issue here on your blog.|

Ridiculous story there. What

Ridiculous story there. What happened after? Thanks!

Hello, I enjoy reading

Hello, I enjoy reading through your article. I wanted to write a little comment to support you.

Write more, thats all I have

Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?|

It's going to be end of mine

It's going to be end of mine day, however before end I am reading this great piece
of writing to increase my knowledge.

Excellent web site you have

Excellent web site you have here.. It's hard to find excellent writing like yours these days. I really appreciate individuals like you! Take care!!|

Having read this I thought it

Having read this I thought it was very informative. I appreciate you spending some time and effort to put this content together. I once again find myself personally spending a lot of time both reading and posting comments. But so what, it was still worth it!|

Simply desire to say your

Simply desire to say your article is as astonishing. The clarity for your
post is just great and that i can assume you're an expert in this subject.
Well together with your permission allow me to snatch your feed to
keep up to date with imminent post. Thank you one million and please continue the rewarding work.

Jay's Santa Clarita Tree Removal Kings
26174 Las Lanas Ct, Santa Clarita, CA 91355
661-464-1270
laureljefferson09875 [at] gmail [dot] com

Spot on with this write-up, I

Spot on with this write-up, I seriously feel this website needs much more attention. I'll probably be back again to read through more, thanks for the advice!|

You could definitely see your

You could definitely see your enthusiasm within the work you
write. The sector hopes for more passionate writers like
you who aren't afraid to say how they believe. Always
go after your heart.

Hozzászólás

A mező tartalma nem nyilvános.
  • Internal paths in double quotes, written as "internal:node/99", for example, are replaced with the appropriate absolute URL or relative path.
  • Engedélyezett HTML elemek: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <del> <img>
  • A webcímek és email címek automatikusan linkekké alakulnak.
  • A sorokat és bekezdéseket a rendszer automatikusan felismeri.
  • Engedélyezett HTML elemek: <a> <blockquote> <br> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <li> <ol> <p> <span> <strong> <ul>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <bash>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <sql>. The supported tag styles are: <foo>, [foo].
  • Minden email cím át lesz alakítva ember által olvasható módon, vagy (ha a JavaScript engedélyezett) ki lesz cserélve kattintható, de biztonságos hivatkozásra.