I have pages which are going to have lots of mixed content. To give an idea these are pages to show off an architect's work.
For example pages 1 will have
- 1 video (vimeo)
- a 2x2 grid of images (images are 50% page width)
- a 100% image.
Page 2 will have
- a 100% width image
- a 100% image
- a 3x3 grid of images (images are 33% page width)
It continues like this where there is no real pattern but contains similar elements. It has to be flexible enough to include all the elements.
What is the recommended way to achieve this in drupal?
That's a task for the new core Layout Builder module.
It provides the ability to customize the layout of your content.
Dries showed a demo at DrupalCon Vienna 2017: https://www.youtube.com/watch?v=Hx4EEzI7aNE
Here's also a brilliant article on that: https://evolvingweb.ca/blog/using-layout-builder-module-drupal-8
Related
I need help with a CSS code. I run a photography website on wordpress and i have some problems displaying my pictures. There are 2 formats of pictures that are being displayed: landscape (1200 x 800 px) and portrait (595 x 853px). I want to group the tall ones 2 per row because they look so much better. I have about 40-50 images per post.
Is there any way to do this?
I've attached a demo of how i would like to result to be.
Thank you!
You can use a jQuery plugin such as Masonry or Isotope to do this - these are designed to arrange your items in a grid so that they fit nicely.
You will still need to get some HTML and CSS in place before adding the plugin to adjust the positions of the images, so you'll need to work off the plugin documentation or examples (or provide a code snippet).
It depends on how dynamic your posts are. If there's a way for you to know the structure of your HTML + CSS + content before-hand, then you can create a .tall-row class for the tall images and a .long-row class for the long images. And it's basically planning out the layout ahead of time. You can easily do this using traditional CSS, CSS FlexBox (newer), or CSS Grid (newest).
If the order of the images is going to be some-what dynamic (so you don't know when a tall image will render or when a long image will render) you can try CSS Grid'd grid-auto-flow: dense; property, which attempts to calculate the best overall fit for all of it's children. Only if this doesn't work would I suggest using a JS or jQuery plugin.
Here's an example of CSS Grid's grid-auto-flow: dense;
https://jsfiddle.net/40p0q5xx/
I'm trying to set up a Bootstrap 3 carousel to show 3 images per active slide, I want the next and previous images to be truncated but the centre image full width, similar to this example: https://thescene.com/.
I've played around with this for quite a while but can't seem to get the truncated effect? My initial idea is to have the containing div full width to show all 3 images in full with an overflow:hidden property to get the effect, but the carousel itself needs to be 1280px wide. Codeply is here: http://www.codeply.com/go/6eBfBskTsV
Why not grab one online? This component seems has a partial nearby image effect...
http://www.jssor.com/index.html
The bootstrap carousel is just a simple implementation rather than a universal solution, which means it can be cumbersome to tweak to achieve some complicated presentation. I guess unless you are just practising your skills, you won't like to make one by yourself.
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
I would like to publish my portfolio in my website. And my portfolio images sometimes horizontally wide and sometimes vertically wide. I did research a lil bit and i found this http://www.bootply.com/mohwImsUG4 solution it works great when i upload my vertical images. My question is how can i automatically fix width of grid layout to my images and of course if i have to see 2 images in one line its ok.
Screenshot (My Code)
Screenshot (Google [What i want])
Currently creating a single page responsive website in drupal 7 ,after making the page responsive ,added a block with two regions aboutus and ethics side by side that is in two column.
While reducing the browser width ,the content still remainas it is !!! I want the region about us to be below ethics ,but i am not aware how to do!!
Can anyone guide me with the aforestated question.
You can use float:left on both elements and give them a fixed width.
When the page is reduced enough they will automatically stack.