heldercervantes

Hey guys. I'm submitting my latest project to the directory. http://www.sagatex.pt Sagatex represents fashion and sportswear brands in Portugal, such as Fred Perry, Diadora, Dr. Martens, etc. This site features a product catalogue and a store finder. I like keeping my ingredients to a minimum. Here, I used: Reno theme InputfieldRepeater InputfieldMapMarker MarkupSEO ImportPagesCSV Enjoy

Well in my case the image field doesn't display the edit button when inside a repeater. When outside the repeater, the button appears. What gives?

OF COURSE! I was searching from $pages and completely forgot you could do it from a $page. Big thanks! Now excuse me while slap myself in the face for a moment.

Hi guys. This is probably real easy and my headache is probably keeping me from thinking straight. Take a products catalogue. The sections have multiple levels, 3 in my case. At the end of each branch there are products. So when I'm at a top section, I want to display all products under all child sections, grandchild sections and so on. How do I reference this in the selector? My only idea is to recursively check every child page down the tree where 'template=section' and slap each of them on the selector, but it seems wrong.

This is the site that prompted making this module. It's still in development and this link will die eventually: http://jacinto-lda.com/2016/pt/empresa/internacional/ Here's the abridged code from the template: <img src="<?= $page->images->first->url ?>" class="worldMapImage"> <div class="dotsList"> <?php foreach ($page->map as $dot) { $dotPage = $pages->get($dot->info); echo '<div class="dot" style="left:'.$dot->x.'%; top:'.$dot->y.'%"></div>'; } ?> </div> I have a few more things in there for generating the hover info, making some dots red and so on, but I cut that out to keep the example simple. You probably need to change $page->images and/or $page->map to suit the field names you're using. And of course this needs proper CSS to display correctly, but you can inspect those from the link if you're having trouble. Hope this helps.

Does this still happen if you have more than 1 marker?

Same here. When we built it I was testing on 2.7.2 When I started that project I began on PW3 but there were other modules misbehaving, so I went back to the master version. I suggest you do the same.

Updated to the latest version to test callouts. Looks great. With short names as in this particular use case, callouts greatly improve usability. BTW, should probably update the description on the first post in this thread: "one can only choose from one type of marker (circle) at the moment". No longer the case.

Well that took me a lot less time to implement than it did to add the content I needed for testing it out. Worked like a charm, didn't need any tweaking at all. The only thing I noticed missing was the keyboard fine-tuning. But that would conflict with Reno theme's expanding / collapsing of the left column, so best leave it as it is. In this case, on the frontend I have a rollover behavior that pops up an info box on each spot. The box pops to the right, so I'd have a problem with the ones closer to the right edge. But since the module returns % based positions, I can easily add a CSS class whenever the dot is over 50% horizontal, to make the popup appear to the left instead. The filtering options for the page selector also worked great. Limited that to a specific template and voilá. On the image below you'll see I have white and red dots on the frontend. Those are according to the parent of each dot. Easy as pie. Great work @kongondo. Here's a side by side of the field, and the end result:

Ok, maxwidth was playing pranks. Just add these couple of lines: max-width: none; white-space: nowrap; in the "div.callout span {" statement on line 142, and names should show up nice on the callouts.

I meant numbers on the teardrops and names on the callouts But I see from your GIF that it's getting line breaks. I only tested with single words and didn't notice it was doing that. But it's an easy fix. Give me a sec.

@kongondo, just made a little tune-up on your code: Affected files: InputfieldImageMarker.css InputfieldImageMarker.js Changes: Fixed position differences between the 3 marker styles; Unified look, so that all marker styles feature the same kind of border and colors; Improved the way markers are highlighted; Added a higher z-index to the highlighted marker, bringing it on top of the others; Tweaked draggable event to remove the snapping that happened when user started dragging the marker. Suggestion: Callout and teardrop styles seem redundant. I suggest that on callout style, instead of the number, we show the page name. CSS is ready for this change, just output the name in the span and it expands from the center. You can find the update here: heldercervantes.com/experiments/ifim/FieldtypeImageMarker_2.zip I'm starting to implement this on a website right now. It will be a good testing ground. First impressions are good, second impressions coming soon.

@kongondo Got a preliminary version I can test drive? I'm almost done building the website and need to put something together for that section. If not, I'll just slap in there a couple of fields for x and y.

Sounds great BitPoet. Looking forward to the updates. IMO this feature is essential for multi language sites, and I'm sure I'll be using in basically every project I make. It's weird that this didn't generate more response from the forum. Please update this thread when you release a new version.

This looks cool and I have this need in just about every site I make. But I find it strange that this post is a year old and module isn't listed on the modules directory. Does that mean there are other modules / approaches to this problem? EDIT: Looks like I've jumped the gun there. Just seen it's in alpha stage on github. Bummer, alpha is scary for client work.

I've updated it on the original link: http://heldercervantes.com/experiments/ifim/ Added a behavior for turning the last marker green when clicked/dragged, and tested one with 999 for the number. Don't think anyone will ever need more than two digits though. I'm on a mac and don't have a pc for proper cross-browser testing, so let me know if you detect any problems. EDIT: Re-uploaded file after adding a little keyboard control, complete with shift-key for 10px skips.

Check this out for the marker: http://www.heldercervantes.com/experiments/ifim/marker.html Pure CSS; Minimal markup, just the marker div with inline left and top position (can be % of course) and a span surrounding the number; The main marker div is just 1x1 pixels making the position accurate; Bubble is a ::before pseudo-element; Features active state just by adding/removing css class; Used plain red and green for colors. Can this be read from the theme's colors?

Where else would someone post a question like I did, and in the same day find people gathering around the subject and build a new module that solves the problem? This forum feels like actually being in a room filled with people who know their stuff and are willing to help a brother out.

Amazing work my friend. Looks like my help isn't needed. I agree with percentages. Evaluating the site I'm working on I figured I'd have to compare each dot's coordinates with the image size to make everything scalable and responsive, so I think it's better to have it standard as percentage and convert to px on the frontend if needed. If you can make this available this week, I'll be setting up the CMS on my site starting monday. It would be a good testing ground. (Still stoked by the support this community offers, btw)

Want to have a go at it? I can handle all the jquery and css stuff.

Makes sense to me. Single inputfield, and in the environments example, your approach would mean one less page per dot. AND you'd get to see and adjust all dots in the same place, which is great. The interface for editing on the admin would need to be a bit more complex. You'd need: Button for adding dots; A list of the current dots with the page selector and a delete button; Clicking/dragging a dot would hilight that dot on the list; Clicking an entry on the list would hilight the dot on the image and pull the z-index to top (so you can handle overlapped dots).

Don't know if I understood correctly. The first option seems the correct one, but you mention users and that makes me think you're getting the wrong idea. Creating or editing the map or locations isn't something to make available to the site's users. I'm talking about tools to edit in PW's admin. That said, it's a one-to-many solution. A map with multiple locations, a product photo with multiple features, or an environment photo pointing out multiple products.

@kongondo: It's just a matter of flexibility. In the Jacinto example, each dot only has a few infos that can be solved using that approach, but you may need a textarea, an extra photo (or a gallery), referencing other pages, etc. Here's another example: http://www.aldeco.pt/p50-environments-en Each photo in this gallery references products. So each dot would need a page selector, so the end user can jump to the product page. Another: http://www2.inapalmetal.pt/en/products When the page loads, you'll see a wireframe of a car, click it and wait for the animation to end to see the dots. Each dot has an image + title. Last one: http://extranet.frontend.pt/alfandegaporto2015/pt/espacos/sala-do-arquivo In this one there's a main photo of the room, and each dot has an image + description.

1. Multiple dots per image. In the Jacinto website, the map is fixed and the admin can't change it anywhere. Think of the map as a setting in the field itself, and each location is a page. Imagining a product with several dots for pointing out features, there would have to be a parent page where you upload the image, and subpages for each dot. Each dot page would grab the background image from the parent product page. 2. I agree. Save button. Less requests and more fool proof. That's when we save it on our cms. 3. Single. Looking at the first example, we're in the "international" page, and there are subpages for each location. -- Maybe the best way to make this flexible enough for whatever use is a combination of two specific input fields. The first, let's call it ImageMarkerBackground, would be placed in the parent and allow 1 image to be uploaded. Then there would be ImageMarker, used on the child page, referencing the parent's ImageMarkerBackground to show the correct image, where the user places the dot. Result: Admin ads a "world" page and uploads the map, then creates as many "location" subpages as needed. Same for a product photo and features or whatever else.

In this case it's a bit hardcoded on the CMS itself. What we have there is just a DIV with the image and a draggable dot (using jQuery UI). Whenever the dot is moved, the X and Y coordinates are stored in hidden input fields. I made a quick usable sketch here: http://heldercervantes.com/experiments/ifim/ In cases where the image isn't fixed, there's a separate field for uploading it that needs to be in a parent page. I wouldn't know where to begin making a new fieldtype, but it anyone wants to have a go at it, I'd gladly help out.