I am trying to add a spotify music player to my website, a wordpress website. I tried with two different add-ons ,in one it was only available the widget player as a free option and the other one, give what I was looking for but I am not able to change the size of it.
The code is
[spotifyplaybutton play="spotify:album:6ttYxo44Qt6rC1z8ibKn9s" view=”coverart” size=”0″ sizetype=”compact” theme=”white”]
The only two sizetype available within the add-on is big or compact, in both cases I am getting the same size of the music player.
You can see how it looks like from the website, griotblues.com/music
Follow the approach mentioned here
You can specify the height and width of the player by setting the height and width properties of the iframe
Related
We have the ability current to share current articles on our site by clicking on the sharing icon. This loads up a URL like:
https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.mydomain.com%2Fbuild-to-suit-leases-0419%2F
What's odd, is that the image that is loaded up from the OG:Image sometimes is very large while other times it's displayed as a small icon/banner layout. But in either case, the image is the exact same size and format which is used. The browser we use doesn't make a difference. I've also found that if I wait for the linked cache to clear and try to share the link again, it can give me a different layout.
Is there something else I can provide in that URL to specify the desired layout?
I think this was already answered here:
LinkedIn share requirements (BIG image)
But
Take a look at this link
https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
So the recommended ratio of your image should be 1.91:1.
Do you have a working link for the URL you want to share?
I had problems before with it because we had something generating dynamic images and that was causing linkedin to display them little.
You can also add more meta tags to it like:
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.
More info about extra meta tags can be found here
http://ogp.me/
I'm working in a project of building a responsive website. The painful thing we're having is to deal with the content of the image in different display modes. Please be noted: the image content.
The thing is: in almost pages at PC view, the images are displayed in landscape, with great ratio between width and height. Now when bringing them to mobile view, we have to display it in a different frame. And as you might imagine, now the content of the image was scaled and cropped and then exported to some very weird images on mobile view. Like a wide picture with people are almost in left side, but after being cropped there are only non-sense objects in the picture left.
IMHO, via technical solutions we are only processing the technical attributes of the image (resizing, scaling), we are unable to deal with the image content, that's really a human matter, right?
I'm thinking about 4 solutions:
1 - Despite the customer feelings, we just scale the picture (keep
all content, just resizing it). The output sometimes will be very
ridiculous I guess because of resizing a landscape picture to a
portrait or square one. But that's mostly the easiest way to come up.
2 - Considering to image frame size on mobile view, and auto crop the
picture by picking the center area of the picture. As I said above,
it produced the non-sense picture after all.
3 - Informing customer, whenever they upload a picture, they have to upload 2 copies of it, 1 for desktop view and 1 for mobile view, and they're definitely responsible for the content displaying at front side. Tons of effort need to be spent by customers, but easier for development.
4 - Advanced feature: user can upload only 1 picture, we provide the
different view-ports and a cropper for them to decide how the image
displays on those after being cropped.
I don't have much experience in dealing with these stuff, and not sure how the world out there handling this case. As I see for now Wordpress is only requiring users to upload only 1 picture and it will automatically scale it (my 1st option). Does anyone have experience on this? Can you please share me your solutions and also your thoughts about my above solutions? Thank you.
you can build a simple web application for them to upload the picture and provide your client with a preview of how the pictures with look like for both desktop and mobile. in php, there is the GD library and it is quite easy to use for cropping and resizing.
Apply the 4th and the 1st option so you don't have to deal with it,
Crop and scale with the options you have AND let the customer decide if they want to change it and choose how the image is been displayed.
in case they ask you can say they have the option to fix it, in case they don't want to you already handle the best technological option.
As my posterous/twitter photo blog is reportedly going the way of the PC at the end of the month, I'm going to create my own. I don't want the page to take aeons to load, so I want to use small (in file size) images for the thumbnails but then, when a visitor clicks on it to view it full-size, show the "real" image (full-size, both from a screen dimension perspective and as to its file size), in a sort of reverse bait-and-switch.
So I reckon I'll need subfolders like:
Project
Images
Thumbnails
Fullsize
I imagine something like this is done a lot. Is there an accepted/"received" way to "minify" the images to use as thumbnails (some webby type tool), or will I have to save each photo at a smaller size, one by one?
My answer would seem to be the Lightbox jQuery plugin:
http://leandrovieira.com/projects/jquery/lightbox/
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
Also, for automating the creation of thumbnails, see Irfanview's Thumbnail Viewer. See http://www.irfanview.com/ and http://dev.fyicenter.com/Interview-Questions/HTML/How_do_I_make_a_thumbnail_for_my_image_s_.html
Im trying to implement a mini browser in adobe air. The browser should work in the same ways as a mobile phone browser, i.e. fit the width of the website to a certain width(specified within the html component) and leave the height to be scrollable.
I have managed to do a mini browser by using the scaleX,scaleY properties of the mx:HTML component however these make the websites look unreadable.
I have also tried setting the css3 zoom property, and that works fine, but it only zooms out certain elements, therefore messing up the site layout.
My question is: Is there a way to make a mini web browser which shows the full content of the website?
Thanks for your help
Air browser cannot be scaled without have an horrible look (no anti-aliasing).
A few years later but here is what I ended up doing:
The requirement was to show the full website that person B was looking at so that person A could guide them through the site. Due to all the limitations of the Adobe AIR Browser we ended up using IECapt (http://iecapt.sourceforge.net/) within an external process to capture the screenshot and send it back to AIR.
This is all well and good, but IECapt is quite out of date as well so recently we have started to look at the using Chromium (http://www.magpcss.net/cef_downloads/) as an ANE within our application and with that we can alter the zoom and dimensions of the page while still being able to keep it up-to-date.
I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.