Full Width Slideshow Above Content - wordpress

I am using a wordpress version of Supersized. My issue is that I wish to have this nice resizable full-width image gallery but be able to place the content below. An example of how I wish it to perform here; http://www.pedinilondon.co.uk/ They are using the non-wordpress version so are easily able to break it out of the template.
Is it simply a case of CSS or div manipulation or am I running into a brick wall with this? Should I be using a different knd of slideshow to achieve what I want?
Thanks

What you want sounds like fluid images (responsive design), which there seems to be a plug-in for that. http://wordpress.org/extend/plugins/wp-fluid-images/faq/

Related

Bootstrap.4 - Building Carousel Using Slick

I am trying to build a responsive carousel as present in Mecca website. I am using Bootstrap 4 and using slick plugin to build the carousel.
The look and feel i am trying to achieve is the something like this picture
As i am using boostrap 4, to build this tile, I have written the following code and codepen link is given below
[Codepen](https://codepen.io/bzaidi/pen/MWamJvZ)
I am facing the following problems
This carousel is not responsive. I need to change font-size using media queries on almost every resolution. If I see Mecca website, their carousel is perfectly responsive.
When i float the image left, the rightContent div seems to be taking all the width of parent div which is 290px? Why is that?
Is my approach correct?
How can I achieve responsiveness on all resolutions?
Can you someone help me?
Thanks.

Display a background image that has the column layout for development

Are there any pre-build images that I could use when developing that will display a grid in the background of my browser?
This would make it easier to visualize the layout during development and make sure my design lines up correctly with a grid.
Does bootstrap have anything like this builtin that I can enable in the css?
If I understand you correctly you are looking for something like this?https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg
Apologies if this is not what you are after.

Creating the thumbnails for an image gallery

I am a back-end developer and I'd like to create a little website using angular and boostrap.
I would like to create a galerie, and I have been looking around to see how it's done. I found a correct example on the following link : https://blueimp.github.io/Bootstrap-Image-Gallery/
In that case, the images are taken from flickr api, which sends 2 different pictures (small and large). The small one is the thumbnail, and when you click on it, it opens the large one.
My question is the following one : let's say I have all my images of different sizes, and that I would like to have thumbnails of those (same size, but responsive !) to create my gallery, what would be the way to do that? With css only?
Create parent <div> with fix width then add img inside by applying width:100% on image and height:auto. Please try to implement the example you found and if you find any issues post with your code.

Fix images in bootstrap rails

I am creating a rails application using bootstrap. In my header, I am creating a carousel that provides links to other pages. My images are of different sizes and the carousel keeps reflecting this. I do not want the carousel to change size based on the images. How can I fix this so all of the images are the same size within the carousel?
Thanks for any help given in advance!
I guess the easiest option would be to resize them all to the same size using well any photo editor or even online.
Google output:
http://www.picresize.com/
Alternatively you could use a gem like carrierwave or paperclip. More complex but if you are going to have images like profile pictures then it might be useful.
Bye

Can CSS be modified to scale contents of div to 100% of window?

I'm currently building a site using this framework template: http://cargocollective.com/montessori
My goal is to make the thumbnails scale in size to fill 100% of the screen, just like this site: http://mariohugo.com (resize window to see this in action)
Does anyone know if this can be done by modifying the CSS in any way?
That site is done with JavaScript - if you turn your JavaScript off, you get no images at all. Not very compatible!
You can do something similar with fluid CSS layouts, though it won't be quite as slick as that site.
have a look at twitter bootstrap framework http://twitter.github.com/bootstrap/. It might help you.

Resources