I have a list of common links for product pages, and I need to go through and grab all the links for the product image on each product page.
Eg I have got this far: I have a whole spreadsheet full of links like this
http://www.apc.com/products/moreimages.cfm?partnum=WSYSW100KF
the problem is I need the acutal image links for another column on my spreadsheet (it;s going to be used for a import on a eccomerce shop)
the thing is these image links don't seem to match up in any way and can be quite varied
http://www.apcmedia.com/resource/images/500/Front_Left/98EC66CA-5056-AE36-FE51936B432B1C17_pr.jpg
I have identified though that these images sit in what looks like a common area on the product page code
<div align="center"><img align="center" src="http://www.apcmedia.com/resource/images/500/Front_Left/98EC66CA-5056-AE36-FE51936B432B1C17_pr.jpg"></div>
How can I indetify that <img align="center" src=""> part in Jquery on each page ?
I'm thinking if I iterate through all those links, then I can grab the releavnt direct Image link, grab it and repopulate into another spreadsheet column.
I'm just not 100% on how to achieve this, any advice would be greatly appreciated.
Thanks
Use this selector to select the relevant images:
var result = [];
$("div[align=center] > img[align=center]").each(function(){
var link = $(this).prop("src");
//Do something, eg:
result.push(link);
});
//result is a list which hold all links
.prop() returns the absolute URL of an image, even when the src attribute contains a relative URL.
A > B selects every element B which is an immediate child of A.
If your src attribute* follows a certain pattern, you can also use the following selector:
$("div[align=center] > img[src^='http://path/to/images'][src$='.jpg']");
//src^= means: Match if the `src` attribute starts with ...
//src$= means: Match if the `src` attribute ends with ...
Related
I'm creating a video site using PHP, and I want to insert video source code from a PHP URL.
For example, if I want to get Episode 1 from PHP, I want it like this:
example.com/player.php?=episode1
For Episode 2:
example.com/player.php?=episode2
I don't understand how to link all of the source pages with the main index page.
How can I accomplish this task?
Here's a way you could do it: Use a form on your homepage (index.html?) to select which video you want, and send it to player.php using a GET method. Then use the following on player.php:
<?php
$select = $_GET['select']; //This will be the number input for the video number
echo("<video><source src="episode$select.mp4"></video>"); //This will source the video named `episodeX.mp4`, where `X` is the select value from the form on `index.html`.
?>
Just ask if you need any additional clarification.
In a Drupal 7 .tpl.php file, given an image $some_node->field_image, how do I fetch the appropriate URL for use in an img src attribute, taking into account the image's style as set in its node's content type's display settings? I have seen the following suggestion, but without any indication where $style is coming from:
image_style_url($style, $some_node->field_image['und'][0]['uri']);
(the incumbent views are full of these foo['und'][0]bars by the way, is this really how it's done in Drupal, it seems ridiculous?)
The $style is the style name (machine name) of the style you want to apply to the image. You can find all the image styles at ?q=admin/config/media/image-styles.
See image_style_url for more details.
Example:
image_style_url('large', $some_node->field_image['und'][0]['uri']);
Update
Based on your last comment. I'd suggest you to use field_view_field.
Example:
$node = node_load(12);
print render(field_view_field('node', $node, 'YOUR_IMAGE_FIELD_NAME'));
I spent half a day writing the content section of my index page of my website but when I tried adding another image to the list of images (There is currently 6) it was a very long and annoying process. (Website: http://rikahiyuka.com)
Is there a way to write the code so that it will be easier to add more buttons (The Images)?
Things that are linked per image listed:
- JQuery
- Div (Link)
The most annoying part is adding to the JQuery.
Is there a better way to write the code for the buttons/images in the content section so it is more compact and easier to edit?
Note: The only section of the index.php file that uses PHP is the footer for the year number.
Instead of doing each image individually, just write one function:
function showhide(shownum) {
$("#Ip1, #Ip2, #Ip3, #Ip4, #Ip5, #Ip6").hide();
$("#Il1, #Il2, #Il3, #Il4, #Il5, #Il6, #IDTopic").hide();
$("#Ip" + shownum + ", #IDTopic, #Il" + shownum).show();
}
Then, if you want to show something, you simply call this function:
showhide(6);
You can put it in your HTML (like so:)
<td>
<img id="Iimg1" class="c-img" src="#" title="Show 1" onclick="showhide(1) />
</td>
or edit your JavaScript:
$("#Iimg1").click(function(){
showhide(1);
});
Replacing 1 with whichever link you want to show. This will make it much quicker and much less annoying because you won't have to list out each element to show and hide. Just call the showhide function :) It basically works by, instead of worrying about hiding everything except the one clicked on, hiding ALL of the links. Then, showing the one requested.
We have several pages generated using PHP on our website with the following titles (for example):
http://www.mysite.com/project/category/1
http://www.mysite.com/project/category/2
http://www.mysite.com/project/category/3
Each one is created dynamically with the same page layout with each showing a different database result depending on the predefined conditions.
I would like an image to be displayed at the top of the page for just one of the results, let's say for http://www.mysite.com/project/category/2 - how can I go about this?
The relevant code on our page is this:
$category=mysql_fetch_array(mysql_query("select * from project_category where project_category_id='".$project_category_id."'"));?>
If we go down the if statement route can you show an example of how to display an example image by modifying the above code to get me started?
I would probably make it a property (can be a as simple yes/no) in the database, and use the existing db-result to determine if the category has to display a page. Although this might seem overkill - I'd definitely pick this dynamic solution over a if ($categoryId == 2) { } solution any day. Keeps it dynamic and your code clean and generic.
In the end I opted for an if statement (as found here http://www.tizag.com/phpT/if.php).
The original code above was modified in the following way:
$category=mysql_fetch_array(mysql_query("select * from project_category where project_category_id='".$project_category_id."'"));
if ( $project_category_id == "2" ) {
echo '<img src="http://www.mywebsite.com/image.jpg" width="675" height="75" border="0" />';
}?>
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.