Better control of views output markup? - drupal

I am developing a website with drupal 6, and using a 960 grid system based theme.
I want to create a dynamic thumbnail gallery with Views, and using this jquery effect:
http://www.queness.com/post/590/jquery-thumbnail-with-zooming-image-and-fading-caption-tutorial
I have some experience with views, but I am by not means an expert... I am facing two problems here:
How to make the views html output
conform to my 960 grid system theme
(that means that each object in the
views output should have a grid-x
class, at the very least)
How to adapt the views html output to
the DOM required by the jquery effect I want to use.
So what I want is basically more control over the output of Views. Right now I can only get html lists or tables. Is there anyway to use a more customized DOM and put some kind of placeholders for fields in it?
Thank you for reading
O.

You can define your own templates, that Views will use instead of its default ones.
In those template, you can use almost any kind of HTML markup that you possibily can imagine -- which means you'll be having a really great level of control over the output.
For more informations, you can start looking at this question and its answers : Drupal 6: How to quickly theme a view ?.
And a couple more links that might be useful :
Drupal 6 theme guide
Overriding themable output
Views help index

Related

How to customise content elements in typo3?

I have just begun my Typo3 journey. There is not much typo3 content available over the internet. I have gone through its documentation. As far as I have understood it, the ideal way of creating a website (frontend) is using content elements from backend and customising it according to our need in code (using CSS).
My Question is how can I do so? How can I find the code of all my used content elements so that I can use my own CSS to style it according to my need?
Or is there any other ideal or professional way of creating a webpage that mostly developers use?
Please please help me with my questions.
THANK YOU IN ADVANCE :)
I suggest to look into one of the following 2 extensions which allow to create content element types within a nice backend module:
https://extensions.typo3.org/extension/mask
https://extensions.typo3.org/extension/dce
Both come with a manual and it is afterwards easy to adopt the based default templates and apply the HTML you need
for the page structure I suggest to use something like https://jweiland.net/typo3/typo3-template-version-11.html or the bootstrap package https://www.bootstrap-package.com/ which also come with various custom content elements already
if you are german speaking you can also take a look at the video tutorials of wolfgang wagner which can be found at https://wwagner.net/
The base frontend structure of a TYPO3 websites is:
page templates (usually contain generic elements such as header,
footer, navigation.
page templates can be devided into serveral sections if needed
content elements which are than displayed in this sections / in
templates
The core already ships a set of common content elements and supplies basic CSS styling which you can override and adjust.
I prefer to check what kind of content elements I might need in order to get the website layout done and then build those custom elements. This gives full control over the HTML markup output and I can write my custom CSS specifically for my markup. This approach might need more initial work and requires a deeper understanding of the system, but often pays off in the end.
But if you want to see quick results as a beginner the approaches Georg mentioned with Mask or the bootstrap package are perfectly fine.

How to divide a page into several parts

I really wonder how such websites like https://medium.com/ (on the home page) https://qz.com divide the page according to tags or the order is like : header, some news, some articles in same shaped boxes,video, then some more content and then footer... so in one page they are able to show many things.. is that done by dividing page with HTML div tags or is there something else used ? I am a newbie trying to learn Django. I appreciate any help
I think there is more than just div-tags, but in the end it is (only) html, css and javascript that creates the visual webside on the clients' side.
Frameworks like the "960 Grid System" or Bootstraps Grid System can help you to keep content in a common order. Create templates for your CMS to achive a common design (Ahhhh: Use a CMS). Maybe use Less, Saas, etc. instead of writing plain old css-files.
Short answer: Look at their code. Of course you can't see their server-side code, but you can look at the HTML and it clearly shows that medium uses divs, while qz uses sections.
Now as to what you can use, there really isn't anything else. Simply because there isn't any need for it. You might want to add an uniform height for each of those "sections", but you don't need to.
Now to the serverside part: they certainly didn't hardcode every single section, but created a template for it. Depending on what technology they use that will look different, but it will always have
A template (often called function, template or module depending on the technology used) that has everything ready as to the HTML and CSS. This designs the layout and design of those 'sections'. It also accepts content that it will then insert into that structure.
A 'main-page' that uses that template repeatedly, but gives it different information. For Medium this might be something like: MakeStreamItem("Audio", GetFirstFourAudioItems())

MVC: How to create a common Section to be shared by multiple views

I am exploring the use of Sections to create optional content in my site's layout, as explained quite neatly in ScottGu's article here:
http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts-and-sections-with-razor
However, what I'm trying to do is add a sidebar to the views related to a specific controller, where the sidebar contains static information relevant to the controller. The data won't be tied to the model - it'll just be some links to external pages, and some static 'helper' text.
I don't want the Sidebar on every page / view - just on some views (in my case, it's the view related to a specific controller).
What I don't want to do is have to declare the same Section and content for each view that needs this. I was trying to find some way of creating a 'shared section' - that I could reference neatly in the views that require it, and pass back to the _Layout when the View is returned by the controller.
Partial Views seemed to be the way forward with this:
Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine
But I'm not sure if this is the right way to go about this, or if there's more succinct way to achieve what I'm aiming for.
I have been searching for answers on this, but as ever with this sort of thing, I am 100% sure I am not using the correct terminology in my search attempts for this - so apologies if this is duplicate post, basic stuff, or has already been answered elsewhere.
Any pointers on this - even if it's just to give me some direction on the terms to search on - would be welcome !
I've not provided any example code here, but could possibly knock something up if it helps articulate things.
Cheers
It sounds like you need Layout nesting, rather than sections.
You can create a master layout, then have a layout that contains the sidebar, making it's Layout property point to your master layout. Then, you can choose which layout for your content pages to use, simply by specifying Layout = Master.cshtml or Layout = Sidebar.cshtml
I think the approach outlined in the link you provided is very feasible.
Another alternative, depending on the complexity involved in getting the sidebar in your layout, you could create a separate layout.

How to show uploaded pictures in a Drupal view?

I'm building a website in Drupal. I want to show some information about artistic espectacles including some pictures of it. When i define the fields to show in the corresponding view and i include the images as a content in the Fields section, the corresponding query returns the path to the image and not the image itself which is the wanted behavior. I want to know a way to make a view in Drupal which allows me show the images and not their paths. If the question isn't clear enough, please make me know and i help you to understand. Thank you.
I've had similar troubles with Views, but actually desired the behavior you are encountering. So long as you have the image's path, you can write it to the View's output wrapped in HTML <img> tags. So for example, <img src="[image path your view is outputting]" alt="">. This should display the image for you.
Depending on your Drupal version there are some great add-on modules which make Views more flexible.
This Views PHP module works for Drupal 7 (I have not personally tested) and allows you to incorporate regular PHP code into Views output.
I have used Views Custom Field extensively in Drupal 6 and it works great.

Best practices to implement custom functionality on website

I was wondering if someone with Drupal experience could advice what are the best practices in the following situations. I think they are all common tasks for any website that you build.
Display a custom HTML of a certain content type at front-page (e.g., only the link and title).
Should I build a module only for this?
Customize the login form HMTL, including inputs, labels etc, to something very different from the default login block.
Again, another module?
Format the node view of some content types; for example: showing additional fields values. I have some Joomla experience and with it, it's very easy to override the template on your theme.
But with Drupal, it seems HTML is hard-coded on PHP files and there are very few thing that uses templates. Or am I missing something?
You should create a view (from Views module), and for this create display 'block'. This block you can use later on your site. Within your view settings you can choose what and how you will display.
It depends what you would like to put there. If you put just some static text, change theme could be a solution. But still, a bit smelly. What you should do, is to create a module use hook_form_FORM_ID_alter and add both - field to your form, and code to use values which user added.
Change templates for this content type in your custom theme; or use Panels module - here you have nice introduction; or use Display Suite module - which do pretty much the some work as creating a template
html is in php files, but where else can it go? Drupal also has it template overwrite system. The customization of the theme can be usually done using that alone.
As for your questions (there are also other alternative)
load the content type in view/block, display in list format on home page.
create your own theme for css changes. create custom tpl.php for
layout, and div naming etc.
same as above.
It doesn't hurt to create a new module, but generally it's not necessary unless you are going for something like a muti-step form.
You can use both Views & Panels in order to achieve what you've mentioned above.
For instance, Panels gives you the option to override the home page with your own content. This content can be organized with Views.
From drupal.org:
"The Views module provides a flexible method for Drupal site designers to control how lists and tables of content (nodes in Views 1, almost anything in Views 2) are presented."
"The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout."

Resources