I would like to center images horizontally but I have some responsive issue
<div class="flex items-center justify-center bg-white rounded-tr-lg rounded-bl-lg h-24 p-2 text-center">
<img class="h-full mx-6" src="assets/react.png" alt="react logo" title="React">
<img class="h-full mx-6" src="assets/next.png" alt="next logo" title="Next">
<img class="h-full mx-6" src="assets/redux.png" alt="redux logo" title="Redux">
<img class="h-full mx-6" src="assets/tailwind.png" alt="tailwind logo" title="Tailwind">
<img class="h-full mx-6" src="assets/nestjs.png" alt="redux logo" title="Nest">
<img class="h-full mx-6" src="assets/typeorm.png" alt="tailwind logo" title="Typeorm">
</div>
The result:
Now if I change the dimension of the web browser:
How can I make it responsive ?
i am using TailWind with blade template in laravel, how can i make those card like in the bootstrap, i mean every three items in the one column :
#section('content')
<div class="flex justify-center">
<div class="w-8/12 bg-white p-6 rounded-lg mt-10 ">
#forelse($products as $product)
<!-- Box -->
<div class="md:flex md:justify-center md:space-x-8 md:px-14">
<!-- box-1 -->
<div class="mt-16 py-4 px-4 bg-whit w-72 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-110 transition duration-500 mx-auto md:mx-0">
<div class="w-sm">
<img class="w-64" src="{{asset('storage/images/products/'.$product->image)}}" alt="" />
<div class="mt-4 text-green-600 text-center">
<h1 class="text-xl font-bold">{{$product->name}}</h1>
<div class="mt-4 text-gray-600">{{$product->info}}</div>
<div class="mt-4 px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-300 text-green-800">{{$product->category->name}}</div>
<button class="mt-8 mb-4 py-2 px-14 rounded-full bg-green-600 text-white tracking-widest hover:bg-green-500 transition duration-200">MORE</button>
</div>
</div>
</div>
#empty
<h1 class="text-center">There is no Products</h1>
#endforelse
<div> {{$products->links()}}</div>
</div>
</div>
#endsection
Recreate the Bootstrap grid system in Tailwind CSS
<div class="grid grid-cols-12">Your column goes here</div>
You can follow this link for further details. https://shortbuzz.in/blog/shortbuzz.in/how-to-create-tailwind-css-grid-system-like-the-bootstrap-grid-system
Here's Peppermintology's comment in the form of an answer:
It sounds like you're looking for a 3 column grid. To do that in Tailwind CSS, use the grid classes like this:
<div class="grid grid-cols-3">
<!--- Generated cards go here --->
</div>
<div class="container mx-auto">
<div class="grid grid-cols-12 gap-1">
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
<div class="col-span-12 sm:col-span-12 md:col-span-3 lg:col-span-3 xl:col-span-3 2xl:col-span-3">Column</div>
</div>
</div>
there is a div with tag that by click on small image I change the src attribute and show it's the original size, but I don't know how to do in Alpine js?
<div>
<img id="main" />
</div>
/* small images from db */
<div>
foreach($images as $image){
<img id='small' src="images/.$image" />
}
</div>
in jquery :
$("#small").each(function(){
$(this).click(function(){
$("#main").attr('src', $(this).attr('src');)
})
})
})
but I don't know how to do in Alpine js?!
Something like this (using Laravel Blade syntax)?
<div x-data="{imageUrl: ''}">
<section>
<img id="main" :src="imageUrl" />
</section>
<hr />
<div>
#foreach($images as $image)
<img id='small' src="{{ images/.$image }}" #click="imageUrl = '{{ images/.$image }}'" />
#endforeach
</div>
</div>
Demonstrated in a pen here with some dummy data.
Check this codepen: Image Preview Demo. Hope this helps.
<div class="flex items-center justify-center text-gray-500 bg-blue-800 h-screen">
<div class="w-full">
<h3 class="mb-8 text-xl text-center text-white">Image Preview Demo</h3>
<div class="w-full max-w-2xl p-8 mx-auto bg-white rounded-lg">
<div class="" x-data="imageData()">
<div x-show="previewUrl == ''">
<p class="text-center uppercase text-bold">
<label for="thumbnail" class="cursor-pointer">
Upload a file
</label>
<input type="file" name="thumbnail" id="thumbnail" class="hidden" #change="updatePreview()">
</p>
</div>
<div x-show="previewUrl !== ''">
<img :src="previewUrl" alt="" class="rounded">
<div class="">
<button type="button" class="" #click="clearPreview()">change</button>
</div>
</div>
</div>
</div>
<div class="mt-2 text-center text-white">
<a class="w-32 mx-2" href="https://tailwindcss.com/">TailwindCSS</a>
<a class="w-32 mx-2" href="https://github.com/alpinejs/alpine">AlpineJS</a>
</div>
</div>
</div>
You can use x-ref on your main image and then $ref in your Alpine data function to set the src property of your main image. You could define your main image something like:
<img x-ref="mainImage" src="URL TO YOUR FIRST IMAGE" />
For each of your thumbnail images, you can do something like:
<img src="URL TO THUMBNAIL" x-on:click="pickPhoto(ARRAY INDEX)">
Your data function can then include something like this:
...
currentPhoto: 0,
photos: [
"URL TO FIRST IMAGE",
...,
"URL TO LAST IMAGE",
],
pickPhoto(index) {
this.currentPhoto = index;
this.$refs.mainImage.src = this.photos[this.currentPhoto];
},
...
I have uploaded a working example here:
https://tailwindcomponents.com/component/tailwind-css-with-alpine-js-photo-gallery
Note that this is deliberately designed to allow you to have different URLs from your thumbnails and main images, so the thumbnails can be intrinsically smaller, and load very quickly. If you are using the same images for both, you can simplify the code significantly. Each of your thumbnails could be done like this:
<img src="URL TO YOUR FIRST IMAGE" x-on:click="$refs.mainImage.src = 'URL TO YOUR FIRST IMAGE'">
With no need for the pickPhoto function or the photos array.
The downside of the simpler approach is that your page will take longer to load because you won't be using smaller images for your thumbnails.
In AlpineJs you could do something like this.
Not tested, just to make you an idea.
myimages()
{
return {
selected: '',
images: [
'images/1.png',
'images/2.png',
'images/3.png',
'images/4.png'
]
}
}
<div x-data="myimages()">
<div>
<img id="main" :src="selected"/>
</div>
<div>
<template x-for="(selimage, index) in images" :key="index">
<img class='small' :src="selimage" #click="selected = selimage"/>
</template>
</div>
</div>
you can for each both of them like this
<div x-data="{image:'0'}">
<div>
#foreach ($image_src as $key => $image)
<a href="">
<img x-show="image==='{{ $key++ }}'"
src="{{$image}}" alt="">
</a>
#endforeach
</div>
<div class=" overflow-x-scroll ">
#foreach ($image_src as $key=> $image)
<a class="mr-1" on- href="">
<img :class="{' border border-way-pink':image==='{{ $key }}'}"
#click.prevent="image='{{ $key++ }}'"
class="w-32 h-24 mr-5" src="{{$image}}" alt="">
</a>
#endforeach
</div>
</div>
I have thumbnail with 4 images. All images have the same height. But in thumbnail they are not the same. I want to make them look the same.
Here what i got:
4 images:
1. 614x830
2. 599x830
3. 599x830
4. 599x830
In layout i get 4 images where 3 has the same height (image 2, 3 and 4) and image 1 has height smaller.
How to fix that problem? And why does it happen? Why it make height smaller if original height of images are the same?
Thanks!
<div class="row">
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/1.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/2.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/3.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/4.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Fall 2016</h4>
</div>
</div>
</div>
enter image description here
So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width