I have the following simple component:
<template>
<div class='d-flex justify-content-center'>
<g-image src='~/assets/bitcoin.svg' width='36' height='36' />
<h2 class='mx-2'>{{ block_count }}</h2>
<g-image src='~/assets/bitcoin.svg' width='36' height='36' />
</div>
</template>
(the .svg is around 64 in width and height)
Which in small widths gives nice square images:
but as soon as I start increasing the window size in width it streches out the .svg
I've tried to use a couple of g-image's fit parameters but with no luck.
What am I not getting here?
EDIT Live URL to showcase bitcoin-blocks-info-site.s3-website-eu-west-1.amazonaws.com
EDIT
It seems that when I apply b-container scaffolding then the problem goes away:
<template>
<b-container>
<b-row>
<b-col class='d-flex justify-content-center align-items-center'>
<g-image src='~/assets/bitcoin.svg' width='36' />
<h2 class='mx-3 d-inline'>{{ block_count }}</h2>
<g-image src='~/assets/bitcoin.svg' width='36' />
</b-col>
</b-row>
</b-container>
</template>
I want to add a different attribute value to each image, So that Image one has an attribute of image-1, Image 2 has an attribute of image-2, and so on.
Any help would be appreciated.
I am new to Drupal and have no idea where to start.
I can add a single attribute to all the images.
This is how my image.html.twig currently looks like:
<img{{ attributes.addClass(classes) }}/>
This is what I am trying to achive:
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(2)"
<img src="path to image" onclick="currentSlide(3)"
I got as far as this:
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(1)"
<img src="path to image" onclick="currentSlide(1)"
This how you can add different attributes
<img{{ attributes.setAttribute('onclick', 'currentSlide(1)') }}/>
In WordPress comment API i want a image tag src value through ReactJS. So i tried to get value as { item.author_avatar_urls[24] } but in the front the img tag is not properly fetched, it look like this:
<img src="http://localhost/project/wp/wp-content/uploads/2019/02/auhtor.png" width="49" height="50" alt="admin" class="avatar avatar-50 wp-user-avatar wp-user-avatar-50 alignnone photo" />
How can i get the proper img src value from JSON object ?
My json is as below image
I am new to Onsen UI and Monaca. I really like it a lot. I am trying to build a carousel with small images (say 6em x 6em). Using ons-carousl and ons-carousel-items, I am able to achieve it. However, there is a wide gap between consecutive images. Like only 1 small image in the visible screen. The next becomes visible only after I slide full screen. I have tried margins and all but in vain.
Please Help !
My code :-
<ons-carousel width="auto" swipeable auto-scroll auto-scroll-ratio="0.2" animation="ease-in" overscrollable class="carousel1">
<ons-carousel-item>
<img class="car1" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
<ons-carousel-item>
<img class="car1 img-thumbnail" src="./images/banner4.png" />
</ons-carousel-item>
</ons-carousel>
Check out the Carousel below
Ok, sorry guys that was big title. But most of the title explains what I need.
I have a HTML page that will display a image onto the screen. And basically it is on fullscreen (big problem on very wide screens), and I am using: https://github.com/davidjbradshaw/imagemap-resizer
To resize the map I have created.
Here is my code in HTML:
<body>
<img id="imgg" src="imgs/SampleImage.png" height="100%" width="100%" style="max-height:1414px; max-width:1414px;" alt="Page" usemap="#image_map" border="0">
<map name="image_map" id="image_map">
<area shape="poly" coords=" 104,693, 250,702, 219,1203, 105,1208, 105,692" href="http://wordpress.com" alt="Blog"/>
<area shape="poly" coords=" 376,879, 521,880, 522,1035, 375,1037, 375,880" href="https://www.facebook.com/" alt="Facebook Page"/>
<area shape="poly" coords=" 558,882, 705,883, 705,1036, 563,1036, 559,885" href="https://www.facebook.com/" alt="Facebook Page"/>
<area shape="poly" coords=" 364,1045, 716,1047, 710,1082, 370,1085, 367,1044" href="https://twitter.com/" alt="Twitter Page"/>
<area shape="poly" coords=" 294,1036, 344,1055, 361,1035, 368,917, 370,901, 310,916, 297,945, 292,978, 290,1037, 301,1037" href="https://www.pinterest.com/" alt="Pinterest"/>
<area shape="poly" coords=" 529,898, 555,898, 551,1017, 536,1021, 531,901" href="https://www.pinterest.com/" alt="Pinterest"/>
<area shape="poly" coords=" 718,1033, 715,904, 771,922, 789,1037, 744,1050, 722,1033" href="https://www.pinterest.com/" alt="Pinterest"/>
</map>
</body>
<!--[if lte IE 8]>
<script type="text/javascript" src="js/ie8.polyfil.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/imageMapResizer.min.js"></script>
<script type="text/javascript">
$('map').imageMapResize();
</script>
I just want the image to display on the page, but after a certain height (the images max-height and max-width) it should not allow the image to be stretched anymore and instead display a background colour.
I have also in the "style" section of my img tag tried to use the max-height and max-width properties. Did not work. And the height="100%" and width="100%" is there to make sure the image doesn't look too big, this is a 1000x1000 picture, so on smaller devices they would have to scroll, that's why I used this. Thank you everyone for the help!
Ok, looks like no one was able to help. But I figured it out myself!
So I will share the secret with everyone. Basically its not really a secret, I used a dirty little javascript trick instead of a html/css trick. It will look at the image heights, check whether the height is smaller than the width or if the width is smaller than the height and set either one to the smaller height. So for example:
Height = 1000px
width = 800px
Now the JavaScript code will check which one is smaller, then set the height/width to the smaller size (keep in mind this is a SQUARE image):
height = 800px
width = 800px
And here is the code:
<script>
var img = document.getElementById('imgg');
var width = img.clientWidth;
var height = img.clientHeight;
if (width < height) {
img.style.height=width;
}
if (height < width) {
img.style.width=height;
}
</script>