I'm making a carousel and I wanna set a background image for every carousel item and I want the background image to be the same image that's inside the item, so the image has a src attribute and I want to get it into the CSS automatically to set it as a background
Sorry for my bad English
It can be done with Javascript
Suppose, you have an <img> like
<img id="my_img" src="my_img_src"/>
Then, you can get the src of the <img> as follows
var myimgsrc = document.getElementById("my_img").src;
Now, the variable myimgsrc holds the src of your <img>.
Again using Javascript you can use the variable to set the CSS like,
document.getElementById("my_img").style.backgroundImage = "url('"+myimgsrc+"')";
Try this..
Related
I am trying to set HTML content to the title attribute of an image tag which comes from the backend like below.
<span style="color:blue;font-weight:bold;"> <sup>superscript</sup> </span>
When I set the title using property binding and DOM sanitization, when I hover on the image it supposed to show rendered HTML but it is showing direct HTML content as it coming from the backend.
I have created the Slackblitz for the issue.
I really appreciate your help. Thank you for your help in advance.
Title attribute accepts string and it displays as it is. In case you are looking for a functionality like tooltip, you can position the span relative to the image and then change the display property on mouseover of image.
is your goal similar to this? take a look if you haven't seen it yet.
https://www.geeksforgeeks.org/how-to-insert-html-into-view-from-angularjs-controller/
I'm trying to style a list of content generated by Drupal Views. I can edit the HTML output of fields but have no access to the CSS. The content includes an image which needs floating/aligning to the left so that text flows around it. The original image files are a variety of sizes. The HTML I'm using for the image field is:
<img src="[image url]" width="220" height="auto" align="left" />
However, in some cases where images are longer than others, I get an overlapping effect like this:
What I want is for them all to display like this:
How can I do this?
Drupal provides by default feature of cropping/scaling images. There's no point of providing larger images and scaling them down or cropping them with CSS. That's waste of resources (bandwidth).
Go to Configuration -> Media -> Image styles (from admin menu) and define style you need. It's super easy - you just need to name your style and the pick effect you want (i.e. "Scale & crop"), set dimensions you need and save new style.
Then you should start using that style. If your page is generated by view the find and edit that view. Find that image field and set it to use your new style.
Other way is to force displaying of images in your style from template file directly. Find where image is printed and use:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
First parameter is style name, so put name of style you just created. Other parameter is URI (not path, as mentioned on that page!). Print out (print_r or var_dump whole image object you have in template file and see how can you access image URI. It should be something like:
$node->field_my_image['und'][0]['uri'])
So pass that as second parameter.
Even if you don't have access to the CSS you can still use CSS by adding style in your HTML tags.
As to your overlapping problems, assuming that you have a div that contains your images use can set that div's styleto style="overflow:hidden". You can also just give enough space to the div that contain your image.
I am working on a 'gallery' section for a side project and I am trying to accomplish different methods of displaying the images depending on screensize.
At desktop and tablet size it would display as a grid, similar to vsco.grid or apples photo stream grid. At phone size it displays in a horizontal scroll to view the images.
My question is it possible to target a specific id or class with a media query? Logic tells me yes but life is telling me no.
Example:
HTML
`<div class="photogrid" id="photoscroll">
<img>
<img>
<img>
<img>
<img>
<img>
</div>`
Is this something that is possible with my current organization?
I know that I can set them as:
`<div class="photogrid">
<img>
<img>
<img>
<img>
<img>
<img>
</div>
<div id="photoscroll">
<img>
<img>
<img>
<img>
<img>
<img>
</div>`
And have separate mediaqueries in that format, but I am trying to avoid having the images have to load twice. (wrong thinking maybe? I am not that experienced.)
Any help is appreciated, I apologize if this is an obvious answer, google was no help.
I'd like to load images and their contents dynamically from a css file. I know I can set the background-image attribute for divs, but how can I achieve something similar for images?
You can't.
The <img> element holds content. The specifics of that content aren't something that can, or should, be described on the presentation layer.
You can set the src of the img to a transparent gif and set the background image of the img just like you would a div but that's a bit of a hack. You can change the src attribute of an image very easily using javascript:
html:
<img id="asdf" src="1.gif" />
javascript:
document.getElementById("asdf").setAttribute("src","2.gif");
I have one multiple div which have one image in right top corner as background. I want to give some information (like title). Can any body tell how this can be achieved in case of background image.
Thanks,
Ashwani
You have to give the element that has the background image a title.
Something like:
<div style="background-image:url(image.gif);" title="image"></div>
A background image shouldn't convey any information, thus no need for a title (btw do you mean the title attribute on some element or a heading Hn?).
If you want to add a title, then you should use an img element with a correct alt that IE will incorrectly display as a tooltip. The title attribute should add complementary information, you'd better use the alt attribute alone.