I have a list of images. All svgs are perfectly formatted in the list and I learned that there is some way to create a svg code that contains jpgs/pngs. So I'd like to create the code for a svg Image that centers a jpg/png file. Is that possible?
If that wasn't clear enough here is some Pseudo of what I'm trying to do:
<img class="imgSizing" src={svgCentersPng} />
Since SVG is a text file, you could generate this (with a backend script like php) via parameters like "centerimage.svg?image=src/from/jpg". But why don't you just center the image using CSS?
With Flexbox this is just a piece of cake, see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I have some images with svg extension. I need to get those images in grayscale mode. Is it possible to do it only using css or whatever I can do with files or the <svg> tag itself? I don't want to use online tools for this convert, I need the pure styling "tools", like html css js. I have read that adding classes to <img> tag might be helpful. By the way, I need it in its original quality, so just making it gray-colored is the only objective.
Try this
<img src="img.svg" style="filter: grayscale(1);"/>
I would like to insert the SVG code at the bottom of my HTML code and not have the browser display it until i call it using a image tag or svg tag with a href and the id (i want the image in the middle of my nav bar).
what i am trying to get at is I want to have the svg file be able for me to change to color and keep my code "clean" so i don't have a huge block inside my nav bar.
i have been looking online and the only things i am running into is using the image tag (external file) witch wont let me change anything in the svg code(like change color when clicked on something). or inset it using the svg but i get a very ugly code. Am i dreaming?? or is this even possible?
thanks for your time!
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 have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that:
<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>
The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:
http://codepen.io/rpkoller/pen/DuqBh
It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.
If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:
http://codepen.io/rpkoller/pen/rdFup
Is there a way to get things going with the base64 variant? Best regards Ralf
Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.
In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.
In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.
What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.
The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.
How can I resize an image using HTML/CSS only (i.e no server code) while keeping its proportions and have a crop effect.
Details: I wish to resize it to a specified width, keep the proportions and if the height is bigger than a specified value to crop it to the specified height ?
Actually, I know how to do that using some server code but I don't want to do this. It would imply using a different file reference and refer the picture something like <img src="picture.php" />. I need to process the image in the same page that displays it.
What "bothers" me is that I have to send the image header so nothing else on the page will be displayed.
Is there a way to do something like that? Maybe from pure HTML/CSS? :P
I made a function that does something like that (except that "crop" thing) and it returns just width="" height="" and I use it like this <img src="image.jpg" resize("image.jpg") />, but I don't get how can i do that crop...
Thanks
ok, so i managed to find a way to do that from html/css. The whole idea was to get rid of that "extraheight" :
<div style="width:200px;height:200px;overflow:hidden;" >
<img src="image.jpg" width="200px" height="auto">
</div>
first my image is resized to desired width(keeping the proportions) and then giving a fixed height to containing div and setting overflow to hidden makes the script to display just the desired portion of the image.
You can't render an image and HTML in the same file because browsers depend on its content-type header to interpret it.
The content-type header of a HTML document is generally set to text/html whereas the content-type of an image is image/* (substitute * for image format). You could print image data to a HTML document, but since the browser is instructed to interpret it as text/html rather than an image its contents would be garbled.
You will need to link your <img> tag to a PHP file like you described. I'm not sure why that constitutes a problem; it's the right way to go about it. You could of course crop the image by manipulating its dimensions in HTML, but I don't recommend you do.
I think ImageMagick supports "resize to fit" and "resize to fill" methods, the latter being what you are looking for.
Before writing your img tag to the output buffer, save the image to the resulting proposed file name and let 'identify' extract the width and height of this image for you.
If you don't want to work with a seperate file but instead want the image data inline, try the data-uri method which newer web browsers support. This inlines the binary data stream of the image within the html file, so it is embedded.
You can use phpThumb, to resize and cropping the images on the fly. It uses the GD library to create thumbnails from images JPEG, PNG, GIF, etc.
create helper like:
<?php
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />';
?>
so this helper will check if resized image already created or create new one. and in both cases it returns proper url to the new image.