25 December 2013, 15:12

I am trying to modify the templates for an image block.  I can see where the code is for the actual image block, but I cannot find the surrounding code that is placed around all blocks.

Does anybody know where this code is added?

Thanks,

Melissa

03 January 2014, 3:07

Hi Melissa,

blocks are only responsible for generating the html-code inside of these divs:

<div class="blockinstance-header">

and

<div class="blockinstance-content">

The line you are looking for comes from theme/raw/templates/view/blocktypecontainerviewing.tpl and thus is identical for all blocks. You may be able to change change the html-structure via JavaScript from within the block-code, but that would probably break up the uniform design of the pages and was probably not intended that way. 

Can I ask what you are trying to do?

06 January 2014, 13:23

Thanks for your help Tobias.  You answered both of my questions.  In my other question, I was asking about the textarea field, so the end user could type in CSS style code that is specific for that block.  Specifically I am thinking of "float: right or float: left" of images, quotes, and other aside information.  But even when that is set correctly, the "blockinstance-content" says that the whole block should be clear on both sides, which means that the image cannot be floated, as I desired.

I tried to mess around with the CSS code to see if I could tag the image to affect the block, but I could not get it to work.   So I will most likely have to propograte the "blockinstance-header" and block-instance-content" into the plugin, so the plugin can decide based on the user input if the block should be a clear block or a style block.

Or maybe I need to create a GUI that would affect all blocks to give these options to: float left, float right, clear both, borders, background, etc.

Melissa

06 January 2014, 13:26

I have also thought about adding a description block to the GUI as well.  Since I am working with small children, I tend to find a lot of images myself that I feel are most important to the lessons being learned, but since I want the student to work on writing I would like the student to be able to add the description of the image.  That way I can put the image in a central location, but have the description of the image be specific to the user.

Melissa

08 January 2014, 4:39

Hi Melissa,

Sorry if I break up the thread-flow, but here about your second reply-post. 

How do you manage to have the picture in a central location and store the descriptions specific to the user? Do you put the picture in a group, create a group-page with the picture and then have the users copy the page and add the description? 

Or are you saving the description from the display view instead of the editing view of the page? If so, how do you review the individual descriptions later? 

Tobias

08 January 2014, 4:32

Hi Melissa,

let me reply to the technical post first. 

You should be able to overwrite the "clear:both"-rule (which is defined for the "cb"-class) with "clear:none", if you define it for the id of the div. The id is generated by "blockistance_<blockinstance-id>". 

On the other hand, defining arbitrary css-code on user-level seems a bit technical for most users to me (unless it's something like the CSS-Zengarden, designed to explicitly teach CSS). I like your second idea better: to offer a gui to the user to change specific behavior. This way you can also prevent the user from defining a design that clashes too harshly with the rest of the page (like orange-blue-dashed border frames...)

Generally, I'm not sure I understood completely, what you are trying to do. Would you have the text of a text-box flowing around a picture with a smaller width than the column? That'd kind of break up the static idea of blocks as structural elements on the pages, Sounds interesting. You'd have to modify the clear:both of the following text-block as well though. Not sure it works like that with the id-specific style-information only, but maybe if you set the general "cb:clear" to "left" in theme/raw/static/style.css ... 

Tobias

08 January 2014, 6:33

Description

What I do is I put images in a group.  The user creates a page in their own account.  I modified the dialog box to allow another field (css or description).  When I save the image, my variables are saved.  They are saved for that one instance, just like any other variable on the dialog box. I am guessing the details of it are handled by PieForms.  I just know it works.

I have not coded the Description part yet, but if the user includes a description in this dialog box, that is the description that will be placed below the image.

CSS

I know that a lot of Mahara users are adults who are not tech savvy.  I am dealing with elementary schools children.  In my personal opinion, most of these children, by the time they are adults, will know the basics of CSS (how to change colors, borders, image background, make two columns, etc.)  Obviously the complex parts of CSS is another story.  I think it is also true about the basics of HTML.

Once a child knows fractions, decimals, percentages, and ratios, there is no reason why the student cannot those basics of CSS and HTML.  These math skills are learned in the 5th / 6th grade.  That is also the time when logic is devleoped (if - then - else; do - until), which is why some math curriculums start to teach these basics of programming starting between 4th - 7th grade.

Just because a person does not understand CSS does not mean that we should not provide the field in the dialog box.  Those that understand what it is used for (and how to use it) will use it.  Those that do not, will most likely leave it blank.  If an administrator is really worried about the user being untechnical, you have an option in the user settings "display CSS filed for individual artefacts".  Those that are technical enough to even go into their settings, can turn it on.  And those that are scared of technology will not even know the item exists.

The bottom line is that sometimes the user wants to create a style that is just too complex for even the current page layouts.  

As for your suggestion of going to the actual CSS file and creating a new CSS items with the specific ID value ... and you think that my suggestion of letting the end user add a bit of CSS code in a dialog box is too complex ... and now you want to give these untechnical users access the filesystem!?   Maybe I am missing something in your suggestion.

If you are wondering what I am trying to do, here it is.  I have a collection with 40 pages in it.  That is too many pages to display the tabs on the top.  So I added a navigation item on the left hand side with the pages of my collection listed.  Now I need to display my page on the right hand side in the other 66%.  

All of my sections are an image and a paragraph of text describing the image.  It is just the way that my students do their pages.  They are second graders, so we are still working on witing paragaphs.  

There is nothing wrong with wrapping text around an image or a quote.  In some ways I like the drag and drop of Mahara (ease of use), but since most of my pages are a collection of image and text items, I want the ability to display / work with the pair as a pair.  The two items together are an entity, and I want to be able to treat them as such.

Although now that I am writing this, if I just changed the "text" area of the description to be a "wysiwyg", I could solve my problem that way.  Then I just put in an item so the user can say if the image comes before or after the text.  Although, that might cause other problems that I don't yet foresee.

Melissa

08 January 2014, 7:46

To work with image and description as unified entity I would copy entire image blocktype in htdosc/artefact/file/blocktype/image and renamed it to something like imagetext.

Then I would change all class definitions accordingly (eg. from BlocktypeImage to BlocktypeImagetext or something smiliar).

Next I would change config_form function (or something similar - I'm writing this from the top of my head, not actually checking it) to add aditional textarea or wyswig element to pieform.

Lastly I would change render_self function to allow description of the image to be flown around image itself.

HTH, Gregor

09 January 2014, 5:28

I thought you wanted the user to only write the css-definitions without the assignment to the item, like for example

width: 50%;

float: left;

clear: right;

and with that you create the CSS-item for the element from the plugin-code. Same would hold if the user uses a gui to determine flow right/left/none. 

But Gregors idea seems more straight forward, creating a mixed block with picture and text and have the text flow around it inside of the block element. 

About CSS: I didn't mean to say that it's overly difficult learning CSS, but I don't think it would be getting you a lot here. I can see your point about adding an advanced editing mode, like the "Edit HTML source code" in the Text Box editor, although even from there CSS code seems to be eliminated. 

And no, there's absolutely nothing wrong with wrapping text around an image. The box-design is easy but very static. There's surely room for enhancement.