Displaying image content types as grids in drupal 7? - html

I am currently using the Views and Display Suite modules to create a page that works as an image gallery. You click on the menu button to take you to a page (the view) that has multiple links to nodes (individual galleries).
When you click these nodes, they take you into the separate page and show all images uploaded using the "event" content type that I made.
The event content type has one field (type: image) that uses a multiupload widget, allowing for multiple file uploads.
However, the images on the node are displayed within divs, so they all have their own rows basically. I would like to know if it was possible to put them all into grids, and if so; how? I tried using display suite, but I only have that one field to work with.

If you want to get a fully customized page and arrange the fields just like you want, use the theme suggestions.
For a node of type "event", as you said, it would be node--event.tpl.php. You can duplicate the code inside the base template node.tpl.php of your parent theme (or if you don't have one, of Bartik for example) to have a good starting material.
Just rearrange the div, the tags, the variables as your convenience, add some custom CSS to make your grid, and you should be done!
I hope it helps.

Related

Create dynamic HTML from an object in Angular 6

Consider the given scenario.
I have a class with properties that has all the necessary information regarding a page design. For example I know the line spacings, page number format, text to be displayed, text stye and margin etc.
I want to visualize the exact same page and display it on my Angular SPA. I also want to be able to edit the page layout using text editing tools (just like we have in ant text editing software). For example changing the text color, margins, text size etc and reflect it back to original class instance (two way binding to original object to be precise).
I want to know, Do we have any tool or package that serves the given purpose. If not how we can achieve this requirement in a simple yet effective manner.
Maybe you want to create your class as a component let us say contentComponent in which your class is attached to an HTML file , the HTML file should rely only on data binding and class binding to show content and set the layout of the page , in the other hand create another component editComponent that will get access to contentComponentclass properties through a service to set and change its properties and hence reflecting on the contentComponent view .

Reusable HTML Blocks in Sitecore

I'm looking for a way to create a reusable HTML widget for a website run on Sitecore 8. My original idea was to create a data template that basically consisted of a single Rich Textbox. The idea is that you could drop any number of instances of these widgets on a placeholder and it would render out the HTML from each instance of the widget on the page and in the correct placeholder.
Example:
A content item called /products/my-product is based off of "Product" data template
It consists of some fields on the Product template (maybe product name, price)
I'd like the ability for the content editor to quickly drop one or more instances of the HTML widget on the page (say, in the right rail or in a different placeholder on the sublayout. I know I could just throw a "notes" field on the product template, but I'd like to make it more dynamic so that they can add several instances of this HTML widget and place them anywhere they desire.
I quickly realized that because we need the ability for multiple instances of this widget, a data template was not enough because each instance of the widget would needs its own data to populate on the front. Thus, my idea was to allow the content editor to add HTML widgets as a child of the current item (so each item would have its own instance data). I don't think this will work because I don't know of a way to have these children tell the parent page which placeholder to put them in, so laying them out is a problem.
I also thought about somehow setting the placeholder name as a parameter or field on the data template for the HTML widget, but I couldn't figure out how to get Sitecore to dynamically add them to a placeholder when it glues everything together.
Is there a way to achieve what I'm trying to do? Seems like a reusable HTML (or other kind of widget, for that matter) would be a fairly common need. I feel like there's an easy Sitecore way to handle this that I'm missing and overcomplicating the solution.
From what I understand, you're looking for Datasource field of a component.
Basically you:
Create a data template which contains fields necessary for your component
Create a set of items using that templates
Allow authors to select one of them as the Datasource for your component.
It's built in Sitecore functionality.
Check blog post http://firebreaksice.com/using-the-datasource-field-with-sitecore-sublayouts/ or google for Sitecore datasource.
Other links:
http://www.nonlinearcreations.com/Digital/how-we-think/articles/2014/03/4-patterns-Sitecore-component-development.aspx
http://www.nonlinearcreations.com/Digital/how-we-think/articles/2015/04/Sitecore-templates.aspx
EDIT:
Read about Datasource Location field (defining the repository of datasources location) here: http://www.sitecore.net/learn/blogs/technical-blogs/getting-to-know-sitecore/posts/2011/01/handling-presentation-component-settings.aspx
Read about Datasources and MVC here: http://jockstothecore.com/sitecore-mvc-item-maze/

Hold data for list to add later?

So no SQL tables or anything here. Basically, I have 3 pages that have 6 items each. Each item consists of an image and then some text and also a smaller image than changes from a check to an "x" depending on if user selects or not. So if the image is checked, the user is adding that to a list which would display on a fourth page. This data needs to persist through just a session and if the session times out, then it resets. If the list is complete and on that fourth page the user choices to email or share list via social sharing, then the data would be gone after that action. What I am trying to figure out is the best way to approach and implement this with minimal time and effort as it has to go out quickly. Can any of you explain and maybe point to some links with info on the best way to achieve?
This is being done in asp.net web forms with html, css, and javascript.
Much appreciated!
You can use ViewBag() (for view in razor) or ViewData[] (for page in .net) to hold data for one web page.when you want it to other page. You can pass it to other page.
check this out
ViewBag, ViewData and TempData

Dynamically changing component reference

This seems simple enough but I can't quite think of how to actually do it...
In IBM Web Content Management (WCM) version 7 I have a Presentation Template (PT) which calls a Menu Component to display some content items.
I also have some (static) links on the sidebar which I want to basically just change the menu component that is being used, and that's it.
So for example...
In the PT:
[Component name="Main Page"]
When I click on a link, I want the exact same PT to be displayed except I want it to use:
[Component name="Next Page"]
Basically, Main Page and Next Page are showing the same content items, they just have different filters on them (so they appear to be different pages). The "Main Page" shows "everything" and then if you click on a link it's suppose to only show a subset of that.
I can't quite figure out how to connect the link to the PT to change it. I've thought about using JavaScript or JSP to simply rewrite the HTML, but even then I'm not sure how I set it up to say that: "if the link has been clicked, rewrite the HTML" because I'm not sure what to even point the link to, or pass through the link.
I thought about creating different content items with different PTs to link to, but there are about a dozen links (and therefore a dozen different Menu Components that I want to use), so I thought it might be better in the long run to just use 1 dynamic PT (in case the number of links grows).
It is only that one component that needs to be changed in order to display how I need for every link though.
Any ideas how to go about doing this?
So this is how I resolved this:
I created a component reference element in the content items called "menuComp" and then I set that to point to the appropriate Menu Component for each particular page.
In the presentation template, I removed the component reference and changed it to an [Element] tag which used key="menuComp".

Using a single shared element across multiple partial views

I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)
A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.
Each of these dialog window controls is in a separate Partial View page.
Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them - which as is would mean multiple instances of the "mask" element.
What I am trying to find a solution for is to only need to create one instance of a "mask" element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)
The only real idea I have come up with so far is to add the "mask" element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)
I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?
A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?
Thanks
To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.
Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.
My initial thought is for you to use something like jQuery UI where it handles the masking for you or if you are using something custom you can load the content for the dialog via ajax then show it in the single dialog on the master page.