Joe

Nice!

I especially like the way the responsiveness of the layout is achieved, the way the background images appear or disappear instantly on resizing, not just with a reload - taking a quick look at it I think it´s done with jQuery, right? really nice...

Just a little hint:

in config.js, you can add these lines:

config.allowedContent = true; // don't filter anything, i.e. allow custom style / classes / id etc.

Dragan, thanks for this little line of code, it helped me solve my problem described here: http://processwire.com/talk/topic/4728-getting-image-width-and-height/

Finally I got CKEditor to to use width and height attributes instead of style for img tags!

Hey people, at last found the solution (getting width and height attributes for img tags into HTML created with CKEditor) :

In /site/modules/InputfieldCKEditor/ckeditor-4.1.2/  changed config.js from:

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	config.language = 'de';
	 config.uiColor = '#FEE673';
};

To the following (explanation in the comments):

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

 /**
 * ...finally found out how to force CKE to output attributes instead of styles for img width and height:
 * 
 * Important: additionally to adding everything form "CKEDITOR.on('instanceReady', function (ev)..." onward
 * also the line "config.allowedContent = true;" needs to be added or else it has no effect!
 *    Joe
 */
 
 
CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	config.language = 'de';
	config.uiColor = '#FEE673';
	config.allowedContent = true;

CKEDITOR.on('instanceReady', function (ev) {
// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }


                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});

};

That does it, problem solved! It just seems that img width and height attributes make images load faster than putting them in styles, so this is what I wanted to do here.

Found the solution here: http://ckeditor.com/forums/CKEditor/Forcing-img-tag-to-use-width-and-height-attributes-instead-of-style
in combination with the hint from dragan in: http://processwire.com/talk/topic/3972-ckeditor-with-attritbutes/?hl=ckeditor
 

I´m sure there might have been other solutions, like switching to TinyMCE or re-writing the CKEditor-created field content in the page´s template file as I wanted to do at first, but this seems to work nicely and so I´ll stick with it. Thanks everyone for your help!

As for the issue at hand, I still have not resolved it. As I see it I have these options for proceeding:

1. My original idea of finding the (thumb-) image´s with and height and adding it by re-writing the CKEditor-created field content in the page´s template file.
2. configure CKEditor so it outputs XHTML compliant content and then re-write the style attributes for width and height as above
3. configure CKEditor to output img width and height without making other changes if possible -> EDIT: that seems the best solution and it is what finally worked for me
4. switch to TinyMCE and see if apart from outputting img width and height (which it does) I can configure it to have the formatting options I want
5.  see if TextformatterImageInterceptor can do it

...or maybe just live with not having img width and height for now. It´s gotten to be quite an involved thing for something not even visible on the page

You can make it depending on services etc. (ready.mobi) But the more you depend on services, the bigger the change that it will fail in the future. (google changes api, ready.mobi get bought by MicroSoft etc & developer winns the lottery and quit working at all)

We already have to deal with a lot of service depenencies. (Google maps, Twitter integration, FaceBook likes etc etc.)

For mobile detection (read available device width) I think it's better to handle it yourself. 

> "& developer winns the lottery and quit working at all" ...the way to go, lol!

No, but I only use http://ready.mobi/ as a tool to check my output while I´m developing the site. I do handle mobile detection myself and I´m trying to output code that only has to be adapted slightly to be mobile-ready.

As a sidenote: I also see that you use <img ...></img> tags, but I think that this isn't valid HTML. I only know <img src='' width='' ... /> this sort of images tags.

I would probably stick with CK over TinyMCE. There is something wrong somewhere in your setup if either CK or Tiny are producing closing </img> tags. I have tested both and they both produce <img .... /> as expected. Can you check the code in the editor before and after you save the page to see where the problem might be.

Hopefully Ryan will see this thread and sort out the missing dimensions from the CK img tag. If he doesn't chime in by the weekend, I would consider filing a bug report on github.

Either way I think your code needs to assume that the RTE will embed width and height and come up with a solution (like the domdocument one I linked to) to replace them with what you need.

@Horst and Adrian:

So I found out what it was with the </img> tags: They are not added by either CKEditor or TinyMCE. I was mistaken about that. What happened is that I have been using the "Inspect Element" feature in Firefox to view the output and that´s where it shows the </img> tag. Whereas when I use "Inspect Element with Firebug" or view the source (also from Firefox) the tag isn´t there! So this is a bug in Firefox, unless there is some reason I don´t understand.

As far as the missing image dimensions go I wonder if it´s not a CKEditor thing in general, not just in the Processwire module? Maybe if I have the time I will test this. So I did a brief test:

Downloaded the latest version of CKEditor (amazing amount of features and options!). When I use the standard samples they provide with the installation and look at the posted data from there I don´t see any image dimensions provided with the img tags! When I use their sample that produces XHTML compliant output it gives me style="float:right; height:109px; width:150px" in the img tag.

Maybe if I configure the CKE module to output this that will fulfill my need here (outputting mobile-optimized code). No, apparently not: to assure best mobile-readiness I check my output with http://ready.mobi/  ==> and it wants the width and height attributes, not just the style. Then there is also the possibility to configure CKEditor so it outputs valid HTML 4.01 code. However then the pages will likely fail as valid XHTML Mobile Profile 1.2 doctype. I only want width and height in the image tags, not sure if there is an easy way to get CKEditor to do that...

Thank you all for answering, I was offline unexpectedly for a day, so I´m only back now to ponder the issue...

As a sidenote: I also see that you use <img ...></img> tags, but I think that this isn't valid HTML. I only know <img src='' width='' ... /> this sort of images tags.

Both CKEditor and also TinyMCE insert the </img> end-tag, at least in standard configuration it seems (maybe this can be configured differently, I don´t know). But for the current site I´m developing I´m using the XHTML Mobile Profile 1.2 doctype to assure maximum compatibility to mobile devices and as that it validates correctly.

Hey horst - I guess I am a bit confused about how the img tag is being generated.

I just looked at Joe's code again and see that

Tinymce is producing the tag in this format <img src width height />. 

In CkEditor it actually looks like it is not adding the width and height at all. Not sure if this is a bug in PW's enhancement of the insert image, or a problem in CK itself. Either way, if you are relying on code generated by an RTE, I don't think you can assume that there will be no width/height or the placement of them in the tag.

Maybe I am not understanding how the img tag is being generated in the first place

The img tag in this case is produced by CKEditor. And you are right, it does not add width and height. So that is what I am trying to do here. If it turns out this is too difficult this might be a reason to switch back to TinyMCE. I just felt that  CKEditor is easier to configure, but maybe I should have a closer look at TinyMCE...

Horst wrote:

"I don't like working with RTEs, especially don't use them together with images.

So at least you are right: we shouldn't assume that there isn't embedded width and height in all situations."

...but I assume in a given setup they should always produce similar output and that can then be re-written before outputting it to the page.

I agree - I try to avoid giving clients the need / option to embed images in an RTE, but sometimes I don't have much choice

...well, RTEs do cause a fair bit of extra headaches when setting up a site, that´s for sure. Especially it is always quite a lot of trouble trying to assure that the clients can´t do anything with them that messes up the page. On the other hand I feel that they provide the kind of intuitive feel that makes working with a CMS appealing to people.

I've build the texformatterImageInterceptor, but i've never used it. I just don't like images inserted in WYSIWYG. LIke a lot of people here.

I´ll have another look at texformatterImageInterceptor in this context then.

$changed_content = str_replace("<img ", "<img width='$image->width(150)->width' height='$image->width(150)->height' ", $changed_content);

Thank you. That makes sense. However something still is not quite right in my code. After replacing my line with the above the result on the page is:

<a class="image-link" href="/cms/site/assets/files/1021/testflat.jpg"><img class="align_left" width="(150)->width" height="(150)->height" src="/cms/site/assets/files/1021/testflat.150x0.jpg" alt=""></img></a>

I´m sure it´s just some small thing, but for now I can´t see it...

Hi all!

• Using CKEditor small images get added to the page´s main content field (body) with the option to link to the full-size image enabled.
• Then, in the page´s template file I want to add the width and height attributes to the img tags of the small images displayed (linking to the large versions)

On the page the image reference looks like this:

<a class="image-link" href="/cms/site/assets/files/1021/testflat.jpg"><img class="align_left" src="/cms/site/assets/files/1021/testflat.150x0.jpg" alt=""></img></a>

( class="image-link"  is inserted in the template file as a trigger for the lightbox script)

Then I try to add the width and height attributes to the img tags (of the small images linking to the full size ones) in the template file like so:

$changed_content = $page->body;
$changed_content = str_replace("<img ", "<img width='$image->width' height='$image->height' ", $changed_content);

But I get the with and height of the full size image instead of the small one displayed on the page.

What might be the reason for this?

Thanks.

Thank you for your help, ryan!

I hadn´t realized that I would have to rename the module tor run in /site/modules/, that´s why it didn´t work from there.

Great work the whole CMS, I like it a lot!

Hi Joe. A simple search via google (processwire.com hide settings tab) found my thread a while ago:

http://processwire.com/talk/topic/3159-hide-settings-tab-in-page-edition/

Thank you! As described there I used that module to hide "Who can access this page"? in the settings tab for users with the editor role. Works well.

Answering my own question:

So I´ve succeeded, though it was kind of tedious and I consider it a hack only:

In \site\templates-admin\default.php:

1. detect the page´s headline
   

   $trigger = strip_tags($this->fuel->processHeadline ? $this->fuel->processHeadline : $page->get("title|name"));
    
   

2. If the headline is my site-settings page´s, set the relevant list items style to "display: none;":
   

   if( $trigger == "Site Settings"):
   $content = str_replace("<li class='Inputfield InputfieldWrapper Inputfield_ ui-widget' id='ProcessPageEditSettings' title='Settings'>", "<li style = \"display: none;\">", $content);
   $content = str_replace("<li class='Inputfield InputfieldWrapper Inputfield_ ui-widget' id='ProcessPageEditDelete' title='Delete'>", "<li style = \"display: none;\">", $content);
   $content = str_replace("<li class='Inputfield InputfieldMarkup Inputfield_ ui-widget InputfieldWrapper' id='ProcessPageEditView' title='View'>", "<li style = \"display: none;\">", $content);            
   endif;
   

   That does it. But like I said, I think it´s just a hack. So I will not set the topic to "solved", maybe there is a better way to do it.

Hi everyone!

Is it possible to eliminate access for a non-superuser to the "Settings", "Delete" and "View" tabs on a specific page?

It is a site-settings page without a template file and it really doesn´t make any sense and is confusing to the users if they can rename it etc.

Thanks

From the source, looks like it's this one http://www.videojs.com/

...could have looked myself I guess. Thanks, looks like a good one!

Use inputfield files, not images.

Oh, that was so obvious, just hadn´t seen it. Thanks

Yep, basically what Martijn said.

1. Go to Setup -> Fields -> Add New Field
2. Add a name and label for your field and change the Type dropdown to File
3. Under the Details tab you will see allowed filetypes and PDF is in the list - alter the list to suit you
4. Change Maximum Files Allowed to however many you want - perhaps 1 in this case?
5. Save your changes
6. Add to your template

That's it really.

Thank you, I will try it soon!

Hello everyone,

I have not really found a lot on this in the forums, maybe someone can point me it the right direction.

I would like users to be able to upload PDFs. So far I have come up with the solution to allow the .pdf extension for image field uploads and then the user can insert a link to the file in the main content field, using the editor. This works reasonably well, only thing is the pdf-files are listed in the "insert image" dialog window. I suppose I can live with that if there is no better solution. The only thing is they mess up the nice grid view provided by the Collage Plus module. It is probably not so hard to fix this, but before I invest energy here I would like to ask if anyone has more elegant solutions for PDFs...

Nice looking site! I specifically like the way the videos are integrated. Are they hosted on Vimeo or YouTube or on your site´s sever? What player is this?

Thank you.

Hello mangopo,

I looked at your site, looks good. I have seen a detail though that is not working on all browsers apparently: At the very top the text in the black bar gets cut off when looking at your site with Firefox (current, 24.0) under Windows7. I have not tested with anything else, just happened to see this and wanted to point it out to you. I´m attaching a screenshot (only the relevant part) so you see what I mean.

Greetings

- Say you have a company logo, and it's linked to the company site.

- The original is the same size as the thumb. ( You can prevent that with Soma's min size Module )

// The page´s template file looks like this:

include("./head.inc");                             //  first part of page, the logo is there

$changed_content = $page->body;   //  body is the the main content field created with CKEditor

// this is were I insert the lightbox trigger (class="image-link") into the "link to a larger image" ( ... = placeholder) :

$changed_content = str_replace("<a href=\"/.../site/assets/files/", "<a class=\"image-link\" href=\"/.../site/assets/files/", $changed_content);

echo $changed_content;                // echo the changed body content, were the images to be "lightboxed" are

include("./foot.inc");                       // the rest of the page

P.S.: But for now I´ve decided to do the current site I´m doing without the lightbox feature after all, unless the client insists on it. For maximum compatibility to everything, especially mobile devices this seems the cleanest approach, basically the lightbox is just eye candy...

@ Martijn Geerts:

Thank you. Your module seems really useful. But for this particular situation it doesn´t do everything I want. So I reverted to my original idea and changed \wire\modules\Process\ProcessPageEditImageSelect - Now it automatically inserts a small image size (not a visible choice anymore), the user can only add text for the alt-tag and choose between aligning left or right. In the page´s template file the body content is then re-written so the proper class is added to trigger the "lightbox".

<Martijn Geerts>And you can't always "lightbox" all images by default.</Martijn Geerts>

Why not? That´s exactly what I did here (for the CKEditor editable main content area). Seems to be working well. The Magnific Popup script sees to it that the image is displayed in the right size for the screen and apparently has an option so it doesn´t get displayed in a "lightbox" on smart phone screens (I have to try this yet).

_______________

So this seems to be working well for me. The only thing I have not figured out yet is if it is possible to use a module like \Process\ProcessPageEditImageSelect from site/modules instead of wire/modules. When I tried it it didn´t work. I´m not really familiar with how PW uses the modules in site/ vs. in /wire. (This would be to save the module from being overwritten when updating PW)

Thank you ryan,

So I changed the setup to being this way, makes sense.

No need to hack anything. Check out Image Interceptor:

http://modules.processwire.com/modules/textformatter-image-interceptor/

That will take care of the resizing and can also add a class to the image that can be used to trigger a call to your lightbox script.

Thank you.

As you say, this does take care of resizing and adds a class needed to trigger the call to the script.

However it still does not solve the problem that I want the user to have only two choices for aligning the image when inserting it. (The Image-Interceptor can be set to either align the image left or right or "Alignment: inherit" - leaving the choice to the user when inserting the image, but there I want to eliminate "No Alignment" or "Align Center"  as they mess up the look of the page.)

Also, as the image will be shown as a pre-determined size "thumbnail" on the page it will be confusing to the users if after selecting an image they are asked to set a width and height and see a "Link to Larger Version?" check box (as that will be taken care of automatically by the lightbox script).

To reduce the alignment options and eliminate the fields for setting dimensions and the check box "Link to Larger Version?" I still can only come up with the solution of "hacking" \wire\modules\Process\ProcessPageEditImageSelect (which will be overwritten when updating ProcessWire).

In the page´s template file I would put php code to extract the URL part for the full sized image´s URL (for the lightbox script link) from the inserted thumbnail´s URL (re-writing $page->body;) - but I suppose that´s the best approach.

Hello friends, once again I have a question:

This is what I´m trying to achieve:

When a user inserts an image into a page via the editor (in this case CKEditor) I would like to set things up so that when the page is being viewed one sees a thumbnail of the image, being aligned left or right (excluding the other options). When clicked on, the image opens in a "lightbox", well actually with Magnific Popup .

I´m thinking of doing it as follows, but not so sure if this would be the cleanest approach...

1) hack \wire\modules\Process\ProcessPageEditImageSelect so it inserts a pre-defined size version of the image or alternatively a thumbnail created by the Thumbnails module?

Also I could change the code in this module to exclude unwanted alignment options and automatically choose "Link to Larger Version" - (which will later be transformed into the link to trigger the script)

I think the disadvantage would be that when updating to a future version of ProcessWire the code will be lost. I tried copying \ProcessPageEditImageSelect module to \site \modules to avoid this, but it doesn´t seem to work from there.

2) To wrap things up I am thinking of inserting the actual "popup"-code by replacing the "Link to Larger Version"-code with this. I would do this in the page´s template file, replacing it in $page->body;
 

I hope I have been able to get across what I´m trying to do. I´m pretty sure it will work like this, but maybe it´s more like a hack than clean coding, so I would appreciate your advice.

Joe

Hi Joe,

If you go to the particular template and click to edit it, then click on the title field you can adjust the visibility of that field (along with other settings) for just this template. This is for all users though, but it sounds like it should be ok for your use.

I´ve found it! Hadn´t seen it at first. Solved! Thanks a lot!

Hello everyone!

Question: Is it possible to hide a field to the non-superuser when they edit a page?

Specifically I have set up a site settings page without a template (not a visible page on the site) where the guest-role user can adjust such things as site title, footer, meta-description etc. for all pages. Now when they edit this page it does not appear logical that they can edit (and see) the page´s title field, as this is not really a page.

So: does anyone know if I can hide the title field, but only on this one specific template/"page"?

Thank you!